요약
React에서 props와 state는 둘 다 컴포넌트에서 데이터를 다루는데 사용된다는 공통점이 있습니다. 차이점으로는 props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터인 반면 state는 컴포넌트 내부에서 관리되는 변경 가능한 데이터라는것입니다. 따라서 props는 읽기 전용 데이터를 전달하는데 사용되며, state는 컴포넌트 내부에서 변경 가능한 데이터를 관리하는데 사용됩니다.
props
props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터.
props는 함수의 매개변수나 클래스형 컴포넌트의 this.props 객체를 통해 사용 할수있음.
props는 변경되지 않으며, 자식 컴포넌트에서 전달받은 데이터를 사용하여 렌더링함.
부모 컴포넌트에서 props를 사용하여 자식 컴포넌트에 데이터를 전달할수 있음.
주의사항 : props는 일반적으로 읽기 전용이며 컴포넌트 내부에서 수정되어서는 안됨.
→ props를 그대로 사용하지 말고 새로운 변수에 할당하거나 필요한 데이터만 추출하여 사용하는것이 좋음.
React에서 props는 단방향 데이터 흐름을 따름.
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할수 있지만 자식 컴포넌트에서 부모 컴포넌트로 데이터를 직접 전달하는것은 불가능함.
→ 대신 부모 컴포넌트에서 자식 컴포넌트로 콜백함수나 props를 통해 데이터를 전달하고 자식 컴포넌트에서 해당 콜백 함수를 호출하여 부모 컴포넌트에 데이터를 전달하는 state 끌어올리기를 통해 간접적으로 부모 컴포넌트와 상호작용이 가능함.
state
state는 컴포넌트 내부에서 관리되는 변경 가능한 데이터.
state는 클래스형 컴포넌트에서 this.state 객체를 통해 사용할수 있으며 setState() 메서드를 사용하여 변경할수 있음. state의 변경은 render() 메서드를 트리거하고 UI를 업데이트 함.