• 출처: 소플의 처음 만난 리액트

# State and Lifecycle

이번 강의에서는 리액트 컴포넌트의 가장 중요한 부분 중 하나인 State 와 Lifecycle 에 대해서 배워보도록 하겠습니다.
이번 강의는 리액트의 컴포넌트 종류 중 주로 ✨클래스 컴포넌트✨와 관련된 내용입니다. 물론 State 라는 개념은 함수 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가는 것이 좋고 Life cycle의 경우 최근에는 클래스 컴포넌트를 거의 사용하지 않기 때문에 이런 개념이 있다 정도로만 이해하고 넘어가면 됩니다. 특히 State 는 리액트의 핵심 중 핵심이라고 할 수 있기 때문에 완벽하게 이해가 될 때까지 반복적으로 학습하시길 바랍니다. 그럼 시작해볼까요?

# State

먼저 State 에 대해서 알아보겠습니다. 일반적으로 영단어 State 는 한글로 상태라는 뜻을 가지고 있습니다.

일반적인 state의 의미

상태

그렇다면 리액트에서 State 는 어떤 것의 상태를 의미할까요? 리액트에서 State 는 리액트 컴포넌트의 상태를 의미합니다.

리액트에서 state의 의미

리액트 Component의 상태

다만 상태라는 단어가 정상인지 비정상인지를 나타내는 것이라기보다 리액트 컴포넌트의 '데이터' 라는 의미에 더 가깝습니다. 쉽게 말하면 리액트 컴포넌트의 변경 가능한 데이터를 State 라고 부릅니다.

리액트에서 state의 의미

리액트 Component의 변경 가능한 데이터

이 State 는 사전에 미리 정해진 것이 아니라, 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용하게 됩니다.

state 는 개발자가 정의한다

State 를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 한다는 것입니다. 왜냐하면 state 가 변경될 경우, 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름의 관련 없는 값을 포함하면 불필요한 경우 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문입니다. 그래서 렌더링과 데이터 흐름의 관련있는 값만 state 에 포함하도록 해야하며,

렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 함!

그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됩니다.

React의 state 는 따로 복잡한 형태가 있는 것이 아니라 그냥 하나의 자바스크립트 객체입니다.

state는 JavaScript 객체이다

따라서 앞으로 state 는 자바스크립트 객체이다 라고 기억하시기 바랍니다.

간단한 예제 코드를 보겠습니다.

//예제 코드
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { //현재 컴포넌트의 state를 정의하는 부분
      liked: false
    };
  }
  
  ...
}

이 코드는 LikeButton 이라는 리액트 클래스 컴포넌트를 나타낸 것입니다.
모든 클래스 컴포넌트에는 constructor 라는 이름의 함수가 존재하는데 우리말로 생성자라는 의미를 갖고 있으며 클래스가 생성될 때 실행되는 함수입니다. 이 생성자 코드를 보면 this.state 라는 부분이 나오는데 이 부분이 바로 현재 컴포넌트의 state를 정의하는 부분입니다. 클래스 컴포넌트의 경우 state 를 생성자에서 정의합니다. (함수 컴포넌트는 state를 useState 라는 훅을 사용해서 정의해서 사용해서 정의하게 되는데 이 부분은 뒤에서 자세히 다루도록 하겠습니다.)

이렇게 정의된 state는 정의된 이후 일반적인 자바스크립트 변수를 다루듯이 직접 수정할 수는 없습니다.

state는 직접 수정할 수 없다 (하면 안된다)

엄밀히 말하면 수정이 가능하긴 하지만 그렇게 해서는 안됩니다.

예제 코드를 보겠습니다.

//예제 코드

// state를 직접 수정 (잘못된 사용법)
this.state = {
  name: 'Inje'
};

// setState 함수를 통한 수정 (정상적인 사용법)
this.setState({
  name: 'Inje'
});

이 코드에서 첫번째 방법은 state를 직접 수정하는 방법이고 두 번째는 setState() 함수를 통해 수정하는 방법입니다.
state 를 직접 수정할 수는 있지만 그렇게 하면 안되기 때문에 애초에 state 는 직접적인 변경이 불가능하다고 생각하는 것이 좋습니다.

또한 앞에서 언급한 것처럼 리액트에서의 state 는 컴포넌트의 렌더링과 관련이 있기 때문에 마음대로 수정하게 되면 개발자가 의도한 대로 작동하지 않을 가능성이 있습니다. 그래서

클래스 컴포넌트에서 state 를 변경하고자 할 때에는 꼭 setState()라는 함수를 사용해야 합니다.

# Lifecycle

지금부터는 리액트 컴포넌트의 Lifecycle 에 대해서 알아보도록 하겠습니다.

영어 단어 Lifecycle 의 뜻
생명주기

사람의 생명주기는 어떻게 되죠? 출생을 하고 쭉 인생을 살다가 노화가 오게 되어 사망하게 됩니다. 마찬가지로 리액트 컴포넌트도 이러한 생명주기를 갖고 있습니다. 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미입니다.

리액트 Component의 생명주기

이 그림은 리액트 클래스 컴포넌트의 생명주기를 나타낸 것입니다. 위 그림을 보면 크게 출생 인생 사망으로 나누어져 있습니다. 각 과정의 하단에 초록색으로 표시된 부분은 생명 주기에 따라 호출되는 클래스 컴포넌트의 함수입니다. 이 함수들은 Lifecycle method 라고 부르며 번역하면 생명주기 함수가 됩니다. 그럼 이제 단계별 생명주기를 하나씩 살펴보겠습니다.
1) 먼저 컴포넌트가 생성되는 시점. 사람으로 말하면 출생입니다. 이 과정을 Mount 라고 부르는데, 이때 컴포넌트의 constructor 즉 생성자가 실행됩니다. 앞에서 본 것처럼 생성자에서는 컴포넌트의 state 를 정의하게 됩니다. 또한 컴포넌트가 rendering 되며 이후에 componentDidMount 함수가 호출됩니다.
2) 태어난 모두는 각자 인생을 살아가겠죠. 인생을 살아가는 동안 신체적 정신적으로 변화를 겪습니다. 이처럼 리액트 컴포넌트도 생애동안 변화를 겪으면서 여러번 렌더링됩니다. 이걸 리액트 컴포넌트로 말하면 업데이트되는 과정이라고 할 수 있습니다. 업데이트 과정에서는 컴포넌트의 props 가 변경되거나, setState() 함수 호출에 의해 state 가 변경되거나 forceUpdate() 라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 rendering됩니다. 그리고 렌더링 이후에 componentDidUpdate 함수가 호출됩니다.
3) 마지막으로 사망 과정이 있습니다. 사람은 누구나 나이를 먹고 죽게 됩니다. 리액트 컴포넌트도 결국 언젠가는 사라지는 과정을 겪게 되는데 이 과정을 Unmount 라고 부릅니다. 그렇다면 컴포넌트는 언제 unmount 가 될까요? 상위 컴포넌트에서 현재 컴포넌트를 더이상 화면에 표시하지 않게 될 때 unmount 된다고 볼 수 있습니다. 이때 unmount 직전에 componentWillUnmount 함수가 호출됩니다.

지금까지의 리액트 컴포넌트의 생명주기와 생명주기 함수에 대해 간단히 살펴보았습니다.
여기에서 배운 3가지 생명주기 함수 이외에도 다른 생명주기 함수가 존재하지만 지금은 클래스 컴포넌트를 거의 사용하지 않기 때문에 다루지 않았습니다. 컴포넌트 생명주기에서 우리가 기억해야 할 부분은 컴포넌트가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다는 것입니다.

Component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다.

이것은 비단 클래스 컴포넌트뿐만 아니라 함수 컴포넌트에도 해당하는 내용입니다. 이 부분을 잘 기억하고 있으면 좀 더 깊게 리액트 컴포넌트를 바라볼 수 있을 것입니다.

📍정리

State와 생명주기

State : 리액트 Component의 변경 가능한 데이터

• State 는 개발자가 정의한다
• 렌더링이나 데이터 흐름에 사용되는 값만 State 에 포함시켜야 함!
• State는 JavaScript 객체이다
• 모든 클래스 컴포넌트에는 constructor 라는 이름의 생성자 함수가 존재한다
• 클래스 컴포넌트에서 state 를 변경하고자 할 때에는 꼭 setState()라는 함수를 사용해야 한다.

Lifecycle : 리액트 Component의 생명주기

• Lifecycle methods : componentDidMount 함수, componentDidUpdate 함수, componentWillUnmount 함수
• Component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다.