React props와 children

props

props란 컴포넌트 간에 데이터를 전달하는 방법으로, 컴포넌트를 사용하는 부모 컴포넌트로부터 전달받는 변수값이 포함되어 있는 객체이다. 쉽게 말하자면, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하기 위한 방법인 것이다.

필요한 경우에만 선언하며, HTML 속성 같은 형태로 전달된다.

// 자식 컴포넌트
const ChildComponent = (props) => {
  return (
    <div>
      <h1>Child Component</h1>
      <p>제 이름은 <strong>{props.name}</strong>이고 나이는 <strong>{props.age}세</strong>입니다</p>
    </div>
  );
};

export default ChildComponent;

// 부모 컴포넌트
import ChildComponent from "./ChildComponent";

const ParentComponent = (props) => {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent name="짱구" age={5} />
    </div>
  );
};

export default ParentComponent;

 

구조 분해하여 전달 할 수 있으며, 이 때 기본값을 설정 할 수도 있다.

// 자식 컴포넌트
const ChildComponent = ({ kor=0, eng=0, math=0 }) => {
  return (
    <div>
      <h1>Child Component</h1>
      <p>국어점수 : {kor}, 영어점수 : {eng}, 수학점수 : {math}</p>
      <p>총점 {kor+eng+math}</p>
    </div>
  );
};

export default ChildComponent;

 

 

children

props의 속성 중 하나로 자식 요소를 전달할 수 있게 해준다. 이를 통해 컴포넌트의 구성 요소를 다양하게 재사용할 수 있다.

큰 틀은 같으나, 자식 요소들은 다른 경우 등을 위한 방법으로, 보다 복잡하고 동적인 컴포넌트를 구성할 수 있다.

 

부모 컴포넌트에서 태그 사이에 작성한 내용이 자식 요소로 전달된다. (<컴포넌트명>여기에 작성한 내용이 전달된다!</컴포넌트명>)

// 자식 컴포넌트
cont ChildComponent = ({ children }) => {
	return (
    	<div>{children}</div>
    );
};

export default ChildComponent;

// 부모 컴포넌트
import ChildComponent from "./ChildComponent";

cont ParentComponent = () => {
	return (
    	<ChildComponent>
        	<p>자식 컴포넌트에 전달하고 싶은 내용 작성하기</p>
        </ChildComponent>
    );
};

export default ParentComponent;