[React] - [처음 만난 리액트] - 18. State and Lifecycle (State란?, 생명주기, 컴포넌트 라이프 사이클)

🧹 두서없이 적는 쉬운 정리

1. State는 리액트 컴포넌트의 변경 가능한 데이터.

 

2. Class 컴포넌트의 경우 생성자 함수를 가지고 있고 State를 생성자에서 정의한다.

3. 리액트 컴포넌트는 생명주기를 갖고 있다.(출생 - 인생 - 사망)

4. 컴포넌트는 계속 존재하는 것이 아닌 시간의 흐름에 따라 생성되고 업데이트 후 사라진다.

 

 

(자세한 내용은 아래 참고)

 

---

 

👀 시작 

이 글은 지금은 자주 사용하지 않는 클래스 컴포넌트와 관련된 내용이지만

중요한 개념들이 있으니 정리해 보자.

 

스테이트라는 개념은 함수 컴포넌트에서도 사용하기에

개념을 확실히 이해하고 넘어가는 것이 좋다!

 

 

🫨 State란?

State는 리액트 컴포넌트의 상태를 의미한다.

리액트 컴포넌트의 변경 가능한 데이터를 State라고 부른다.

 

State는 각 개발자가 직접 정의해서 사용.

중요한 점은 랜더링 혹은 데이터 흐름에 사용되는 값만 State 에 포함시켜야 한다.

(State 가 변경될 경우 컴포넌트가 재렌더링 되어 성능을 저하시키기 때문.)

(관련이 없는 값은 컴포넌트의 인스턴스 필드로 정의하면 된다)

 

 

🧱 State == 자바스크립트 객체

LikeButton이라는 리액트 클래스 컴포넌트이다.

모든 클래스는 컴포넌트 생성자를(constructor 함수) 갖고 있다.

 

생성자 속 this.state 부분이 바로 현재 컴포넌트 State 정의하는 부분

클래스 컴포넌트의 경우 State 를 생성자에서 정의한다.

 

 

✍🏻 클래스 컴포넌트 State 수정

State는 정의된 이후  직접수정이 불가하다.

State는 컴포넌트 렌더링과 관련이 있기에 자칫하면 개발자가 의도한 대로 작동하지 않을 가능성이 있다

따라서 State 변경시 꼭 setState를 함수를 사용해야 한다.

 

 

👶🏻 리액트 컴포넌트 Lifecycle

리액트 컴포넌트는 생명주기를 갖고 있다.

(컴포넌트가 생성되는 시점과 사라지는 시점)

 

아래 그림은 리액트 클래스 컴포넌트의 생명주기를 나타낸 것.

크게 출생 인생 사망 으로 나누어져 있다.

 

하단에 초록색 부분은 생명 주기에 따라 호출되는 클래스 컴포넌트의 함수()이다.

이 함수들을 Lifecycle 메소드 라고 부르며 번역하면 생명주기 함수가 된다.

 

👶🏻 컴포넌트 생성(출생)

이 과정을 Mount 라고 부른다.

1. 컴포넌트의 생성자가(constructor) 실행되고.(이때 컴포넌트의 State를 정의)

2. 컴포넌트의 렌더링이 진행된다.

3. 이후 compoenetDidMount() 함수 호출

 

🏃🏻‍♂️ 컴포넌트 업데이트(인생을 사는 기간)

1. 아래 항목과 같은 업데이트 과정에서 렌더링이 진행된다.
   1. 컴포넌트의 Props가 변경
   2. setState 함수 호출에 의해 스테이트 변경
   3. forceUpdate()라는 강제 업데이트 함수를 호출
2. 이후  componentDidUpdate() 함수 호출

 

💀 컴포넌트 사라짐(사망)

1. 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 Unmount 된다.

2. 이때 Unmount 직전 componentWillUnmoint() 함수가 호출

 

 

🕵🏻 마무리

3가지 생명주기 함수 이외에도 다른 생명주기 함수가 존재하지만

현재 클래스 컴포넌트를 거의 사용하지 않기 때문에 다루지 않았다.

 

컴포넌트 생명주기에서 우리가 기억해야 할 부분은

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

 

이것은 클래스 컴포넌트뿐만 아니라 함수 컴포넌트에도 해당하는 내용이니

잘 기억하면 리액트 컴포넌트를 더 깊게 학습할 수 있다.

 

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.