견고한 컴포넌트를 개발하기 위해서는 컴포넌트 API 전반, 생명주기 메서드에 대한 더 깊은 이해, 그리고 리액트의 렌더링 과정에 대한 이해가 필요하다.
생명주기 메서드란?
- 클래스 기반 리액트 컴포넌트에 추가된 특별한 메서드로 컴포넌트의 생명주기 내의 특정 시점에 실행된다.
- 동작을 시작하는 시점, 동작 중인 시점, 완료되는 시점을 표현하게 된다.
렌더링이 어플리케이션을 화면에 그려내는 작업이다.
생명주기 메서드를 이용하면 이 과정을 가로챌 수 있다.
생명주기 메서드의 종류
- Will 메서드: 어떤 작업이 실행되기 직전에 호출된다.
- Did 메서드: 어떤 작업이 실행된 직후에 호출된다.
컴포넌트는 크게 4가지로 생명주기를 분류할 수 있다.
- 초기화:
- 마운팅: 리액트가 컴포넌트를 DOM에 삽입하는 과정
> componentWillMount: 컴포넌트가 마운트 되기 전에 상태를 결정하거나 다른 동작을 수행할 기회를 제공하는 메서드
> componentDidMount: 네트워크 요청의 응답으로 전달받은 데이터를 이용해 컴포넌트 상태를 갱신하는 작업 등을 수행하기에 적절한 시점이다.
DOM을 조작하는 jQuery나 다른 서드파티 라이브러리를 호출하기에도 적절한 시점이다.
- 갱신: 상태가 갱신되는 과정
> shouldComponentUpdate: 리액트가 제공하는 메서드들로 충분하지 않은 경우에만 사용해야 한다. (정말 필요한 경우에만 사용하자.)
false를 리턴하면 다음에 다시 상태가 변경될 때까지 render() 메서드를 실행하지 않는다.
> componentWillUpdate, componentDidUpdate:
- 언마운팅: 컴포넌트를 DOM으로부터 제거하는 과정이다.
> componentWillUnmount: 컴포넌트가 제거될 때 필요한 정리 작업을 수행하기에 적절한 시점이다.
'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 |