[React] 자주 쓰이는 React 생명 주기(함수형편, useEffect)

앞서 Class편에서처럼 React는 생명주기를 갖습니다.

생명주기를 쉽게 표현하면 화면이 처음에 생성 될때나, 중간에 화면의 내용이 바뀌거나, 화면이 전환되어 소멸될 때 일어나는 과정들이라고 이해하면 좋을 것 같습니다.

---

Hooks에서는 useEffect를 통해서 생명주기를 관리할 수 있습니다.

기존에 클래스형과 함수형의 차이였던 부분으로 알고 있는데 Hooks에서 더욱 간단하게 생명주기를 관리할 수 있으니

사람들이 왜 Hooks를 이용하는지 알 것 같습니다.

 

1. useEffect의 구조입니다.

useEffect(<function>, <array>);

function은 컴포넌트가 (re)render 되었을때 실행할 함수이며, 그다음 파라미터인 array는 어떤 state의 변화가 감지되었을때만 render를 하고 싶을때 그 변수를 담는 곳입니다.

 

2. ComponentDidUpdate

function App() {
  
  const [count, setCount] = useState(0);

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

    return (
          <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(count+1)}}>클릭!</button>
          </div>
    );
}

 

 

간단한 예로 render 되었을 때 console창을 하나 찍는 코드 입니다.

두번째 파라미터로 들어간 배열에 count라는 state변수가 들어있습니다. 따라서 이 컴포넌트는 count라는 상태가 변경 될때마다 re-render을 실행하게 됩니다. 실제로 확인해보면.

실행 직후

실행 직후 componentDidMount의 역할을 수행하며 콘솔창에 render 메시지가 확인됩니다.

9번 클릭 후

이제 클릭 버튼을 누르면 state값이 변하기 때문에 컴포넌트는 render를 다시 하게 됩니다.

만약 두번째 파라미터의 배열에 빈배열([])을 주었다면 어떻게 될까요.

빈배열을 파라미터로 받은 후 클릭

새로 마운트 되는 것이 아니라 업데이트만 진행하게 됩니다.

만약 마운트시에만 사용하고 싶다면 빈배열([])을 주어 사용하면 됩니다.

---

 

 

3. ComponentWillUnMount

만약 컴포넌트가 업데이트 되기 전이나, 언마운트 되기전에 실행할 함수를 작성할 수 있습니다.

useEffect(()=>{
    console.log("render!");
    return () => {
      console.log("변화!");
    }
  })

다음과 같이 사용하면 어떻게 될까요. 버튼을 클릭 시

버튼 3번 클릭 후

return 에 작성된 함수가 실행되어 언마운트나 업데이트가 되기전 함수를 실행시킬 수 있습니다.

만약, 언마운트 시에만 실행시키고 싶은 함수라면 두 번째 파라미터로 빈배열을 주면 됩니다.

 useEffect(()=>{
    console.log("render!");
    return () => {
      console.log("변화!");
    }
  },[])

언마운트가 되기전 모습

지금까지 useEffect를 통한 함수형 컴포넌트에서의 생명주기 관리를 대충 살펴았습니다.

class형을 사용하게 되면 좀 더 좋은 가시성을 가질 수 있지만 훅스의 useEffect를 잘 사용하면 훨씬 더 간단하게 코드를 작성할 수 있을 것 같습니다.

(저도 아직은 생명주기에 나약하여 Hooks로 짜다가 이해가 안되면 class형으로 돌아가곤 합니다...)

 

틀린 내용이나, 중요한 추가 공부내용을 알려주시면 감사하겠습니다 (~_~)