본문 바로가기
IT/React

React - 생명주기 메서드

by 최고영회 2019. 3. 27.
728x90
반응형
SMALL

견고한 컴포넌트를 개발하기 위해서는 컴포넌트 API 전반, 생명주기 메서드에 대한 더 깊은 이해, 그리고 리액트의 렌더링 과정에 대한 이해가 필요하다.


생명주기 메서드란?

 - 클래스 기반 리액트 컴포넌트에 추가된 특별한 메서드로 컴포넌트의 생명주기 내의 특정 시점에 실행된다. 

 - 동작을 시작하는 시점, 동작 중인 시점, 완료되는 시점을 표현하게 된다. 


렌더링이 어플리케이션을 화면에 그려내는 작업이다. 

생명주기 메서드를 이용하면 이 과정을 가로챌 수 있다. 


생명주기 메서드의 종류

 - Will 메서드: 어떤 작업이 실행되기 직전에 호출된다. 

 - Did 메서드: 어떤 작업이 실행된 직후에 호출된다. 


컴포넌트는 크게 4가지로 생명주기를 분류할 수 있다. 

 - 초기화:  

 - 마운팅: 리액트가 컴포넌트를 DOM에 삽입하는 과정

   > componentWillMount: 컴포넌트가 마운트 되기 전에 상태를 결정하거나 다른 동작을 수행할 기회를 제공하는 메서드

   > componentDidMount: 네트워크 요청의 응답으로 전달받은 데이터를 이용해 컴포넌트 상태를 갱신하는 작업 등을 수행하기에 적절한 시점이다. 

                                   DOM을 조작하는 jQuery나 다른 서드파티 라이브러리를 호출하기에도 적절한 시점이다. 

 - 갱신: 상태가 갱신되는 과정 

   > shouldComponentUpdate: 리액트가 제공하는 메서드들로 충분하지 않은 경우에만 사용해야 한다. (정말 필요한 경우에만 사용하자.)

                                         false를 리턴하면 다음에 다시 상태가 변경될 때까지 render() 메서드를 실행하지 않는다. 

   > componentWillUpdate,  componentDidUpdate: 

 - 언마운팅: 컴포넌트를 DOM으로부터 제거하는 과정이다. 

   > componentWillUnmount: 컴포넌트가 제거될 때 필요한 정리 작업을 수행하기에 적절한 시점이다. 


728x90
반응형
LIST

'IT > React' 카테고리의 다른 글

React - 폼 이벤트 핸들러, controlled component, uncontrolled component  (0) 2019.03.28
React - 에러처리  (0) 2019.03.27
React - 컴포넌트 간의 통신  (0) 2019.03.15
React - 상태(불변 상태 - props)  (0) 2019.03.15
React - JSX  (0) 2019.03.13