React Hooks

리액트를 공부하면서 제일 와닿지 않았던 것은 각종 hooks들이었다. useState, useEffect, useMemo, useCallback 등 용어가 나한테 직관적으로 의미가 다가오지 않았고, 클래스형 라이프사이클 메서드와 개념이 섞여버렸다. 내가 알기 위해 다시 정리하는 hooks이다. 

---

1. useState 

컴포넌트에서도 상태관리를 할 수 있는 것이다. 랜더링 직후 작업을 설정한다.

const [value, setValue] = useState();

기본형은 위와 같다. 뜯어보면 value는 상태 값 setValue은 상태를 설정하는 함수 useState안에 들어가는 것은 상태의 기본값이다. 

예를 들면  

import React, {useState} from 'react';

const App = () => {
    const [name, setName] = useState('');
    const [age, setAge] = useState(0);

    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeAge = e => {
        setAge(e.target.value);
    }

    return (
      <div>
    	<input type="text" onChange={onChangeName} />
    	<input type="text" onChange={onChangeAge} />
        <div>
            <h1>{name}</h1>
            <h1>{age}</h1>
        </div>
      </div>
    );
};

useState는 '상태관리'라는 키워드로 정의하면 이해하기 쉽다. 

하지만 useEffect, useMemo, useCallback이 날 엄~청 헷갈리게 했다.  마지막에  useEffect, useMemo, useCallback에 대한 비교는 따로 할 것이다. 

---

2. useEffect 

리액트 컴포넌트가 랜더링 될때 마다 특정 작업을 수행하도록 설정하는 Hook이다.

useEffect(()=> {
  // 마운트 될 때 실항하는 로직 
  return () => {
  // 컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 수행하는 로직
    };
},[params]); // 두번쨰 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.

위의 주석을 달아놓은 것처럼 먼저 마운트 될 때 실행하는 로직, 이후 return은 컴포넌트가 언마운트되기 전이나, 업데이트되기 직전에 수행하는 로직, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다. 

클래스형 컴포넌트의 (componentDidMount + componentDidUpdate)의 기능을 합친것이라고 봐도 무방하다고 '리액트를 다루는 기술'에서 말했다. 

잠깐 다시보는 라이프사이클메소드 
componentDidMount : 컴포넌트가 웹브라우저상에 나타난 후 호출하는 메서드 
componentDidUpdate : 컴포넌트를 업데이트 할지 말지 결정하는 메서드

그렇다면, useEffect는 1.컴포넌트가 나타난 후 호출하고 이후에는 2. 컴포넌트를 업데이트할지 말지는 결정하는 두 가지 기능을 하는 것이다. 

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨처음 랜더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 빈 배열을 넣어주면 된다. 

---

3. useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

컴포넌트 내부에서 발생하는 연산 최적화이다. 랜더링하는 과정에서 특정값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전 연산했던 결과를 다시 사용한다. 

---

4. useCallbak 

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallbak도 useMemo와 마찬가지로 랜더링 성능을 최적화하기 위해 사용한다. 이 Hook를 사용하면 만들어놨던 함수를 재사용한다.

---

메모이제이션

useMemo와 useCallbak을 이해하려면 메모이제이션 먼저 알아야한다. 메모이제이션이란, 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.  메모이제이션을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라고 애플리케이션의 성능을 최적화할 수 있다. 

리액트에서 useMemo는 메모이제이션된 값을 반환한다, useCallback에서는 메모이제이션된 함수를 반환한다.

useMemo VS useCallback

 

useMemo를 사용하면 함수의 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 랜더링 하는 과정에서 특정값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다. 즉, useMemo은 메모리제이션된 값을 반환한다. 

useCallbak은 useMemo와 상당히 비슷한 함수이다. 컴포넌트가 랜더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 자식 컴포넌트에 prop으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리랜더링이 일어날 수 있다. 이때 useCallback을 사용하면 이전에 생성된 함수가 재사용된다. 즉, useCallback은 메모리제이션된 함수를 반환하는 것이다.

둘 다 불필요한 랜더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다. 다만, useMemo는 함수의 연산량이 많을 때 이전 결괏값을 재사용하는 목적이고, useCallBack은 함수가 재생성되는 것을 방지하기 위한 목적으로 쓰인다. 

 

참고 :

https://velog.io/@mementomori/useEffect-useCallback-useMemo-%EB%B9%84%EA%B5%90

useEffect, useCallback, useMemo 비교

http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791160508796

리액트를 다루는 기술 - 교보문고

 

 

"Icon made by Pixel perfect from www.flaticon.com"