static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.value != = prevState.value) { // 조건에 따라 특정 값 동기화
return { value: nextProps.value };
}
return null; // state를 변경할 필요가 없다면 null을 반환
}
render():
UI(jsx)를 렌더링하는 메서드
-필수 메서드
-this.props와 this.state에 접근 가능
-리액트 요소 반환(div 등 태그 or 따로 선언한 컴포넌트 or 아무것도 안 보여주고 싶을 경우 null이나 false)
-금지: 이벤트 설정이 아닌 경우 setState사용x, 브라우저 DOM 접근x >>componentDidMount에서 처리
componentDidMount():
컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
-자바스크립트 라이브러리 또는 프레임워크의 함수 호출
-비동기 작업 진행(이벤트 등록, setTimeout, setInterval, 네트워크 요청 등)
업데이트되는 4가지 이유
1)props가 바뀔 때
2) state가 바뀔 때
3) 부모 컴포넌트가 리렌더링 될 때
4) this.forceUpdate로 강제로 렌더링을 트리거할 때
getDerivedStateFromProps(nextProps, prevState):
마운트 과정에서도 호출되지만, 업데이트 시작 전에도 호출됨. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용함(상동)
shouldComponentUpdate(nextProps, nextState):
컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드.
-true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지(리렌더링x)
-다음과 같이 접근 가능
현재 props> this.props
현재 state > this.state
새로 설정될 props > nextProps
새로 설정될 state > nextState
-만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출한다.
render(): 컴포넌트를 리렌더링함. 상동
getSnapshotBeforeUpdate(prevProps, prevState): 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
-이 메서드의 반환값은 componentDidUpdate의 세 번째 파라미터인 snapshot 값으로 전달됨
getSnapshotBeforeUpdate(prevProps, prevState) {
if(prevState.array != = this.state.array) {
const { scrollTop, scrollHeight } = this.list
return { scrollTop, scrollHeight };
}
}
componentDidUpdate(prevProps, prevState, snapshot) { ... }
componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({ error, info });
}
- constructor(props):
- getDerivedStateFromProps(nextProps, prevState) :
변화한 props를 이전 state에 동기화- shouldComponentUpdate(nextProps, nextState):
변화한 props와 변화한 state로 업데이트 여부 판단- getSnapshotBeforeUpdate(prevProps, prevState)
기존 props와 기존 state를 이용하여 반영 안 된 현재 값(=렌더링 함수는 실행되었으나 DOM에는 반영 안됨. 즉 기존 props를 이용한 state)을 찍어둠
- render():
- componentDidMount():
- componentDidUpdate()
- componentWillUnmount()
(도해 출처: 리액트를 다루는 기술. 너무 좋은 책이니 강추합니다)
(cf. 솔직히 헷갈려서 인자 등 한꺼번에 외우는 게 나을것같다)