[React] 자식을 JSX로 전달하기

[React] 컴포넌트에 props 전달하기, prop의 기본값 지정하기

[React] JSX spread 문법으로 props 전달하기

 

리액트에서 자식을 JSX로 전달하는 것은 컴포넌트의 재사용성과 유연성을 높이는 중요한 개념입니다.

 

부모와 자식 컴포넌트

리액트 컴포넌트는 계층 구조를 가집니다.

부모 컴포넌트는 자식 컴포넌트를 포함할 수 있으며,
자식 컴포넌트는 부모 컴포넌트로부터 데이터를 받을 수 있습니다.

 

자식 컴포넌트를 JSX로 전달

부모 컴포넌트에서 자식 컴포넌트를 포함할 때, 
JSX를 사용하여 자식 컴포넌트를 전달할 수 있습니다. 
이때 전달된 자식 컴포넌트는 부모 컴포넌트의 props.children으로 접근할 수 있습니다.

function ChildComponent(props) {
  return (
    <div>
      {props.children} {/* 전달된 JSX를 렌더링 */}
    </div>
  );
}

export default function ParentComponent() {
  return (
    <div>
      <h1>저는 부모 컴포넌트입니다.</h1>
      {/* 자식을 JSX로 전달 */}
      <ChildComponent>
        <div>안녕하세요, 저는 자식 컴포넌트입니다.</div>
      </ChildComponent>
    </div>
  );
}

ParentComponent는 ChildComponent를 포함하며
<ChildComponent> 태그 사이에
<div>안녕하세요, 저는 자식 컴포넌트입니다.</div>를 넣습니다.

ChildComponent는 props.children을 통해 
부모 컴포넌트로부터 전달된 JSX를 렌더링 합니다.

 

부모 컴포넌트가 자식 컴포넌트에게 JSX를 전달하고,
자식 컴포넌트는 props.children을 통해 전달받은 JSX를 렌더링 합니다.
이로 인해 자식 컴포넌트의 내용이 부모 컴포넌트에 의해 동적으로 결정됩니다.

 

function ChildComponent({ children }) {
  return <div>안녕하세요, 저는 자식 컴포넌트입니다.</div>
}

export default function ParentComponent() {
  return (
    <div>
     <h1>저는 부모 컴포넌트입니다.</h1>
        <ChildComponent />
    </div>
  );
}

ParentComponent는 ChildComponent를 포함하지만,
ChildComponent에게 아무런 JSX를 전달하지 않습니다.
ChildComponent는 전달받은 children을 사용하지 않으며, 
항상 동일한 텍스트 "안녕하세요, 저는 자식 컴포넌트입니다."를 렌더링 합니다.

 

위 코드는 부모 컴포넌트가 자식 컴포넌트에게 아무런 JSX를 전달하지 않으며,
자식 컴포넌트는 항상 고정된 내용을 렌더링 합니다.

 

결과 화면

 

두 코드의 결과 화면은 동일하지만 기능과 동작 방식에는 차이가 있습니다.

 

Recap

• 부모 컴포넌트에서 자식을 JSX로 전달할 수 있습니다.
• 전달된 자식 컴포넌트는 자식 컴포넌트 내부에서 props.children을 통해 접근할 수 있습니다.
• 이를 통해 부모 컴포넌트는 자식 컴포넌트의 내용을 동적으로 정의할 수 있습니다.

이 개념을 사용하면 컴포넌트를 더 재사용 가능하고 유연하게 설계할 수 있습니다.