-
상태 (state) : 특정 시점에 프로그램이 사용하고 있는 정보 (=특정 시점에 프로그램에 대해 알고 있는 것들의 스냅샷)
-
js 는 "완료될 때까지 실행"하는 속성이 있음
-
리액트에서 데이터의 상태는,
1) 컴포넌트 내에서 변경 가능한 데이터인 "상태"와
2) 컴포넌트가 변경할 수 없으며, 수신만 가능한 데이터인 "속성"으로 구분 -
리액트는 컴포넌트의 상태(state)를 setState를 이용해 변경이 가능한 가변 객체로 다루며, 속성(props)은 읽기전용으로 다룬다.
-
리액트에서 불변 데이터를 전달하기 위한 가장 기본적인 방법은 "속성(props)"을 이용하는 것
- 속성은 일종의 불변 데이터
- 속성은 리액트 컴포넌트에 전달되는 데이터
- 부모컴포넌트가 전달할 수도 or 컴포넌트 자체의 defaultProps 정적 메서드를 통해 전달할 수도
-
컴포넌트의
- 상태는 개별 컴포넌트가 따로 관리
- 속성은 보통 부모 컴포넌트가 전달
-
단방향 means 갱신된 데이터는 부모 컴포넌트로부터 자식 컴포넌트로만 전달된다는 것을 의미
- 상태를 사용하는 부모 컴포넌트는 자신의 상태를 변경할 수 있으며,
- 변경된 상태를 자식 컴포넌트의 속성으로 전달함으로써 속성을 변경하게 됨
-
상태가 없는 함수형 컴포넌트는 기본적으로 함수
- pure function
- 불필요한 생명주기 검사 or 메모리 할당을 수행하지 않도록 최적화되어 있기 때문에 훨씬 빠르게 동작
<정리>
- 상태(state)는 어느 특정 시점에 프로그램이 사용할 수 있는 정보들을 의미
- 불변 상태는 변경되지 않지만, 가변 상태는 변경 가능
- 영속적이며 불변인 데이터 구조는 변경되지 않음 / 그저 변경 내용을 기록하고 자신의 복사본을 생성할 뿐
- 속성(props)은 의도적으로 만들어진 불변 객체이며, 한번 설정되면 수정되어서는 안 됨
- 컴포넌트의 상태는 지원 인스턴스가 추적하며, setState 메서드를 이용해 수정 가능
- setState 메서드는 데이터의 얕은 병합을 수행하여 컴포넌트의 상태를 갱신하며, 수정이 발생하지 않은 최상위 속성들은 그대로 보존됨
- 리액트에서 데이터는 한쪽으로만 흐르지만, 부모 컴포넌트의 상태를 직접 수정할 수는 없으며, 부모 컴포넌트 역시 자식 컴포넌트의 상태를 직접 수정할 수 없음. 컴포넌트 간의 상호작용은 속성(props)을 통해서만 가능
생명주기
-
will vs did
- 초기화 : 컴포넌트 클래스의 인스턴스가 생성되는 시점
- 마운팅 : 컴포넌트가 DOM에 삽입되는 시점 (리액트가 컴포넌트를 돔에 삽입하는 과정 / 컴포넌트는 리액트가 실제 돔에 추가하기 전에는 오로지 가상 돔에만 존재한다)
- 갱신 : 컴포넌트가 상태나 속성으로 전달된 새 데이터에 의해 갱신되는 시점
- 언마운팅 : 컴포넌트가 DOM에서 제거되는 시점
< order >
componentWillUnmount()
⬇️
가상 DOM
⬇️ ReactDOM.render( )
생성자에서 props 및 초기 state 설정
⬇️
componentWillMount() (setState 사용 가능)
⬇️
render()
⬇️
componentDidMount() (setState 사용 가능)
- 리액트가 이 메서드를 호출하면, 컴포넌트의 참조(ref)에 접근할 수 있으며,
- 이 메서드에서는 컴포넌트의 상태(state)와 속성(props)에도 접근할 수 있으며,
- 컴포넌트 갱신도 가능하다
- (즉, 네트워크 요청의 응답으로 전달받은 데이터를 이용해서 컴포넌트 상태를 갱신하는 작업 등을 수행하기에 적절한 시점이라는 뜻)
⬇️
마운트 된다
(컴포넌트가 마운트되어있는 동안에는 실제 DOM에 존재하게 되며, 데이터의 동기화를 위해서 리액트가 지속적으로 갱신한다)
⬇️ props
componentWillReceiveProps(nextProps) () (setState 사용 가능)
⬇️
sholdComponentUpdate(nextProps, nextState)
⬇️ 실패시 다시 마운트 된다
마운트 된다
⬇️ setState ( )
componentWillUpdate(nextProps, nextState)
⬇️
render()
⬇️
componentDidUpdate(prevProps, prevState) (setState 사용 가능)
⬇️
마운트 된다 (컴포넌트가 마운트되면 갱신을 처리할 수 있다)
