props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.

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

이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.

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

props가 자식 컴포넌트에서 변하지 않는 이유는 무엇인가요? 🤔

props가 자식 컴포넌트에서 변하지 않는 이유는 리액트의 단방향 데이터 흐름 원칙 때문입니다. 리액트는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 단방향으로 전달하도록 설계되었습니다. 이렇게 하면 컴포넌트 간의 데이터 흐름을 예측 가능하고 일관성 있게 만들 수 있어 애플리케이션 상태 관리가 간단해집니다.

props는 읽기 전용이기 때문에, 부모 컴포넌트에서 전달된 값이 자식 컴포넌트 내에서 임의로 변경되지 않습니다. 이로 인해, 특정 상태가 어디서 어떻게 변했는지를 예측할 수 있어 버그 발생 가능성을 줄이고 디버깅을 쉽게 합니다.

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

만약 자식 컴포넌트에서 부모 컴포넌트로부터 받은 props를 변경해야 한다면 어떻게 해야 할까요? 🧐

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