React children props 쉽게 이해하기

React children props에서 먼저 볼 부분

children은 컴포넌트 태그 사이에 작성한 내용을 자식 컴포넌트 안에서 받을 수 있게 해주는 특별한 props입니다.

React 컴포넌트는 속성으로 값을 받을 수도 있고, 태그 사이에 들어온 내용을 children으로 받을 수도 있습니다. 이 방식은 레이아웃 틀은 고정하고 내부 내용만 바꿀 때 유용합니다.

Card, Modal, Layout 같은 컴포넌트는 children을 자주 사용합니다. 겉모양은 컴포넌트가 담당하고, 안에 들어갈 제목이나 문단, 버튼은 사용하는 쪽에서 자유롭게 넣을 수 있습니다.

children은 문자열 하나일 수도 있고 JSX 여러 개일 수도 있습니다. 그래서 단순한 값보다 화면 조각을 전달한다는 느낌으로 이해하면 좋습니다.

모든 props를 children으로 처리하면 오히려 구조가 흐려질 수 있습니다. 제목, 상태, 옵션처럼 이름이 분명한 값은 일반 props로 두고, 화면 조각 전체를 감쌀 때 children을 쓰면 자연스럽습니다.

카드 컴포넌트에 children 사용하기

function Card({ children }) {
  return <article className="card">{children}</article>;
}

function App() {
  return (
    <Card>
      <h2>공지</h2>
      <p>오늘의 학습 내용을 확인하세요.</p>
    </Card>
  );
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 태그 사이 내용이 필요한 컴포넌트인지 확인하기
• 레이아웃 틀과 내부 내용을 나누기
• 명확한 값은 일반 props로 전달하기
• Card나 Modal 같은 감싸는 컴포넌트에 우선 적용하기