State와 Props, 그리고 props.children 이해하기

공통점

React에서 props와 state는 모두 애플리케이션의 상태를 관리하고, 상태 변경에 따라 UI를 업데이트하는 데 사용된다.

• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.
• state는 컴포넌트 내부에서 관리되며, 동적인 상태 변화를 다룹니다.

차이점

props는 부모에서 자식으로 데이터를 전달하는 읽기 전용 속성이다.
state는 컴포넌트 내부에서 변경 가능한 상태를 관리한다.

	Props	State
개념	부모→자식 컴포넌트로 전달되는 데이터	컴포넌트 내부에서 관리되는 데이터
수정 여부	변경 불가(읽기 전용)	변경 가능(setState 사용)
용도	데이터 전달, 재사용성 높은 컴포넌트 작성	사용자 상호작용, 동적 UI 구현

State

컴포넌트 내부에서 관리되는 상태로, 데이터가 변경되면 해당 컴포넌트와 그 자식 컴포넌트가 리렌더링된다.

// State 사용 예시
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

• useState를 사용하여 state를 초기화하고, setState 함수를 통해 값을 업데이트
• Virtual DOM을 사용해 상태 변화가 일어난 부분만 실제 DOM에 효율적으로 반영
• 사용자의 상호작용이나 외부 데이터에 따라 상태를 변경하여 동적인 UI 구현

Props

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용된다. props는 읽기 전용이므로 자식 컴포넌트에서 직접 변경할 수 없다.

// Props 사용 예시
function ParentComponent() {
  return <ChildComponent message="Hello, world!" />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 역할
• 불변성을 가지기 때문에 자식 컴포넌트에서 props를 변경할 수 없음
• 부모 컴포넌트가 새로운 props를 전달하면 자식 컴포넌트는 이를 감지하고 리렌더링됨
• 재사용성이 높은 컴포넌트를 만드는 데 필수적

props.children

props.children은 컴포넌트 태그 사이에 전달되는 내용을 의미합니다.
부모 컴포넌트가 자식 컴포넌트의 내용을 동적으로 삽입할 수 있도록 합니다.

function ParentComponent() {
  return (
    <Container>
      <ChildComponent />
    </Container>
  );
}

function Container(props) {
  return <div className="container">{props.children}</div>;
}

function ChildComponent() {
  return <p>Hello, world!</p>;
}

• props.children은 부모 컴포넌트의 자식 요소를 받아 렌더링
• 부모 컴포넌트의 구조나 스타일은 변경하지 않으면서, 자식 컴포넌트의 내용을 유연하게 조작할 수 있음
• React에서 컴포넌트의 구조를 유연하게 만들고 재사용성을 높이는데 중요한 역할
• 레이아웃 컴포넌트(예: Modal, Card, Container)를 만들 때 유용