리액트에서 가장 중요한 요소들인 State와 Props의 차이와 구분에 대해서 적었습니다.
State 와 Props
React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 주요하게 사용하는 것이 바로 State 와 Props 있니다. 적어보니 프론트엔드에서 가장중요하다고 해도 과언이 아닌것 같은 기능이네요.
이 두 개념의 차이를 아는 것은 React를 효율적으로 이용하기 위해 도움이 될 것이라고 생각합니다.
- State : 구성 요소가 있는 상태
- Props : 부모 구성 요소로부터 전달된 속성
State (상태)
- mutable data (가변 데이터)
- maintained by component (구성 요소에 의해 유지)
- can change it (변경 가능)
- should be considered private (프아이빗)
State는 가변 데이터입니다. State의 변경은 가상 DOM과의 차이를 취 실제 DOM을 업데이트하고 구성 요소를 다시 그리기위한 기본적인 방법이 있습니다.
State 구성 요소 자체에 의해 유지되고 구성 요소에서 구성 요소에 전달되지 않습니다.
State는 UI에 관련된 상태 (드롭 다운이 열려 있는지 닫혀 있는지 등) 또는 외부 데이터와 관련된 상태 (현재 로그인 한 사용자의 이름 등) 와 같은 것을 담당합니다.
State 값은 this.setState()구성 요소에서 호출하여 업데이트됩니다. 이것이 호출되면 기존의 State를 새로운 State로 대체하고, 구성 요소의 render()메소드가 실행됩니다.
Props (속성)
- immutable data (불변의 데이터)
- passed in from parent (부모로부터 전달되는)
- can not change it (변경 불가)
- can be defaulted & validated (기본값 설정 및 확인 가능)
Props은 일반적으로 부모 요소에서 자식 구성 요소에 전달되는 값입니다.
다음 JSX 코드에서는 text 와 onClick 이 Button 구성 요소에 전달되는 Props 이 됩니다.
<Button text = "click me" onClick = {this.clickHandler} />
Props은 불변의 데이터로 처리됩니다 getDefaultProps에 정의 된 기본값 또는 부모 구성 요소로부터 전달 된 값 중 하나를 가질 수 있습니다.
State와 Props의 구분
구성 요소는 필요에 따라 내부의 State를 자유롭게 사용할 수 있지만, 좋은 UI 체험을 위해 직접 외부 State에 연결하는 경우에는 Props에서 받아야합니다.