Props의 전달

1️⃣ 부모에서 자식으로 State 전달

부모 컴포넌트가 가진 State를 자식에게 전달하고 싶을 때 props를 사용한다.

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

  return <Counter count={count} setCount={setCount} />;
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

• 부모 App이 가진 count 상태를 props로 전달
• 자식 Counter는 props로 받은 count와 setCount를 활용
• 클릭 시 count가 증가 → 부모 state 변경 → 부모 + 자식 리렌더링

---

 

2️⃣ 자식 컴포넌트 리렌더링

React에서 컴포넌트가 리렌더링 되는 경우는 다음과 같다:

1. 자신의 state가 변경될 때
2. 자신이 받은 props가 변경될 때
3. 부모 컴포넌트가 리렌더링 될 때 → 기본적으로 자식도 리렌더링

⚠️ 주의: 부모 때문에 의미 없이 자식이 리렌더링 되면 성능에 영향

 

---

3️⃣ 불필요한 자식 리렌더링 방지

• React는 기본적으로 props가 바뀌면 리렌더링
• 관련 없는 자식 컴포넌트까지 렌더링되면 성능 문제 발생

해결 방법

1. 컴포넌트 분리

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("민지");

  return (
    <>
      <Counter count={count} setCount={setCount} />
      <UserName name={name} />
    </>
  );
}

 

• Count 변화 → Counter만 리렌더링
• UserName은 변하지 않음

 

2. React.memo 사용

const UserName = React.memo(function UserName({ name }) {
  console.log("UserName 렌더링");
  return <p>{name}</p>;
});

 

• props가 바뀌지 않으면 렌더링하지 않음

 

---

4️⃣ State → Props 전달 시 주의점

• Props는 읽기 전용이다
• 자식에서 props를 직접 변경하면 안 됨

// ❌ 잘못된 예시
function Counter({ count }) {
  count = count + 1;
}

 

• 상태를 바꾸려면 항상 setState 함수를 부모로부터 전달받아서 사용

 

---

5️⃣ State와 Props 흐름 요약

부모 State 변화
          ↓
props로 전달된 값 변경
          ↓
자식 컴포넌트 리렌더링
          ↓
UI 업데이트

• 단방향 데이터 흐름(One-way Data Flow)
• 부모 → 자식
• 자식 → 부모 → 상태 변경 함수 호출