[1일차] Do It React 프로그래밍 정석/p19 ~ p221/ 리액트 문법, 컴포넌트

리액트 컴포넌트 생명주기

1. Mount

마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미

​

​

■ constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수

​

■ getDerivedStateFromProps : props와 state 값을 동기화할 때 사용하는 함수로 리액트 v16.3 이후에 만들어진 함수

​

■ render : 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환

■ componentDidMount : 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수

​

2. 업데이트

​

컴포넌트가 업데이트 될 때 실행되는 함수들을 살펴보겠습니다. 컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우가 있습니다.

​

​

■ getDerivedStateFromProps : 마운트(Mount) 과정에서도 호출되었던 함수

■ shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 함수 true를 반환하면 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하며 false를 반환할경우 리렌더링을 하지 않고 아래 함수도 실행되지 않는다.

■ render : 새로운 값을 사용하여 View를 리렌더링

■ getSnapshotBeforeUpdate : 변경된 요소에 대하여 DOM 객체에 반영하지 직전에 호출되는 함수

■ ComponentDidUpdate : 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수

​

​

3. 언마운트 (UnMount)

컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 합니다. 호출되는 함수는 하나로 componentWillUnmount 함수입니다. 해당 컴포넌트가 제거되기 직전에 호출된다.

​