리액트에서 state와 props의 차이점은 무엇인가요?

React 강의를 보고 있는데 강사가 props는 변경되어서는 안 된다고 말했습니다. 이제 props vs. state에 관한 기사(uberVU/react-guide)를 읽고 있는데, 아래와 같이 나와 있습니다.

props와 state의 변경은 모두 렌더링 업데이트를 트리거합니다.

기사의 뒷부분에는 다음과 같이 나와 있습니다:

Props(속성의 줄임말)은 컴포넌트의 구성이자 옵션입니다. 이는 위에서 받아오며 변경할 수 없습니다.

• 그렇다면 props는 변경될 수는 있지만 불변해야 하나요?


• props와 state를 언제 사용해야 할까요?


• React 컴포넌트가 필요로 하는 데이터가 있는 경우, 이는 props를 통해 전달되어야 할까요 아니면 React 컴포넌트 내에서 getInitialState을 통해 설정되어야 할까요?

답변 1

속성과 상태는 관련이 있습니다. 한 컴포넌트의 상태는 종종 자식 컴포넌트의 속성이 됩니다. 속성은 두 번째 인수로 React.createElement()의 부모 컴포넌트의 렌더 메소드 내에서 자식에게 전달되거나, JSX를 사용하고 있다면 더 익숙한 태그 속성으로 전달됩니다.

<MyChild name={this.state.childsName} />

부모의 상태 값인 childsName은 자식의 this.props.name이 됩니다. 자식의 관점에서는 이름 속성은 불변입니다. 변경이 필요한 경우 부모는 내부 상태를 변경하기만 하면 됩니다:

this.setState({ childsName: '새 이름' });

React는 자동으로 자식으로 전달해줍니다. 그다음으로 자식이 이름 속성을 변경해야하는 경우가 있습니다. 이는 일반적으로 자식 이벤트와 부모 콜백을 통해 수행됩니다. 자식은 예를 들어 onNameChanged라고 불리는 이벤트를 제공할 수 있습니다. 그런 다음 부모는 콜백 핸들러를 전달하여 이벤트에 가입합니다.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

자식은, 예를 들어 this.props.onNameChanged('새 이름')과 같이 이벤트 콜백에 요청한 새 이름을 인수로 전달하고, 부모는 이벤트 핸들러에서 이름을 사용하여 상태를 업데이트합니다.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

답변 2

리액트에서 state와 props는 매우 중요한 개념입니다. 이 둘은 컴포넌트 간 데이터 전달과 관련된 부분에서 핵심적인 역할을 합니다.
먼저, state는 컴포넌트 내에서 관리되는 내부 데이터입니다. 이는 컴포넌트가 자체적으로 가지고 있는 데이터로, 컴포넌트의 상태를 변경하고자 할 때 사용됩니다. 상태는 사용자의 상호작용, API로부터의 데이터 로딩 등 애플리케이션의 다양한 이벤트에 의해 변경될 수 있습니다.
반면, props는 부모 컴포넌트로부터 전달되는 속성(데이터)입니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 필요한 데이터를 전달하는 것이 가능합니다. 이러한 데이터 전달은 단방향으로 이루어지며, 자식 컴포넌트에서는 props를 이용하여 데이터를 사용할 수 있습니다.
state와 props의 가장 큰 차이점은 변경 가능성입니다. state는 컴포넌트 내에서 변경될 수 있으며, setState() 메소드를 사용하여 갱신할 수 있습니다. 그에 반해 props는 읽기 전용이며, 부모 컴포넌트에서 변경할 수 있습니다.
이러한 특징들로 인해 state는 컴포넌트가 자체적으로 관리해야 하는 데이터를 처리하는데 사용되고, props는 부모 컴포넌트로부터 전달되는 데이터를 받아 사용하는 역할을 담당합니다. 따라서, state는 주로 인터랙티브한 컴포넌트 작성에, props는 컴포넌트 간의 데이터 전달에 주로 사용됩니다.
리액트 애플리케이션 개발에 있어서 state와 props 개념을 잘 이해하고 활용하는 것은 중요합니다. 적절한 상태 관리와 데이터 전달은 애플리케이션의 성능과 유지 보수성에 큰 영향을 미칩니다. 따라서, 리액트를 활용한 개발에서는 state와 props 개념에 충분한 주의를 기울이고, 이를 효과적으로 활용하여 유연하고 재사용 가능한 컴포넌트를 작성하는 것이 좋습니다.