React와 React Hooks의 상태와 생명주기

상태와 생명주기

React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
-react 한국 공식 홈페이지 중 자습서-

이런 component들이 코드의 재사용성을 높여준다

그리고, 이런 component들은 자신만의 state를 가지고, 이 state에 따라 다르게 rendering 될 수 있다.

 

상태(State)

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다

props는 component 랜더링 시 전달하는 전달 인자이고,

state는 component 자신이 가지고 있는 비공개된 정보이다.

 

state를 통해 함수는 캡슐화될 수 있다.

이런 state가 없다면 매번 모든 변수를 props를 통해서 받아야 하므로,

사용법이 어려워지고 컴포 너트 간 결합도가 증가하여 개인별 코딩이 힘들 것이다. 

 

이 state가 update 될 때마다, 해당 component가 바뀌어야 하므로,

state를 직접 수정하지 않고, setState() 함수를 사용해야 한다.

state를 직접 수정하면 component를 다시 렌더링 하지 않기 때문이다.

 

또, state 업데이트는 비동기적일 수 있다. (성능 향상을 위해 setState() 호출을 단일로 한꺼번에 처리할 수 있다)

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

대신, setState의 화살표 함수 사용법 등으로 초기화해야 한다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

React의 생명주기(Lifecycle) 메서드

모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버 라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.

일반적인(또는 자주 쓰이는) lifecycle 도표를 보자

일반적인 생명주기

 

당연히 알고 있겠지만, 저 부작용은 side-effect라는 의미의 부작용이다. 부정적인 뜻이 아니다.

 

React DOM이란, 실제 DOM을 업데이트하기 전에 React의 virtual DOM을 만들어 확인해보는 것이다.

이전의 DOM과 비교하여 rendering이 필요한 부분만 효율적으로 rendering 할 수 있다.

 

마운트 할 때(또는 생성할 때)

마운트(mount)는 설치한다라는 뜻이 있다. DOM에 새로운 컴포넌트를 설치한다고 생각하면 된다.

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

업데이트할 때

props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링 될 때 순서대로 호출됩니다.

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

마운트 해제될 때(또는 제거될 때)

아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.

• componentWillUnmount()

조금 덜 자주 쓰이는 메서드까지 포함한 생명주기 도표는 다음과 같다.

덜 일반적인 생명주기

 

React Hooks에서의 생명주기

reat hooks 생명주기

 

나는 useState와 useEffect 밖에 써보지 않았다.

 

리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

useEffect가 기존에 있던 side-effect를 부르는 메서드를 대체한다.

만약 effect를 수행하고 (mount를 하거나 unmount 할 때) 그것을 한 번만 실행하고 싶다면 두 번째 인자로 빈 배열([])을 전달할 수 있습니다.

예를 들면,

• componentDidMount, componentWillUnmount (한 번만)-> useEffect의 두 번째 인자를 빈 배열로 줌
• componentDidUpdate (매번)->useEffect의 두 번째 인자를 주지 않음
• 특정 값의 변화에 따라 조건부 렌더링 (특정 조건)-> useEffect의 두 번째 인자에 해당 특정 변수를 배열로 전달.

포스팅하면서 느낀 점

이렇게 React와 React Hooks의 생명주기와 그 생명주기 메서드들을 살펴봤다.

react hooks의 motivation과 전역 상태 관리의 필요성에 대해 좀 더 자세히 알아보고 싶다는 생각이 들었다.

또, 왜 state와 props를 쓰는지 그 배경이 된 문제점과 그로 인한 해결책으로 state와 props가 나온 것을 알아봐야겠다.

react 공식 홈페이지를 소설책 읽듯이 진득이 읽어 봐야겠다. 그동안 너무 예제 중심으로 react를 대해왔던 것 같다.

다음에 포스팅할 내용에 추가해야겠다.

 

참고한 사이트:

Hooks API Reference – React

State and Lifecycle – React

 

React.Component – React

 

React lifecycle Hooks diagram