React -리액트 교과서 5장 학습내역( 리액트 컴포넌트 라이프사이클 이벤트)

React:

리액트 컴포넌트 라이프사이클 이벤트

5장

| 시작하기에 앞서

React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 라이프사이클 이벤트는 분류하면 아래와 같다.

• 마운팅 이벤트 (리액트 엘리먼트를 DOM노드에 추가함)

• 갱신 이벤트 (리액트 엘리먼트를 갱신할 때 발생한다)

• 언마운팅 이벤트 (리액트 엘리먼트를 DOM에서 제거할때 발생한다)

모든 리액트 컴포넌트는 라이프사이클 이벤트가 있다.

| 이벤트 분류

분류에 따라 실행되는 횟수

• 마운팅 : 리액트가 이벤트를 한번만 실행한다.

• 갱신: 리액트가 이벤트를 여러 번 실행한다.

• 언마운팅: 리액트가 이벤트를 한번만 실행한다.

라이프사이클이벤트와 함께 constructor() 도 포함시킨 컴포넌트의 전체 라이프사이클의 실행 순서

• constructor() : 엘리먼트를 생성하여 기본속성과 상태를 설정할 때 실행

• 마운팅

componentWillMount() : DOM에 삽입하기 전에 실행된다.

componentDidMoubnt() : DOM에 삽입되어 렌더링이 완료된 후 실행

• 갱신

componentWillRecieveProps(nextProps) : 컴포넌트가 속성을 받기 직전에 실행

shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 갱신되는 조건을 정의해서 재렌더링을 최적화 함, Bool값을 반환

componentWillUpdate(prevProps,prevState) : 컴포넌트가 갱신되기 직전에 실행

componentDidUpdate(prevProps,prevState) : 컴포넌트가 갱신된 후에 실행

• 언마운팅

componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전에 실행, 구독한 이벤트를 제거하거나 정리 작업 수행

| 마운팅 이벤트

마운팅 이벤트 유형은 모두 실제 DOM에 컴포넌트를 추가하는 것에 대한 이벤트다.

react를 바깥세상, 즉 다른 프레임워크,라이브러리,데이터 저장소 등과 연결하는데 사용하곤 한다.

> componentWillMount()

• 실행시점은 초기 브라우저 렌더링 직전이다.

• 서버렌더링과정에서도 실행된다.

> componentDidMount()

• 초기렌더링을 마친후 실행된다.

• 서버렌더링에서는 실행되지 않는다.

• 자식컴포넌트의 componentDidMount는 부모의 componentDidMount보다 먼저 호출된다.

| 갱신 이벤트

컴포넌트를 갱신하는것과 관련있다.

> componentWillRecieveProps(newProps)

• 컴포넌트 최초렌더링시 실행 x

• 속성값의 변경과 상관없이 재렌더링 이뤄질때마다 실행, 따라서 newProps가 항상 현재속성과 다른값이라 가정 불가

• 재렌더링이 반드시 실제 DOM의 변경을 의미 하지는 않음

> shouldComponentUpdate()

• 렌더링 직전에 실행

• 갱신을 할 지여부와 실제 DOM에서 무엇을 갱신할지에 대한 부분

• false를 반환하면 렌더링 되지 x

• 불필요한 성능저하 막음

> componentWillUpdate()

• 새로운 속성이나 상태를 받은후 렌더링 직전 호출

> componentDidUpdate()

• 갱신 결과가 실제 dom에 반영된 후 실행

• 초기렌더링 시 호출 x

| 언마운팅 이벤트

언마운팅이랑 DOM에서 요소를 분리하거나 제거하는것을 의미한다.

> componentWillUnmount()

• 컴포넌트 사이클의 마지막 유형

• dom요소 정리나 연결 이벤트 제거함