State와 생명주기

1. State

State 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체로, hook을 통해 각각의 State 정의할 수 있다.

State는 간단하게 말해서 변수이다. 하지만 State가 변경될 경우 const, let 등으로 선언한 변수와는 다르게 관련된 컴포넌트가 재렌더링 되기 때문에, 마음대로 수정할 경우 개발자가 의도한 대로 작동하지 않을 수 있다.

일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()라는 리액트 함수를 사용하여 State라는 저장 공간에 담아 사용한다.
라는

2. 생명주기

📌 생명주기란?

REACT는 컴포넌트 기반으로 작동되는 라이브러리이다. 각각의 컴포넌트에는 생성, 업데이트, 소멸의 과정의 라이프 사이클 즉, 컴포넌트의 생명 주기(Life Cycle)가 존재한다.
물론, state나 props를 사용해서 데이터를 변경하는 것만으로도 간단한 리액트 웹을 개발할 수 있지만 더 복잡하고 많은 작업들을 수행하기 위해서는 라이프 사이클에 대한 이해가 필요할 것이다.

📌 생명주기 과정

1) 생성(Mount)

컴포넌트가 생성되는 시점 및 과정을 mount라고 한다.

✔️ constructor

컴포넌트 '생성자 함수'로 컴포넌트가 생성되면 가장 먼저 실행되는 메서드이다.
이 메서드에서는 초기 state를 정할 수 있다.

✔️ render
HTML 형식의 코드를 화면에 그려준다.

✔️ componenetDidMount

컴포넌트가 화면에 나타나게 됐을 때 호출 되며, 컴포넌트에서 fetch,axios등을 통해 데이터를 받아오는데 사용한다.


2) 업데이트(Update)

코드 변경에 따라 다시 렌더링 되는 과정이며, props 혹은 state에 변화가 생길 경우에 일어난다.

✔️ componentDidUpdate

현재 컴포넌트에서 state나 props의 변경 유무로만 판단해 작동되는 함수로 만약 state의 변경이 일어났다면 state의 변경사항을 감지해 다시 변경된 부분을 그려준다.

✔️ componentDidUpdate

컴포넌트의 변경이 완료되었을 때 실행되는 메서드이다.
의존성 배열이 변할때만 useEffect가 실행하는 것과 같다.

의존성 배열이란?
useEffect 훅에 입력하는 두 번째 매개변수로, useEffect 함수가 의존하고 있는 요소들의 모음이라고 할 수 있다.

const Example = () => {
	useEffect(() => {
    	console.log("componentDidUpdate!");
   }, [count]);     
}

위 예시에서는 'count' 라는 외부의 변수를 내부에서 사용하고 있기 때문에
useEffect 함수의 의존성은 'count' 이며 'count'를 의존성 배열에 넣어줘야한다.

3) 제거(Unmount)

unmount는 컴포넌트가 화면에서 사라지는 것을 뜻한다.

✔️ componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출되며, 주로 DOM에서 직접 등록했던 이벤트를 제거하는 등의 작업을 한다.
(ex. setInterval -> clearInterval / eventListener 등)
컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.