[매일메일] React의 props와 state란? (FE.241219)

props란?

- 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터.

- 읽기 전용이라 자식 컴포넌트는 props를 수정할 수 없음.

- 컴포넌트 사이의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트 재사용성 높임.

function ChildComponent(props) {
  props.name = "New Name"; // 오류 발생 가능
  return <div>{props.name}</div>;
}

 

state란?

- 컴포넌트 내부에서 관리되는 데이터.

- state 변경되면 컴포넌트는 다시 렌더링되고 ui가 업데이트 됨.

- 사용자 입력이나 네트워크 요청 응답에 따라 변하는 데이터 관리할 때 사용함.

 

props가 자식 컴포넌트에서 변경할 수 없는 이유?

- 리액트의 단방향 데이터 흐름 원칙. 부모 컴포넌트가 자식 컴포넌트에 단방향으로 데이터를 전달.

- 데이터 흐름을 예측 가능하고 일관성있게 만들기 위함. 어플리케이션 상태 관리가 간단해짐.

 

- 만약 props가 변경 가능하다면, 자식 컴포넌트는 독립적이지 않게 되고, 재사용 가능하지 않게 됨.

  - 부모는 데이터 제공, 자식은 데이터 사용으로 역할이 분리되어 있음.

  - 그러나 자식도 데이터 수정이 가능해지면, 역할 분리가 안되고 서로 의존성이 증가한다는 뜻.

  - props가 자식에서 변경 가능해지면, 부모 컴포넌트는 자식 컴포넌트의 동작을 신뢰할 수 없음.

      - 원래 props를 자식이 변경할 수 없기에 예측된 동작을 항상 수행하는 것을 보장하는데, 이 신뢰가 깨짐.

      - 자식의 props 변경 불가능성 때문에 다른 부모와 조합해 사용하며 재사용도 가능한 건데, 이게 깨짐.

 

function Button({ label }) {
  label = "Changed"; // props를 변경
  return <button>{label}</button>;
}

function App() {
  return <Button label="Submit" />;
}

부모 컴포넌트가 준 Submit 라벨을 자식 컴포넌트가 Changed로 바꿔버린 상황.

 

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

- 상태 끌어올리기 기법을 사용한다

- 부모 컴포넌트에서 state로 해당 데이터를 props로 관리하고, 상태 변경 함수를 자식 컴포넌트로 전달해야 함.

- 데이터의 단방향성을 유지하고, state를 부모 컴포넌트에서 관리하는 일관성을 유지할 수 있음

function InputA({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

function InputB({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

function App() {
  const [sharedValue, setSharedValue] = React.useState("");

  return (
    <div>
      <InputA value={sharedValue} onChange={setSharedValue} />
      <InputB value={sharedValue} onChange={setSharedValue} />
    </div>
  );
}

sharedValue 상태를 App 컴포넌트에서 관리함.

InputA와 InputB는 부모로부터 value와 onChange를 props로 받아 공유된 상태를 사용함.

어느 한 컴포넌트에서 값을 변경하면 부모 컴포넌트의 상태가 업데이트 되고, 모든 자식 컴포넌트에 같은 값이 전달.

 

상태 끌어올리기에서 주의할 점

- 공통 부모 컴포넌트에 너무 많은 상태를 집어넣으면 코드 복잡도가 증가함

- prop drilling: state와 state 변경 함수를 여러 계층의 자식 컴포넌트로 전달해야 하는 상황

   - 부모에서 자식으로, 자식에서 아래 자식으로... 계속 내려가며 코드 복잡도가 증가하는 문제.

   - 전역 데이터를 사용해서 해결한다. Context API, Redux 등. 계속 내리 전달하지 않고 자식들이 바로 접근 가능.

 

---

 

출처

[1] 매일메일. 241219. 리액트의 props와 state에 대해서 설명해주세요. 16번. https://maeil-mail.kr

[2] gpt에게 리액트의 props에 대해 묻다.