React / 생명주기

생명주기

컴포넌트가 생성되고, 렌더링 된 후 소멸될 때까지의 과정을 의미한다.

생명 주기는 Mount(화면에 그려짐) - Update(화면 업데이트) - Unmount(화면에서 사라짐) 세 가지의 단계로 이루어진다.

 

 

클래스형 컴포넌트 생명주기

 

 

1. 컴포넌트 인스턴스 생성 및 마운트

생성된 인스턴스가 DOM에 추가되는데, 컴포넌트가 필요한 설정을 하거나 데이터를 불러오는 등의 초기 작업이 수행된다.

• constructor() : 컴포넌트 인스턴스 생성 및 state 초기화
• render() : JSX 리턴, 화면에 그릴 내용 정의
• componentDidMount() : 컴포넌트가 DOM에 실제로 그려진 후 호출됨, 데이터 요청 / DOM 관련 작업 / 타이머나 이벤트 리스너 등록 등에 사용

 

2. 업데이트

state나 props 등이 변경되면 업데이트 단계를 갖게 된다.

• shouldComponentUpdate() : 리렌더링 여부를 true, false로 결정
• render() : 변경된 상태를 반영한 UI를 그리는 메서드
• componentDidUpdate() : 컴포넌트가 업데이트 된 직후 실행됨, API 호출 / DOM 작업에 유용

 

3. 언마운트

컴포넌트가 더 이상 필요없어지면 DOM에서 제거되는데, 제거되기 전 필요한 정리 작업을 수행한다.

• componentWillUnmount() : 컴포넌트가 제거되기 전 호출됨, 타이머 정리 / 이벤트 리스너 해제 등 모든 정리 작업을 수행한다

 

* 예시

import { Component, useState } from 'react';
import './App.css';

function App() {
  const [showCounter, setShowCounter] = useState(false);
  return (
    <>
      {showCounter && <Counter />}
      <br />
      <button onClick={() => setShowCounter((prev) => !prev)}>show</button>
    </>
  );
}

class Counter extends Component {
  // 생성자 생성
  constructor() {
    super(); // 비어있어도 써줘야됨!
    this.state = { counter: 1 };
    console.log('constructor');
  }
  // 마운트
  componentDidMount() {
    console.log('DidMount');
  }
  // 업데이트
  componentDidUpdate() {
    console.log('DidUpdate');
  }
  // 언마운트
  componentWillUnmount() {
    console.log('WillUnmount');
  }
  render() {
    console.log('render');
    return (
      <>
        <div>counter : {this.state.counter}</div>
        <button
          onClick={() =>
            this.setState({
              counter: this.state.counter + 1,
            })
          }>
          +1
        </button>
      </>
    );
  }
}

export default App;

 

 

 

 

---

 

 

함수형 컴포넌트 생명주기

 

 

함수형 컴포넌트에는 클래스형과 달리 별도로 state를 정의해주거나 생명주기에 맞춰 코드가 실행되도록 하는 기능은 따로 없기 때문에, Effect Hook인 useEffect를 사용해서 기능을 동일하게 사용할 수 있다.

 

이 때 클래스형과 달리 함수형 컴포넌트는 인스턴스를 만들고, 마운트됐을 때 상태 변경이 일어날 경우 내부를 변경했던 클래스와 달리 앞서 호출했던 함수를 더 이상 사용하지 않고, 새로운 상태 값으로 함수를 호출한다. 기존 함수는 사라지고 새로운 함수 호출로 대체되며 리렌더링된다.

 

클래스형에서 componentDidMount, componentDidUpdate, componentWillUnmount 세 단계로 나뉘어져 있던 것과는 달리, useEffect 하나로 다 구현이 가능하기 때문에 코드가 더 간결해진다.

 

 

---

 

useEffect

생명 주기를 제어하는 훅으로, 마운트 + 업데이트 + 언마운트 다 처리가 가능하다.

 

 

기본 형태

useEffect(()=>{
  첫번째 인자 : 함수 // useEffect가 호출되면 실행될 코드
},[두번째 인자 : 배열]) // useEffect가 호출되는 조건을 정의해주는 배열

 

- 배열을 인자로 주지 않았을 경우 : 컴포넌트가 처음 렌더링됐을 때, 리렌더링 됐을 때 실행하게 된다. (마운트, 업데이트할 때 useEffect()실행)

- 빈 배열을 인자로 줬을 경우 : 컴포넌트가 처음 렌더링됐을 때만 실행 (마운트될 때 useEffect() 실행)

- 배열에 값을 담아 인자로 줬을 경우 : 컴포넌트가 처음 렌더링 됐을 때, 배열에 담긴 값이 변경돼 리렌더링 됐을 때 실행 (마운트, 업데이트할 때 useEffect()실행)

 

그럼 언마운트는 어떻게 하냐면 return()을 사용하면 된다. 즉 컴포넌트가 사라질 때 return내의 함수가 실행되는 것이다.

useEffect(()=>{
  첫번째 인자 : 함수 // useEffect가 호출되면 실행될 코드
  return()=>{ 리턴되는 함수 } // 언마운트될 때
},[두번째 인자 : 배열]) // useEffect가 호출되는 조건을 정의해주는 배열

 

 

예제

1) 배열 인자가 없을 경우

function Counter() {
  const [counter, setCounter] = useState(0);
  // useEffect
  useEffect(() => {
    // 배열 인자가 없음 => 마운트, 업데이트가 실행
    console.log('useEffect');
  });
  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </>
  );
}

 

마운트될때, 업데이트될 때(상태가 변경될때마다 리렌더링됨) 'useEffect'가 콘솔에 추가되는 것을 볼 수 있다!

 

 

2) 인자로 빈 배열을 전달할 경우

  // useEffect
  useEffect(() => {
    console.log('useEffect');
  }, []);

 

마운트될 때만 콘솔에 출력되고, 상태가 변경될 때(업데이트할 때)는 useEffect가 실행되지 않음을 알 수 있다

 

 

3) 값이 있는 배열을 전달할 경우

 

배열이 있을 때와 없을때의 차이를 구분하기 위해 새로운 상태를 하나 더 생성했다.

인자값으로는 새로 생성한 counter2의 상태값을 넣어줬다.

function Counter() {
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(100);
  // useEffect
  useEffect(() => {
    console.log('useEffect');
  }, [counter2]);
  return (
    <>
      <div>counter : {counter}</div>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
      <hr />
      <div>counter2 : {counter2}</div>
      <button onClick={() => setCounter2(counter2 - 1)}>-1</button>
    </>
  );
}

 

 

마운트될 때와, 인자로 넣은 counter2의 상태가 변경될 때만 (업데이트할 때만) useEffect가 실행되는 것을 볼 수 있다.

 

 

4) 언마운트될 때도 추가하기

 

언마운트 시 정리를 위해 return문을 추가했다.

  // useEffect
  useEffect(() => {
    console.log('useEffect');
    return () => {
      console.log('returned function');
    };
  }, [counter2]);

 

 

 

update중에도 계속 returned function이 실행되고 있음을 알 수 있는데,

이는 업데이트 - 언마운트가 동시에 일어난 것이 아니라 위에서 언급했던 것처럼 함수형 컴포넌트에서는 업데이트할 때 기존 함수가 삭제되고 새로운 함수를 호출하기 때문에 return문도 같이 실행되고 있는 것이다.

 

 

+ 이때 의존성 배열을 아예 주지 않으면 굳이 return하는 이유가 없어지므로, 적절하게 의존성 배열을 넣는 것이 중요하다. 
+ 빈배열을 인자로 넣으면 unmount될 때만 return문이 실행되게 된다.

 

 

---

clean-up 함수

useEffect에서 return으로 반환된 함수를 클린업 함수라고 하는데, 기존 리소스를 정리할 때 사용된다.

React가 컴포넌트의 생명주기를 관리하면서 자동으로 이전의 effect를 정리(clean-up)해주는 것이다.

위의 예시에서 계속 returned function이 콘솔에 출력되는 이유도 계속 렌더링될 때마다 다음 useEffect가 실행되기 전에 기존 effect를 정리하는 것이다. 

 

얼핏보면 그냥 언마운트와 비슷할 수도 있지만 클린업의 경우에는 의존성 배열(두번째 인자로 넣은 배열!)에 포함된 값이 변경될 때도, useEffect가 재실행될때도, 언마운트될 때도 발생할 수 있다.

의존성 배열	cleanup 실행 시점
생략	리렌더링 될 때마다 다음 실행 전 cleanup 실행
[]	unmount시에만 cleanup 실행
[value]	value가 바뀔 때마다, 바뀌기 전 cleanup 실행

 

clean-up이 자동으로 실행되는 이유는 메모리의 누수를 방지하고, 이벤트 핸들러나 타이머를 제거할 수 있고, 의존성 배열에 값을 설정한 경우 최신 상태를 바로 반영해 올바른 상태를 유지할 수 있다.

 

 

 

---

 

 

 

생명 주기 함수의 필요성

 

생명주기 함수가 필요한 이유는 state가 바뀔 때마다 이벤트 리스터나 타이머를 등록 / 해제하거나, 데이터를 서버에서 받아오는 등의 동작을 관리하기 위해서다.

 

1. 서버에서 데이터를 받아올 때 (API 요청)

서버에서 데이터를 받아올 때는 동기적으로 처리 시 화면 멈춤 현상이 발생하기 때문에 보통 비동기 처리로 작업하게 된다. 

fetch()는 비동기 함수로, 데이터의 요청을 기다리지 않은 채 프로미스를 반환하고, 다음 코드를 실행한 뒤 응답이 오면 그때 처리하고 있다.

 

 

1) 예시

 

json-server : json파일을 이용해 모의용 RESTful API 서버 및 DB를 구축할 수 있게 해주는 도구다.

다음 명령어로 json-server를 설치했다. 이 때 -g는 global을 의미하며 전역으로 패키지를 설치하겠다는 의미다. 

npm i -g json-server

 

그리고 데이터베이스 역할을 해줄 json파일을 새로 만들었다.

 

db.json

{
  "createOrder": [
    { "id": 1, "content": "npm create vite@latest my-app -- --template react" },
    { "id": 2, "content": "cd my-app" },
    { "id": 3, "content": "npm install" }
  ]
}

 

그리고 json-server를 실행하는 방법은 다음과 같다. db.json파일을 watching 하는 것이다.

json-server --watch db.json 
## 기본 포트는 3000이라서 뒤에 --port 3004 를 붙이면 3004번 포트로 변경할 수 있다.

 

왼쪽의 http://localhost:3000/data로 들어가면 오른쪽 이미지와 같은 페이지가 뜬다

 

fetch 메서드로 실행한 json-server의 data를 요청했다. 

그리고 then으로 받아온 요청을 json()으로 json형식을 입력받아 => javascript 객체로 반환하고 data 라는 변수에 할당해준다.

할당된 data를 map()으로 화면에 뿌려주면...

function App() {
  let data;

  fetch('http://localhost:3000/data')
    .then((res) => res.json())
    .then((res) => (data = res));
  return (
    <>
      <div>리액트 프로젝트 구성하기</div>
      {data.map((el) => (
        <div key={el.id}>{el.content}</div>
      ))}
    </>
  );
}

 

오류가 발생한다!

 

 

data.map에서 data가 undefined 상태이기 때문에 map()을 읽어올 수가 없다는 것이다... 

fetch가 비동기 함수기 때문에 서버에서 데이터를 받아오는 동안 컴포넌트는 데이터를 기다리지 않고 먼저 렌더링되기 때문에 data가 undefined인 상태로 렌더링된 것이다. 

 

때문에 이럴 때는 useState, useEffect로 처리해줄 수 있다. 

 

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data')
      .then((res) => res.json())
      .then((res) => setData(res));
  }, []);

  return (
    <>
      <div>리액트 프로젝트 구성하기</div>
      {data.map((el) => (
        <div key={el.id}>{el.content}</div>
      ))}
    </>
  );
}

 

useState로 data의 상태를 관리

useEffect로 의존성 배열을 빈 배열로 설정해 마운트될 때만 데이터를 가져옴

data를 빈 배열로 초기화했으므로 map을 호출하기 전에 data가 배열인지 확인이 가능

 

* 의존성 배열을 빈 배열로 설정하는 이유

: 페이지가 처음 렌더링 될 때 서버로부터 데이터를 받아와 하기 때문에 fetch 메서드를 사용하고 있는데, 데이터를 받아오는 동안 상태가 변하고, 상태가 변하면 계속해서 리렌더링이 되면서 fetch()가 계속 실행이 되는데, 이는 매우 비효율적이다.

때문에 useEffect의 의존성 배열을 빈 배열로 설정해 처음 마운트될 때만 useEffect 내의 콜백함수가 실행이 되기 때문에 효율적으로 구성할 수 있다.

 

결과 화면

 

 

---

 

 

2. 이벤트 핸들러를 사용할 때

1) 마우스 이벤트

useEffect와 useState를 이용해 다음과 같이 마우스가 움직일 때마다 마우스를 따라오는 div요소와 mouse의 현재 위치값을 표시해줄 수 있다.

function App() {
  return (
    <>
      <Mousefollower />
    </>
  );
}

// 마우스 이벤트
const Mousefollower = () => {
  // 마우스의 좌표 상태 생성
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  // 마우스 이벤트 등록
  useEffect(() => {
    // 컴포넌트가 렌더링될 때마다 (상태가 변경될 때마다) handleMouseMove를 등록
    const handleMouseMove = (e) => {
      // 좌표 상태를 변경 (e.clientX, e.clientY는 브라우저 기준 마우스 좌표값)
      setPosition({ x: e.clientX, y: e.clientY });
      console.log('mouseMoved');
    };
    window.addEventListener('mouseover', handleMouseMove);
    
    // 클린업 함수, 상태가 변경되기 직전 기존 이벤트 리스너가 제거된다
    return () => {
      window.removeEventListener('mouseover', handleMouseMove);
    };
  });

  return (
    <>
      <div
        style={{
          position: 'fixed',
          top: position.y,
          left: position.x,
          width: '20px',
          height: '20px',
          borderRadius: '50%',
          background: 'green',
          transform: 'translate(-50%, -50%)',
        }}></div>
      <p>
        마우스 위치: {position.x}px, {position.y}px
      </p>
    </>
  );
};

 

(이때 클리너 함수로 이전 이벤트를 바로바로 제거해주지 않으면 이벤트 리스너가 쌓여서 콘솔창으로 useEffect의 실행 횟수가 기하급수적으로 늘어나는 걸 볼 수 있다... )

 

 

 

2) 스크롤 이벤트

스크롤 좌표의 경우 window나 document에서 바로 결과를 가져올 수 있기 때문에 마우스와 달리 굳이 이벤트 객체를 거치치 않아도 된다. 다만 스크롤 진행도를 표시하기 위해 이벤트 리스너가 사용되었다.

function App() {
  return (
    <>
      <div style={{ height: '300vh' }}></div>
      <Mousefollower />
      <ScrollIndicator />
    </>
  );
}

const ScrollIndicator = () => {
 // 스크롤 진행도를 표시할 바의 너비 상태 생성
  const [scrollWidth, setscrollWidth] = useState(0);

  useEffect(() => {
    // 상태가 변경될 때마다 스크롤 진행률을 받아옴
    const handleScroll = () => {
      // 스크롤 값 가져오기
      const scrollTop = window.scrollY;
      const scrollHeight = document.documentElement.scrollHeight;
      const clientHeight = document.documentElement.clientHeight;
      const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
      // 받아온 진행률을 바의 너비로 설정
      setscrollWidth(scrollPercentage);
    };
    // 스크롤 시 handleScroll 실행
    window.addEventListener('scroll', handleScroll);
    return () => { // 클린업 함수!
      window.removeEventListener('scroll', handleScroll);
    };
  });
  return (
    <>
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: `${scrollWidth}%`,
          height: '10px',
          background: 'green',
        }}></div>
      <div
        style={{
          position: 'fixed',
          bottom: '50px',
          left: '50%',
          transform: 'translateX(-50%)',
        }}>
        스크롤 진행도 : {scrollWidth.toFixed(0)}%
      </div>
    </>
  );
};

 

 

 

---

3. 타이머 함수를 사용할 때

다음 코드는 3초안에 버튼을 누르지 않으면 alert창을 띄워준다.

function App() {
  return (
    <>
      <AlertTimer />
    </>
  );
}

// 시간이 지나면 alert하는 타이머 객체
const AlertTimer = () => {
  // alert의 상태 생성
  const [showAlert, setShowAlert] = useState(true);

  useEffect(() => {
    // 3초가 지나면 alert 실행
    // setTimeout은 타이머 아이디를 숫자타입으로 반환한다.
    const setTimeoutId = setTimeout(() => {
      // showAlert가 true라면 alert, 아니면 null
      showAlert === true ? alert('시간초과') : null;
    }, 3000);
    return () => {
      // 위에서 받아온 타이머 아이디 인자로 넘겨, 해당 타이머를 제거하게 해준다.
      clearTimeout(setTimeoutId);
    };
  });
  
  // 3초 안에 버튼을 눌러야 showAlert값이 false로 변경돼 alert 창이 열리지 않음
  return <button onClick={() => setShowAlert(false)}>빨리 클릭!!</button>;
};

 

+ 여기서 의존성 배열을 넣는 경우

 

[] : showAlert의 초기값(true)를 기억한 상태로 마운트할때만 useEffect가 실행되기 때문에 버튼을 눌러도 3초 뒤에 alert창을 띄운다.

[showAlert] - 버튼을 누른 경우 : 

1. showAlert 값이 true → false로 변화
2. 의존성 배열 [showAlert]에 의해 useEffect 재실행, 이전 타이머는 클린업 함수로 제거되고 새로운 setTimeout이 재실행됨
3. 그러나 showAlert = false이므로 3초뒤에 조건에 걸려 alert가 실행이 되지 않은 상태로 끝난다

[showAlert] - 버튼을 누르지 않은 경우 :

1. showAlert 값이 변화하지 않음
2. 3초 뒤에 alert창을 띄움, 그리고 상태가 변화되지 않기 때문에 그대로 종료

 

 

의존성 배열을 []로 비울거면 useRef로 쓰는게 나은데, 이는 다음 글로... 

 

 

 

참고
클래스형 컴포넌트 생명주기 : https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html
Effect Hook : https://ko.legacy.reactjs.org/docs/react-component.html
, https://ko.legacy.reactjs.org/docs/hooks-effect.html

이미지 출처
class component : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
function component : https://wavez.github.io/react-hooks-lifecycle/