[React] 컴포넌트(Componet)에 대해서 알아보자.

 

React에서 컴포넌트는 재사용이 가능한 UI 요소를 나타냅니다.

간단히 말해서 UI를 구성하는 작은 부분들을 컴포넌트들로 조힙하여 전체 애플케이션을 구축하는 개념입니다.

이러한 구조는 코드를 이해하거나 유지보수하기에 쉽게 만들어줍니다.

 

만들어진 컴포넌트는 원하는 곳에서 사용할 수 있습니다.

 

컴포넌트 만드는 방법

1) function을 이용해서 함수를 하나 만들어주고 작명합니다.
2) 그 함수 아네 return() 안에 축약을 원하는 HTML을 담으면 됩니다.
3) 원하는 곳에 <함수명/> 을 사용하면 축약한 HTML이 등장하게 됩니다.

 

컴포넌트 만들때 주의점

1) 함수명으로는 맨 앞글자에 대문자를 유지해줘야 합니다.
2) retrutn 안에는 항상 하나의 <> </>으로 이루어져야 합니다.
3) function App(){} 내부에서 만들면 안됩니다.

 

 

ex)

return(
  <Modal><Modal/>
);

function Modal() {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  );
}

 

 

컴포넌트는 언제 만드는게 좋을까?

1) 사이트에서 반복해서 출현하는 HTML 덩어리에 사용합니다.
2) 내용이 자주 변경될 것 같은 HTML 부분을 잘라서 컴포넌트로 만들면 좋습니다.
3) 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋습니다.
4) 또 다른 팀원과 협업할때 웹 페이지를 컴포넌트 단위로 나눠 작업을 분배하기도 합니다.

 

 

컴포넌트의 단점

불필요하게 쪼개서 컴포넌트를 생성할 시 관리하기 어려우면 state를 사용하기에 복잡하며 가독성 및 유지보수가 어렵습니다.