React에서 props는 왜 읽기 전용(read-only)이어야 하나요? 자식 컴포넌트에서 props를 직접 수정하면 어떤 문제가 생기나요?

React에서 props가 읽기 전용인 이유는 크게 두 가지입니다. 첫째, 단방향 데이터 흐름을 유지하기 위해서입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되면, 자식 컴포넌트는 이 데이터를 그대로 사용해야 합니다. 만약 자식 컴포넌트에서 props를 직접 수정해버리면, 부모 컴포넌트의 상태와 자식 컴포넌트의 상태가 불일치하게 되어 예측 불가능한 동작을 야기할 수 있습니다.

둘째, 컴포넌트를 순수 함수처럼 다루기 위함입니다. 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 보장하며, 외부 상태를 변경하지 않습니다. props를 읽기 전용으로 유지함으로써 React 컴포넌트 역시 이러한 순수 함수의 특성을 갖게 되어, 코드의 예측 가능성을 높이고 디버깅을 훨씬 용이하게 만듭니다.

자식 컴포넌트에서 props를 직접 수정하면, 해당 컴포넌트뿐만 아니라 데이터를 전달한 부모 컴포넌트의 렌더링에도 예기치 않은 영향을 줄 수 있습니다. 이는 복잡한 애플리케이션에서 데이터 흐름을 추적하기 어렵게 만들고, 예상치 못한 버그를 발생시키는 주요 원인이 됩니다. 따라서 자식 컴포넌트에서 데이터를 변경해야 할 경우, props를 직접 수정하는 대신 부모 컴포넌트의 상태를 변경하는 콜백 함수를 props로 전달받아 사용하는 것이 올바른 방법입니다.