[React] 리액트 생애주기와 useEffect

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다!

목차

1. 리액트 생애주기(Lifecycle)

2. Lifecycle 실습

3. API 호출

 

1. 리액트 생애주기(Lifecycle)

리액트의 생애주기란,

시간의 흐름에 따라 프로그램이 실행(Mount)되고, 변화(Update)되며, 종료(UnMount)되는 과정입니다.

생애주기별로 여러 함수가 있는데, 이들은 다 클래스로만 사용이 가능합니다.

 

사실 이때까지 사용한 State, Ref도 클래스로만 사용이 가능했습니다.

하지만 함수형으로 사용하기 위해 저희는 React Hooks를 이용했던 것입니다.

우리가 사용한 useState, useEffect, useRef 형태의 함수형이 모두 React Hooks입니다.

 

그렇다면 React Hooks를 사용하는 이유는 뭘까요?

클래스형 컴포넌트는 코드 길이가 길어지기 때문입니다.

함수형 컴포넌트는 이로 인한 클래스형의 중복 코드나 가독성 문제를 해결한 것입니다.

React Hooks를 써서, 리액트 생애주기를 다루는 함수를 써봅시다.

 

2. Lifecycle 실습

1. 컴포넌트 만들기

import React, { useEffect, useState } from 'react';
 
const Lifecycle = () => {
  return <div></div>;
};
 
export default Lifecycle;

 

2. App.js에서 항목 추가

<Lifecycle />

3. 컴포넌트에 단순 Counter와 input을 만들고, useEffect 추가

import React, { useEffect, useState } from 'react';
 
const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
 
  useEffect(() => {
    console.log('Mount');
  }, []);
  return (
    <div style={{ padding: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}></input>
      </div>
    </div>
  );
};
 
export default Lifecycle;

이렇게 만들어봤습니다.

그런데 실제로 실행해보면, 처음 켰을 때만 콘솔에 Mount가 찍히고, 버튼을 누르거나 input에 글을 썼을 때는 안 찍히는 것을 확인할 수 있습니다.

useEffect에 여러 종류가 있기 때문입니다.

 

useEffect의 여러 종류를 알아봅시다.

useEffect(() => { // 처음 화면 켜졌을 때
  console.log('Mount');
}, []);

useEffect(() => { // 뭐든 업데이트 될 때마다
  console.log('update');
});

useEffect(() => { // count값이 변했을 때
  console.log(`count is updated: ${count}`);
}, [count]);

useEffect(() => { // text값이 변했을 때
  console.log(`text is updated: ${text}`);
}, [text]);

이렇게 두 번째 인자에 지정하는 것에 따라 실행되는 조건이 달라집니다.

[]를 주면 Mount시에만,

아무것도 주지 않으면 업데이트 될 때마다 항상, 

[] 안에 특정 요소를 쓰면 그 요소가 바뀔 때마다 useEffect 속 콜백함수가 실행 됩니다.

 

이를 이용해 Mount, Unmount 테스트 컴포넌트를 만들어보겠습니다.

const UnmountTest = () => {
  useEffect(() => {
    console.log('Mount');
 
    return () => {
      //Unmount 시점에 실행되게 됨
      console.log('Unmount');
    };
  });
 
  return <div>Unmount Testing Component</div>;
};

useEffect 속 함수의 리턴함수가 곧 unMount 시 실행되게 됩니다.

const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);
 
  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON/OFF</button>
      {isVisible && <UnmountTest />}
    </div>
  );
};
 
export default Lifecycle;

UnmountTest를 띄우는 건 똑같이 Lifecycle 컴포넌트에서 이루어집니다.

토글 스위치를 누르면 UnmountTest가 생기게 하였습니다.

 

3. API 호출

이번에는 useEffect를 써서, 컴포넌트 Mount 시점에 API를 fetch해오고,

해당 API의 결과값을 일기데이터의 초기값으로 이용해보겠습니다.

 

1. jsonplaceholder 사이트에서 fake API 주소 받기

사이트에 접속 후, Resources의 /comments를 눌러 해당 페이지의 주소를 복사합니다.

 

2. App.js에서 fetch

const getData = async () => {
    const res = await fetch(
      'https://jsonplaceholder.typicode.com/comments',
    ).then((res) => res.json());
    console.log(res);
  };

fetch함수 안에 복사한 링크를 넣습니다.

이 코드 속 링크 그대로 쓰셔도 됩니다.

 

3. 초기화

contents는 fake API의 body을, author는 email을 넣고, emotion은 랜덤으로 생성하겠습니다.

const initData = res.slice(0, 20).map((it) => {
  return {
    author: it.email,
    contents: it.body,
    emotion: Math.floor(Math.random() * 5 + 1),
    created_date: new Date().getTime(),
    id: dataId.current++,
  };
});

이렇게 불러오는 함수를 만들었습니다.

 

4. 적용

setData(initData);