Published on

3단계: 컴포넌트 구조 이해

🧩 목표

  • React의 "컴포넌트" 개념을 이해하고
  • 함수형 vs 클래스형 차이를 구분하며
  • props, children의 흐름을 파악하고
  • 상태를 공유하는 방법과 파일 구조 설계까지 배운다

3-1. 컴포넌트란 무엇인가?

React에서 컴포넌트는 UI의 최소 단위이자 독립적인 기능 블록입니다.
HTML로만 UI를 만들면 코드가 반복되고 유지보수가 힘들어집니다.
React는 이를 해결하기 위해 UI를 작고 재사용 가능한 조각으로 분리합니다.

예: 버튼, 입력창, 리스트 아이템, 모달창 = 전부 컴포넌트

3-2. 함수형 vs 클래스형 컴포넌트

현재는 거의 모든 컴포넌트를 함수형으로 만들고 있습니다.
과거에는 클래스형이 주류였지만, 이제는 Hook이 나오면서 함수형이 더 깔끔하고 직관적입니다.

// 함수형
function Hello({ name }) {
  return <h1>Hello, {name}</h1>;
}

// 클래스형
class HelloClass extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

클래스형을 쓰는 경우

  • 레거시 코드 유지
  • ErrorBoundary 구현 시

3-3. Props로 데이터 전달하기

React는 상위 컴포넌트가 하위 컴포넌트에 데이터를 전달할 때 props를 사용합니다.

function Welcome(props) {
  return <h2>{props.username}님 반갑습니다</h2>;
}

// 사용
<Welcome username="H.Y" />

props는 읽기 전용이며, 자식 컴포넌트에서 변경하면 안 됩니다.

3-4. Children 다루기

props.children은 컴포넌트 안에 감싼 태그들을 자동으로 전달해주는 특별한 props입니다.

function Box({ children }) {
  return <div className="box">{children}</div>;
}

<Box>
  <h1>제목</h1>
  <p>내용입니다</p>
</Box>

이 패턴은 공통 레이아웃, 모달, 카드 UI 등에 매우 유용합니다.

3-5. 상태 끌어올리기 (Lifting State Up)

두 개 이상의 컴포넌트가 같은 데이터를 공유할 때는 공통된 부모 컴포넌트로 상태를 끌어올려야 합니다.

function Parent() {
  const [text, setText] = useState("");

  return (
    <>
      <Input value={text} onChange={setText} />
      <Preview value={text} />
    </>
  );
}

상태를 위로 올려서 자식 컴포넌트에 props로 나눠주는 방식입니다.

3-6. 폴더 구조 설계

큰 프로젝트는 컴포넌트를 기능 단위로 폴더화하는 것이 좋습니다.

/components
  /Button
    index.jsx
    style.css
  /Card
    index.jsx
    Card.css

index.jsx를 쓰면 import 경로가 간결해집니다:

import Button from "./components/Button";

3-7. 재사용 가능한 컴포넌트 만들기

프레젠테이셔널 컴포넌트

  • UI만 담당 (디자인 중심)
  • 상태 없음

컨테이너 컴포넌트

  • 로직/데이터 처리
  • API 호출, 상태 관리

이렇게 역할을 나누면 유지보수가 쉬워지고, 테스트하기도 수월해집니다.

요약

  • React는 컴포넌트를 중심으로 동작합니다.
  • 함수형이 기본이며 props로 데이터 전달합니다.
  • children으로 태그 내부 콘텐츠를 유연하게 다룹니다.
  • 상태를 공유하려면 끌어올려서 전달합니다.
  • 폴더 구조는 기능 단위로 정리하는 게 핵심입니다.
  • 프레젠테이셔널 vs 컨테이너 분리를 고려합시다.

심화학습

Q1. 클래스형 컴포넌트를 여전히 사용하는 이유는?

A1. 레거시 유지 보수나 ErrorBoundary처럼 특정 기능은 아직 클래스형이 필요합니다.

Q2. props와 state의 가장 큰 차이점은?

A2. props는 외부에서 주어지고 읽기 전용, state는 내부에서 선언되고 변경 가능하다는 점이 가장 다릅니다.

Q3. 컴포넌트를 너무 잘게 쪼개면 안 좋은 이유는?

A3. 코드가 지나치게 분산되어 오히려 추적이 어려워지고, props 전달이 복잡해질 수 있습니다. 의미 단위로 나누는 게 핵심입니다.