[리액트] State and Lifecycle

React 컴포넌트 안의 state와 생명주기에 대해서 알아보자.

컴포넌트에 대한 자세한 내용은 👉 https://ko.reactjs.org/docs/react-component.html

 

🍳리액트의 생명주기

컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다.

리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.

 

1.1 Class Component 생명주기

마운트 (mount)

컴포넌트가 생성 될때 발생하는 생명주기들을 알아보자.

 

constructor

컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드

this.props, this.state에 접근가능하고 리액트 요소를 반환

 

getDerivedStateFromProps

props로부터 파생된 state를 가져온다. 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용.

 

render

컴포넌트를 렌더링하는 메서드

 

componentDidMount

컴포넌트가 마운트.
컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드
화면에 컴포넌트에 나타난 상태

여기서 주로 DOM을 사용해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로하는 데이터를 ajax로 요청, 등의 행위를 한다.

 

 

 

 

🧁 State 올바르게 사용하기

1. State 값은 직정 수정 하지 않는다.

직접 수정하지 않고 setState()를 사용한다.

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

this.state를 지정할 수 있는 유일한 공간은 바로 constructor이다.

 

2. State 업데이트는 비동기적일 수 있다.

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안된다.

객체 그 자체로 쓰기보다는 함수를 인자로 사용하는 다른 형태의 setState를 사용.

함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것이다.

 

3. State 업데이트는 병합된다.

setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

 

---

출처

https://react.vlpt.us/basic/25-lifecycle.html

https://ko.reactjs.org/docs/react-component.html