리액트의 props와 state에 대해서 설명해주세요 !
리액트의 props와 state에 대해서 설명해주세요 !
props
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.- 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.
1
2
3
4
function ChildComponent(props) {
props.name = "LeeYeeun"; // 오류 발생 가능
return <div>{props.name}</div>;
}
이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.
-> props: 외부에서 주어지는 읽기 전용 데이터
state
state는 컴포넌트 내부에서 관리되는 데이터입니다.state는 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다.
state를 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트됩니다.
state는 주로 사용자 입력이나 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용됩니다.
-> state: 내부에서 관리되는 변경 가능한 데이터
state 업데이트가 비동기적으로 동작하는 이유
리액트는 성능 최적화를 위해 여러 state 변경을 한 번에 모아(batch) 처리합니다.
이 과정을 통해 불필요한 렌더링을 줄이고 애플리케이션 성능을 향상시킵니다.
props가 자식 컴포넌트에서 변하지 않는 이유는 무엇인가요? 🤔
props가 자식 컴포넌트에서 변하지 않는 이유는 리액트의 단방향 데이터 흐름 원칙 때문입니다.
부모 → 자식으로만 데이터가 전달되기 때문에 흐름이 단순하고 예측 가능하며, 상태 관리가 일관되게 유지됩니다.
props는 읽기 전용이기 때문에, 부모 컴포넌트에서 전달된 값이 자식 컴포넌트 내에서 임의로 변경되지 않습니다. 이로 인해, 특정 상태가 어디서 어떻게 변했는지를 예측할 수 있어 버그 발생 가능성을 줄이고 디버깅을 쉽게 합니다.
만약 props가 변경될 수 있다면, 자식 컴포넌트는 독립적으로 동작하지 않게 되고, 재사용이 어려워질 수 있습니다. props가 불변으로 유지됨으로써 컴포넌트는 외부 입력에 의존할 뿐 내부적으로 변경하지 않아 재사용성이 높아지고, 코드의 캡슐화가 강화됩니다.
자식 컴포넌트에서 부모 컴포넌트로부터 받은 props를 변경해야 한다면 ? 🧐
만약 자식 컴포넌트가 부모로부터 받은 props를 변경해야 한다면, 부모 컴포넌트에서 상태로 해당 데이터를 관리하고, 상태 변경 함수(setter)를 자식 컴포넌트로 전달하는 방식으로 구현해야 합니다. 이러한 기법을 상태 끌어올리기라고 합니다.
상태 끌어올리기(lifting state up)를 사용하는 이유와 단점은 ?
- 이유: 여러 자식 컴포넌트가 같은 데이터를 필요로 할 때, 공통 부모가 상태를 관리하여 일관성을 유지하기 위함.
- 단점: 부모가 비대해지고, 불필요한 자식 컴포넌트까지 다시 렌더링될 수 있음.