너와 나의 프로그래밍
React.js - 라이프사이클 메서드(Lifecycle Method) 본문
React.js - 라이프사이클 메서드(Lifecycle Method)
Whatever App's 2019. 6. 1. 20:48
React를 공부하면서 가장 마음에 든 것중에 하나가 라이프사이클 메서드가 있다는 것이다.
라이프사이클은 간단히 말해서 어플리케이션이 실행 될 때의 '순간 순간'이라고 생각하면 쉽게 이해할 수 있을 것 같다.
보통 로딩이나 로딩 후 제어라든지, 또는 값을 불러오기 전과 후의 처리를 명확하게 해줄 수 있는 메서드가 있다는건 아주 명확하고 큰 장점이라고 생각한다.
예전에 공부했던 Android도 라이프사이클 메서드가 있어서 굉장히 편리했던 생각이 든다. 아마 요즘 최신 프론트엔드 개발 방식에서도 라이프사이클 메서드가 있다고는 생각한다.(잘 모르겠지만...ㅎㅎ)
라이프사이클 메서드의 종류.
1. getDerivedStateFromProps - 컴포넌트를 마운트 하거나 props를 변경할 때 호출
2. componentDidMount - 컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행. 보통 비동기 작업을 처리할 때 사용
3. shouldComponentUpdate - props 나 state를 변경 했을 때 리렌더링을 시작할지 여부를 지정. 리턴값은 반드시 true나 false로 설정해줘야함.
4. getSnapshotBeforeUpdate - render 메서드를 호출 후 DOM에 변화를 반영하기 바로 직전에 호출하는 메서드
5. componentDidUpdate - 렌더링을 완료한 후 실행. prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에도 접근 가능.
6. componentWillUnmount - 컴포넌트를 DOM에서 제거할 때 실행.
라이프사이클 메서드의 순서.
getDerivedStateFromProps -> shouldComponentUpdate(true/false)
true -> (render) -> componentDidMount or getSnapshotBeforeUpdate -> componentDidUpdate
false -> x
componentWillUnmount
'Front-End > Next.js & React.js' 카테고리의 다른 글
[React.js] JSX는 무엇인가 (0) | 2020.07.17 |
---|---|
React.js - 리액트 스타일링 (0) | 2019.11.13 |
React.js- State (0) | 2019.03.13 |
React.js - Component 만들기 (0) | 2019.03.11 |
React.js - Props (0) | 2019.03.04 |