[React] 5-1. Life Cycle(생명주기)와 React.Component
컴포넌트(Component)란?
- 컴포넌트는 함수형 컴포넌트와 클래스 컴포넌트가 있다.
- 컴포넌트를 사용하면 UI를 독립적이고 재사용이 용이하며, 각 부분이 분리되어있어 처리하기 쉽다.
React.Component
와 React.PureComponent
로 세부적으로 나누어 정의할 수 있다.
React.Component란?
ES6
클래스를 사용하여 컴포넌트를 정의할 때 기초가 되는 class
이다.
- 클래스 컴포넌트를 작성할 때
React.Component
를 상속받아야 한다.
render()
메서드는 React.Component
의 하위 클래스에서 반드시
정의해야하는 메서드이다.
컴포넌트 생명주기(Life Cycle)
모든
컴포넌트들은 생명주기 메서드
를 가지고 있고, 이 메서드를 이용하여 특정 시점
에 코드가 실행되도록 설정할 수 있다. [생명주기 도표]
함수형 컴포넌트
는 Life Cycle
을 부를 수 없다.[함수형컴포넌트
는 Hooks
의 useEffect
를 찾아볼 것!]
1. 마운트(Mount)
React.Component
와 React.PureComponent
로 세부적으로 나누어 정의할 수 있다.ES6
클래스를 사용하여 컴포넌트를 정의할 때 기초가 되는class
이다.- 클래스 컴포넌트를 작성할 때
React.Component
를 상속받아야 한다. render()
메서드는React.Component
의 하위 클래스에서반드시
정의해야하는 메서드이다.
컴포넌트 생명주기(Life Cycle)
모든
컴포넌트들은 생명주기 메서드
를 가지고 있고, 이 메서드를 이용하여 특정 시점
에 코드가 실행되도록 설정할 수 있다. [생명주기 도표]
함수형 컴포넌트
는 Life Cycle
을 부를 수 없다.[함수형컴포넌트
는 Hooks
의 useEffect
를 찾아볼 것!]
1. 마운트(Mount)
모든
컴포넌트들은 생명주기 메서드
를 가지고 있고, 이 메서드를 이용하여 특정 시점
에 코드가 실행되도록 설정할 수 있다. [생명주기 도표]함수형 컴포넌트
는 Life Cycle
을 부를 수 없다.[함수형컴포넌트
는 Hooks
의 useEffect
를 찾아볼 것!]생성되어 DOM에 삽입될 때 아래 메서드들을 순서대로 호출한다.
constructor()
- 메서드를 바인딩하거나 state 초기화 작업이 없다면 생성자 구현하지 않아도 된다.
React.Component
를 상속한 생성자를 구현할 때에는super(props)
를 호출해야한다.
[안하면this.props
가 생성자 내에 정의되지 않아 버그로 이어질 수 있음]this.state
를 직접 할당 할 수 있는 유일한 곳, 그 외의 메서드는this.setState()
를 사용한다.- state에 props를 복사하면 안된다!!
- 생성자를 쓰는 이유
this.state
를 사용하여state
초기화- 인스턴스에
이벤트 처리
바인딩
render()
- 클래스 컴포넌트에서
반드시
구현되어야하는유일한
메서드이다. render()
함수는 순수해야한다.- 컴포넌트의 state를 변경하지 않고, 호출 될 때마다 동일한 결과를 반환해야하며, 브라우저와 직접적으로 상호작용을 하지 않는다.
- 브라우저와의 상호작용이 필요할 시,
componentDidMount()
혹은 다른 생명주기 메서드 내에서 수행
- 클래스 컴포넌트에서
componentDidMount()
- 컴포넌트가 마운트된 직후, 트리에 삽입된 직후에 호출된다.
- DOM에 삽입되어 렌더링이 완료된 후 실행된다.
- DOM 노드가 있어야 하는 초기화 작업을 진행할 시 이 메서드에서 작업을 하면 된다.
- 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.
- 즉시 setState()를 호출하는 경우도 있다.
- 즉시 호출한다면, 추가적인 렌더링이 발생하며 화면을 갱신하기 전에 이루어진다.
2. 업데이트(Update)
props
와 state
가 변경되면 갱신이 발생하며, 컴포넌트가 다시 렌더링 될 때 다음 순서대로 호출한다.[porps
는 NewProps
, state
는 setState
]
render()
- 새로운
props
를 받거나,setState()
함수를 이용해 상태가 변경될 때
- 새로운
componentDidUpdate(prevProps, prevState, snapshot)
componentDidUpdate()
- 갱신이 일어난 직후에 호출되며, 최초 렌더링에서는 호출되지 않는다.
- 컴포넌트가 갱신된 후에 실행된다.
- 이전과 현재의
props
를 비교하여 네트워크 요청을 보내는 작업에 이 메서드를 사용한다. - 즉시 setState()를 호출할 수 있지만, 조건문으로 감싸야한다.
- 감싸지 않으면 무한반복이 발생할 수 있다.
3. 해제(Unmount)
- 컴포넌트가 DOM상에서 제거될 때에 호출된다.
- 컴포넌트를 DOM에서 제거하기 전에 실행된다.
- 컴포넌트가 마운트 해제되어
제거되기 직전
에 호출되며, 해제되면 절대로 다시 마운트되지 않는다. - 컴포넌트는 다시 렌더링되지 않고,
setState
를 호출하면 안된다.
Author And Source
이 문제에 관하여([React] 5-1. Life Cycle(생명주기)와 React.Component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@reveloper-1311/React-5-1.-Life-Cycle생명주기와-React.Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)