React Lifecycle - hooks

전에는 react class에 대한 라이프사이클을 정리했으며,
이번 시간에는 react hooks에 대한 라이프사이클을 정리하겠다.

Hooks란?

Hooks는 16.8 버전에서 React에 새로 추가된 것으로, class 를 작성하지 않고도 state 와 Lifecycle 방법과 같은 React 기능을 사용할 수 있습니다.

어떤 hook이 있을까?

react에서 제공하는 hook은 많이 있겠지만, 공부를 통해서 제일 많이 사용되는 몇가지의 hook에 대해서 다시 개념을 잡고 가고자 정리를 해본다.

1. useState

함수형 컴포넌트에서 상태 값을 관리
여기서 값이란 데이터는 화면 렌더링과 관련된 데이터를 뜻한다.
즉, useState로 저장된 값이 변경되면, 화면이 리렌더링이 된다.
(리렌더링이 필요없이 저장된 값만 변경하고싶다면, useRef를 알아보자.)

// react에서 useState를 import 해줍니다.
import React, { useState } from "react";

const App = () => {
  // number는 직접적으로 접근하면 안됌.
  // setNumber를 통해서 number의 값을 업데이트
  // useState(0) - 초기 상태 값을 0으로 설정
  const [number, setNumber] = useState(0);

  const onClickButton = () => {
    // setNumber를 통해 prev(0)에 1를 계속 더하기.
    setNumber((prev) => prev + 1); 
    // 또는 setNumber(number + 1);
  };

  return (
    <div>
      // setNumber에 업데이트한 값을 number에서 사용
      <span>{number}</span>
      <button onClick={onClickButton}>버튼</button>
    </div>
  );
};

export default App;

2. useEffect

class 컴포넌트의 componentDidMount() componentDidUdate() componentWillUnmount() 메소드를 useEffect에서 쓸 수 있다.

import React, { useState, useEffect } from 'react';

const App = () => {
  const [number, setNumber] = useState(0);
	
  const onClickButton = () => {
    setNumber((prev) => prev + 1); 
  };
  
  /*
   실행 시 처음 렌덩링 후 콘솔에 'Did!'가 출력되고,
   button을 누를 때마다 매번 'Did!'가 콘솔에 출력된다.
   즉, componentDidMount(), componentDidUpdate()가 된다는 얘기다.
  */
  useEffect(() => {
  	console.log('Did!');
  });
  
  /*
    하지만 위 처럼 무차별하게 Update가 되는건 불필요하다.
    위 useEffect 형태에서 두번째 인수(배열)를 추가해보자.
    
    물론 첫 렌더링 시에는 아래도 콘솔에 출력 되지만,
    그 이후에는 두번째 인수(배열)에 들어간 변수의 상태가
    바뀔 때마다 useEffect가 실행된다.
    
    배열이 비어있다면, 첫 렌더링 이 후에는 실행되지 않는다.
  */
  useEffect(() => {
  	console.log('Did!');
  },[]);

  return (
    <div>
      <span>{number}</span>
      <button onClick={onClickButton}>버튼</button>
    </div>
  );
};

export default App;

그럼 componentWillUnmount()는?

// return이 componentWillUnmount()에 해당되는 부분이다.
/*
   useEffect의 내부에 이벤트를 만들었다면,
   return에 이벤트를 해지하는 함수를 등록하면 됀다.
   (이러한 이벤트를 해지함으로써 버그 및 성능을 최적화에 도움이 된다고한다.)
   물론 때에 따라서는 해지할 필요는 없다.
*/ 
 
useEffect(() => {
  console.log('Did!');
  return () => {
    console.log('Unmount!');
  }
},[]);