리액트의 props와 state

props

부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.
props는 읽기 전용으로, 자식 컴포넌트에서 수정할 수 없습니다. 이는 리액트의 단방향 데이터 흐름 원칙 때문이며 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들어 버그 발생 가능성을 줄이고 디버깅을 편하게 합니다. 또한 자식 컴포넌트를 독립적으로 동작하게 하여 컴포넌트의 재사용성을 높입니다.

자식 컴포넌트에서 props를 변경해야 한다면?

자식 컴포넌트에서 props를 변경해야 한다면, 부모 컴포넌트에서 상태로 데이터를 관리하고 해당 상태를 변경할 수 있는 함수를 자식 컴포넌트로 전달하여 사용하게 하는 방식으로 구현해야 합니다.
이렇게 하면 단방향 데이터 흐름 원칙은 여전히 준수할 수 있고, 상태는 부모 컴포넌트에서 관리되기 때문에 일관성을 유지할 수 있습니다. 이러한 기법을 상태 끌어올리기라고 합니다.

state

컴포넌트 내부에서 관리되는 데이터입니다.
state는 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다. state를 변경하면 해당 state를 포함한 컴포넌트는 다시 렌더링되어 UI에 반영됩니다.
따라서 state는 사용자의 입력 또는 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용합니다.