리액트의 props와 state

props
부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터
읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없음
그로 인해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높임

state
컴포넌트 내부에서 관리되는 데이터
동적으로 변경될 수 있고, 렌더링에 영향을 미침.
state를 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트됨
주로 사용자 입력이나 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용됨

props가 자식 컴포넌트에서 변하지 않는 이유

리액트의 단방향 데이터 흐름 원칙 때문
리액트는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 단방향으로 전달하도록 설계
그래서 컴포넌트 간의 데이터 흐름을 예측 가능하고 일관성 있게 만들 수 있어 애플리케이션 상태 관리가 간단해짐

props는 읽기 전용이여서 자식 컴포넌트 내에서 임의 변경할 수 없기에, 특정 상태가 어떻게 변했는지 예측할 수 있어 디버깅을 쉽게 함

props가 변경될 수 있다면, 자식 컴포넌트는 독립적으로 동작하지 않게 되고, 재사용이 어려워질 수 있음
props가 불변으로 유지됨으로써 컴포넌트는 외부 입력에 의존할 뿐 내부적으로 변경하지 않아 재사용성이 높아지고, 코드의 캡슐화가 강화됨

캡슐화
객체 지향 프로그래밍의 핵심 개념
데이터와 데이터를 처리하는 방법을 하나의 단위로 묶는 것
1. 정보 은닉
내부 데이터는 외부에서 직접 접근할 수 없도록 숨기고, 필요한 경우에만 메서드를 통해 접근. 데이터의 무결성 유지
2. 유지보수 용이성
코드의 특정 부분을 수정할 때, 해당 부분에만 영향을 주기 때문에 전체 시스템에 미치는 영향 최소화

자식 컴포넌트에서 부모컴포넌트로부터 받은 props를 변경해야한다면?

상태를 부모 컴포넌트로 올려 부모 컴포넌트에사 props를 다시 전달하는 방식으로 구현해야함
그러면 데이터는 여전히 단방향으로 흐르고, 상태는 부모 컴포넌트가 관리해 일관성 유지 가능
이러한 기법이 상태 끌어올리기라고 함

import React, { useState } from 'react';

// 자식 컴포넌트
const ChildComponent = ({ count, onIncrement }) => {
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={onIncrement}>증가</button>
    </div>
  );
};

// 부모 컴포넌트
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent count={count} onIncrement={incrementCount} />
    </div>
  );
};

export default ParentComponent;

부모에서 상태를 관리 후 props를 변경해줘서 자식 컴포넌트가 직접 props를 변경하지 않게 됨