React State와 Lifecycle 정의

■ State와 Lifecycle 정의

- State

: React에서 State는 React Component의 상태를 의미한다.

  정상/비정상을 나타내는 상태보단 React의 데이터라는 의미에 더 가깝다.

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

  State는 사전에 미리 정해진 것이 아닌 React 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용

 

 

# state가 변경될 경우 컴포넌트가 재 랜더링되기 때문에 랜더링과 데이터 흐름에 관련없는 값을 포함하면

   불필요한 경우에 컴포넌특 다시 랜더링되어 성능을 저하시킬 수 있기 때문이다.

# 랜더링과 데이터 흐름에 관련 있는 값만 state에 포함해야하며, 그렇지 않은 값은

   컴포넌트의 인스턴스 필드로 정의하면 된다.

 

 

---

예제 코드)

 

# LikeButton이라는 React 클래스 컴포넌트를 나타낸 코드로 모든 클래스 컴포넌트에는

   constructor라는 이름의 함수가 존재하며 우리말로 생성자란 의미를 갖고 있으며 클래스가 생성될 때 실행된다.

 

# this.state 부분이 현재 컴포넌트의 state를 정의하는 부분이다.

# class 컴포넌트의 경우 state를 생성자에서 정의한다.

# 함수 컴포넌트는 useState라는 hook을 사용해서 정의한다.

---

 

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

# 수정은 가능하나 수정해서는 안된다

 

 

예제코드)

 

# 첫 번째 방법은 state를 직접 수정하는 방법

# 두 번째 방법은 setState 함수를 통해 수정하는 방법

※ React에서의 state는 컴포넌트의 랜더링과 관련있기 때문에 마음대로 수정하면

    개발자가 의도한 대로 작동하지 않을 가능성이 있다.

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

---

React에서 state는 컴포넌트의 동적인 데이터를 관리하고 이 데이터의 변경에 따라 UI를 재 랜더링하기 위해 사용된다.

 

- state가 중요한 이유

1. 동적 데이터 관리
   state는 컴포넌트의 내부 상태를 나타내며, 시간이 지남에 따라 변할수 있는 데이터를 저장한다.
   예를들어 사용자가 입력한 텍스트. 클락한 버튼의 상태, 서버에서 가져온 데이터 등 관리 가능
2. UI 업데이트
   state가 변경되면 React는 해당 컴포넌트와 자식 컴포넌트를 다시 랜더링하여 UI를 최신 상태로 유지한다.
   이를 통해 사용자는 항상 최신 데이터를 기반으로한 UI를 볼 수 있다.
3. 컴포넌트 간 데이터 전달
   state는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는데 사용될 수 있다.
   이를 통해 상위 컴포넌트의 상태가 변경되면 해당 상태를 사용하는 하위 컴포넌트도 자동 업데이트 된다.

---

- Lifecycle

: 라이프사이클은 우리말로 생명주기란 뜻을 가지고 있으며, React 컴포넌트도 이러한 생명주기를 가지고 있다.

 

https://www.inflearn.com/course/lecture?courseSlug=%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8&unitId=113273&tab=curriculum 참고

 

# 각 출생 / 인생 / 사망 과정 하단에 초록색으로 표시된 부분은 생명주기에 따라 호출되는
   클래스 컴포넌트의 함수로 라이프사이클 메소드라 부르며, 번역하면 생명주기 함수가 된다.

 

- 출생 : 해당 과정을 마운트라 부르며, 이때 컴포넌트의 컨스트럭터인 생성자가 실행된다.

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

             또한, 컴포넌트가 랜더링되며 이후 컴포넌트 디드 마운트 함수가 호출된다.

 

- 인생 : React 컴포넌트도 생애 동안 변화를 겪으면서 여러번 랜더링 된다.

             이를 React 컴포넌트로 말하면 업데이트 되는 과정이라 할 수 있다.

             업데이트 과정에서는 컴포넌트의 props가 변경되거나 setState함수 호출에 의해 state가 변경되거나

              falseUpdate라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 랜더링 된다.

             그리고 랜더링 이후 componentDid 업데이트 함수가 호출된다.

 

- 사망 : React 컴포넌트도 언젠가 사라지는 과정을 겪게 되는데 이 과정을 Unmount라 한다.

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

             이때 Unmount 직전에 componentWillUnmount 함수가 호출된다.