[React] React 학습 (6) - State & Lifecycle

State & Lifecycle

이번 내용은 리액트 컴포넌트 종류 중 주로 Class 컴포넌트와 관련된 내용이다.

물론 State라는 개념은 Function 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가는 것이 좋고 Lifecycle의 경우 최근에는 Class 컴포넌트를 거의 사용하지 않기 때문에 이런게 있다 정도로만 이해하고 넘어가자.

특히 state는 리액트의 핵심 중의 핵심이라고 할 수 있기 때문에 완벽하게 이해가 될 때까지 반복적으로 학습을 하자.

---

State

일반적으로 영단어 state는 한글로 상태라는 뜻을 가지고 있는데, 리액트에서의 state는 리액트의 컴포넌트 상태를 의미한다.

다만 상태라는 단어가 정상인지 비정상인지를 나타내는 것이라기보다 리액트 컴포넌트의 데이터라는 의미에 더 가깝다.

쉽게 말하면 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다.

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

state를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 것만 state에 포함시켜야 한다는 것입니다.

왜냐하면 스테이트가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문이다.

그래서 렌더링과 데이터 흐름에 관련 있는 값만 스테이트에 포함하도록 해야 하며 그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 된다.

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

따라서 앞으로 state는 자바스크립트의 객체이다. 라고 기억하면 될 것 같다.

간단한 예제 코드로 확인해보자.

 

class LikeButton extends React.Component {
     constructor(props) {
          super(props);
       
          this.state = {
               liked: false
         }
    }
};

 

이 코드는 LikeButton이라는 리액트 클래스 컴포넌트를 나타낸 것이다.

모든 클래스 컴포넌트에는 constructor라는 이름의 함수가 존재하는데 우리말로 생성자라는 의미를 가지고 있으며 클래스가 생성될때 실행되는 함수다.

이 생성자 코드를 보면 this.state라는 부분이 나오는데 이 부분이 바로 현재 컴포넌트의 state를 정의하는 부분이다.

클래스 컴포넌트의 경우 state를 생성자에서 정의한다. 함수 컴포넌트는 state를 useState라는 hook을 사용해서 정의하게 되는데 이 부분은 추후에 자세히 다뤄보도록 하자.

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

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

 아래 예제코드를 살펴보자.

 

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

 

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

 

이 코드에서 첫 번째 방법은 state를 직접 수정하는 방법이고 두 번째는 setState함수를 통해 수정하는 방법이다.

state를 직접 수정할 수는 있지만 그렇게 하면 안 되기 때문에 애초에 state는 직접적인 변경이 불가능하다고 생각하는 것이 좋다.

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

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

---

Lifecycle

영어 단어 Lifecyle은 우리말로 하면 생명 주기라는 뜻을 가지고 있다.

사람은 출생을 하고 쭉 인생을 살다가 노화가 오게되어 사망하게되는데, 리액트 컴포넌트도 이러한 생명 주기를 가지고 있다.

컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미이다.

단계별 생명주기를 하나씩 살펴보자.

---

Mounting

먼저 컴포넌트가 생성되는 시점, 사람으로 말하면 출생이다.

이 과정을 mount라고 부르는데 이때 컴포넌트의 constructor, 즉 생성자가 실행된다.

앞에서 본 것처럼 생성자에서는 컴포넌트의 스테이트를 정의하게 된다.

또한 컴포넌트가 렌더링되며 이후에 componentDidMount 함수가 호출된다.

 

---

Updating

태어난 모두는 각자 인생을 살아가는데, 살아가는 동안 신체적, 정신적으로 변화를 겪는다.

이처럼 리액트 컴포넌트도 생애 동안 변화를 겪으면서 여러 번 렌더링 되는데, 이를 리액트 컴포넌트로 말하면 update 되는 과정이라고 할 수 있다.

업데이트 과정에서는 컴포넌트의 props가 변경되거나 setState함수 호출에 의해 state가 변경되거나 forceUpdate라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링 된다.

그리고 렌더링 이후에 componentDidUpdate 함수가 호출 된다.

---

Unmountion

마지막으로 사망과정이 있는데, 사람은 누구나 나이를 먹고 죽게 된다.

리액트 컴포넌트도 결국 언젠가는 사라지는 과정을 겪게 되는데 이 과정을 unmount라고 부른다.

그렇다면 컴포넌트는 언제 unmount가 될까?

상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 unmount 된다고 볼 수 있다.

이때 unmount 직전에 pomponentWillUnmount 함수가 호출된다.

여기까지가 리액트 컴포넌트의 생명주기와 생명주기 함수에 대해 간단한 설명이다.

여기서 학습한 3가지 생명주기 함수 이외에도 다른 생명주기 함수가 존재하지만 지금은 클래스 컴포넌트를 거의 사용하지 않기 때문에 다루지 않았다.

컴포넌트 생명주기에서 우리가 기억해야 할 부분은 컴포넌트가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다는 것이다.

이것은 비단 클래스 컴포넌트뿐만 아니라 함수 컴포넌트에서도 해당되는 내용이다.

이 부분을 잘 기억하고 있으면 좀더 깊게 리액트 컴포넌트를 바라볼 수 있을 것이다.

 

---

State 실습

https://github.com/SoominYim/soaple-react/tree/main/src/chapter_06