007. [코딩애플] [part1] Component 많은 div들을 한 단어로 줄이고 싶으면

컴포넌트란?

리액트에서 반복되는 UI(쉽게 이야기해서 HTML영역, 물론 엄밀히 말하면 jsx 문법인 영역)을 따로 분리해서 하나의 함수로 만든 다음 간단하게 호출하는 방법을 이야기 한다.

예를 들어 리액트 프로젝트를 처음 세팅하면 App.jsx에서 자바스크립트와 HTML(jsx)를 모두 여기서 작성하게 될 텐데 이것 또한 자세히 보면 function App() {}이 코드 블럭 안에 있는 하나의 컴포넌트이다.

컴포넌트의 예시

모달창을 HTML에서 만들었고 만약 이 태그가 복잡하고 길다면 하나의 컴포넌트로 분리해서 아래와 같이 메인 컴포넌트(보통 App.jsx)에서 호출만 해서 사용 가능하다.

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

프레그먼트

리액트 컴포넌트 안에서는 return문 안에 jsx를 그리게 되는데, 여기서는 여는 태그와 닫는 태그를 병렬적으로 사용할 수 없다. <div></div> 이렇게 사용 불가능 하고 라인을 나눠줘야 한다.

그런데 가장 바깥에 div로 묶어주면 그 안에서는 병렬로 사용할 수 있는데 이러면 의미 없는 div가 생기는 것이므로 리액트에서는 <></>와 같이 return문 가장 바깥으로 프래그먼트를 사용해서 내부에서 병렬로 태그를 사용할 수 있도록 해줄 수 있다.

컴포넌트 분리

function App() {
  return (
    <>
      <Modal />
    </>
  );
}

// 함수 선언식 모달 컴포넌트 분리
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );

  // 함수 표현식 모달 컴포넌트 분리
  const Modal = () => {
    return (
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    );
  };
}

위와 같이 또 하나의 함수로 만들면 그것이 컴포넌트가 되는 것이고, 같은 App 컴포넌트가 있는 파일에서 작성할 수도 있지만 보통은 components라는 폴더를 만들어 여기에서 관리한다.

메인 컴포넌트에서 자식 컴포넌트를 불러오는 방법은 <컴포넌트명/>으로 불러올 수 있다.

컴포넌트를 언제 쓰는가?

1. 반복되는 UI를 효율적으로 하고 싶을 때
2. HTML이 너무 길어질 때
3. 내용이 자주 변경되어서 유지보수를 별도로 계속 해야 할 때 => App컴포넌트 내에 있으면 그 긴 코드에서 찾아서 바꿔줘야 하기 때문에 별도로 빼주면 유지보수하기 편리함.
4. 페이지 별로, 기능 별로 팀원들과 협업할 때 => 맡은 기능을 컴포넌트로 분리해서 작업.

컴포넌트 남발 시

부모 컴포넌트와 자식 컴포넌트는 각각의 함수로 자신만의 스코프를 갖기 때문에 각자의 함수 코드블럭 내에서 선언된 변수는 서로 불러들일 수 없음. 하지만 props를 사용하면 서로 통할 수 있는데, 컴포넌트가 너무 많아지면 엮이고 엮인 게 많아 오히려 가독성이 떨어지고 관리하기 어려울 수 있음.