Props와 State

Props와 State

Props (Properties)

• Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이며, 자식 컴포넌트는 props를 수정할 수 없다.
• 특징
  1. 읽기 전용: props는 자식 컴포넌트 내에서 변경이 불가능하다.
  2. 단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달된다.
  3. 컴포넌트 재사용성 증가: 부모에서 props를 다르게 전달하면 컴포넌트를 다양한 방식으로 재사용할 수 있다.
• 예시: App은 Greeting 컴포넌트에 name이라는 props를 전달한다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

 

 

State

• State는 컴포넌트 내부에서 관리되는 동적인 데이터이며, 값을 변경 시 해당 컴포넌트는 다시 렌더링된다.
• 특징
  1. 동적 데이터 관리: 사용자 입력, 네트워크 응답 등 변하는 데이터를 다룬다.
  2. 렌더링 트리거: State가 변경되면 React는 컴포넌트를 다시 렌더링한다.
  3. 지역적 관리: 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>
  );
}

 

 

Props가 읽기 전용인 이유

• 단방향 데이터 흐름: React는 부모에서 자식으로 데이터를 전달하는 단방향 데이터 흐름을 따르는데, 이 원칙은 데이터의 흐름을 예측 가능하고 일관성 있게 만들어준다.
• 재사용성과 캡슐화 강화: Props가 변경 가능하면 자식 컴포넌트는 독립적으로 동작하지 못해 재사용성이 떨어지지만, 읽기 전용으로 유지하면 컴포넌트는 외부 입력만 처리하며, 코드의 신뢰성과 유지보수성이 증가한다.

 

Props를 변경해야 하는 경우

• 만약 자식 컴포넌트가 props를 변경해야 한다면, 상태 끌어올리기 (Lifting State Up) 기법을 사용해야 한다.
• 부모 컴포넌트에서 해당 데이터를 상태로 관리하고, 상태 변경 함수를 자식 컴포넌트에 전달하는데, 자식 컴포넌트는 이 함수를 호출해 부모의 상태를 업데이트할 수 있다.
• 예시: Child는 부모 컴포넌트의 상태를 직접 수정하지 않고, onChange 함수를 통해 업데이트를 요청한다.

function Parent() {
  const [value, setValue] = useState("Initial Value");

  return <Child value={value} onChange={setValue} />;
}

function Child({ value, onChange }) {
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => onChange("Updated Value")}>Update</button>
    </div>
  );
}

 

 

Props와 State의 비교

특징	Props	State
정의	부모에서 자식으로 전달되는 데이터	컴포넌트 내부에서 관리되는 데이터
변경 가능 여부	변경 불가	변경 가능
데이터 흐름	단방향 (부모 → 자식)	컴포넌트 내부에서 관리
재사용성	컴포넌트 재사용성 증가	컴포넌트의 동작 상태 관리