728x90
📌 생명주기 메서드가 실행되는 시점
마운트(mount) | 컴포넌트가 마운팅(생성)되는 시점 |
업데이트(update) | 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점 |
언마운트(unmount) | 컴포넌트가 더 이상 존재하지 않는 시점 |
📌 생명주기 메서드
render()
컴포넌트를 렌더링하는 메서드
- 컴포넌트가 UI 를 렌더링하기 위해서 쓰인다.
- render() 함수는 항상 순수해야 하며 부수 효과가 없어야 한다.
- this.setState 를 호출해서는 안된다.
componentDidMount()
컴포넌트가 마운트되고 난 후 호출되는 메서드
- this.setState()로 state 값을 변경하는 것이 가능하다.
(다만, 일반적으론 state를 다루는 것은 생성자에서 하는 것이 좋다.) - state가 변경되고, 그리고 그 즉시 다시 한 번 렌더링이 실행된다.
componentDidUpdate()
컴포넌트 업데이트가 일어난 이후 호출되는 메서드
- 일반적으로 state나 props의 변화에 따라 DOM 을 업데이트 하는 등에 쓰인다.
componentWillUnmount()
컴포넌트가 언마운트되거나 더 이상 사용되지 않는 직전에 호출되는 메서드
- 메모리 누수나 불필요한 작동을 막기 위한 클린업 함수를 호출하기 위한 위치다.
- this.setState를 호출할 수 없다.
- API 호출을 취소하거나, setInterval, setTimeout 로 생성된 타이머를 지우는 등의 작업을 하는데 사용된다.
shouldComponentUpdate()
state나 props의 변경으로 컴포넌트가 다시 리렌더링 되는 것을 막고 싶을 때 사용하는 메서드
- this.setState 가 호출되면서 리렌더링이 되기에 이 메서드를 사용하여 리렌더링을 막는다.
static getDerivedStateFromProps()
componentWillReceiveProps를 대체할 수 있는 메서드
- static 으로 선언되어 있어, this에 접근할 수 없다.
- 모든 render() 실행 시에 호출된다.
getSnapShotBeforeUpdate()
componentWillUpdate() 를 대체할 수 있는 메서드
- DOM이 업데이트되기 직전에 호출된다.
- 반환되는 값은 componentDidUpdate로 전달된다.
- DOM에 렌더링 되기 전에 윈도우 크기를 조절하거나 스크롤 위치를 조정하는 등의 작업에 사용된다.
728x90
'LANGUAGE > React' 카테고리의 다른 글
[Next.js] Next.js/React 에 Font Awesome Icon 적용하기/ 아이콘 추가하는 법 (0) | 2024.06.19 |
---|---|
[Error][Next.js] Invalid src prop ~ on `next/image` 해결 방법/ 외부 이미지 허가 설정하기 (0) | 2024.06.18 |
[React] 실전형 리액트 Hooks 10 (0) | 2024.06.04 |
[React] npm start 오류 / npm start 명령어 안됨 (0) | 2024.05.29 |
[Nomad Coders](기록용) React JS로 영화 웹 서비스 만들기 (0) | 2024.05.28 |