리액트를 다루는 기술 - Hooks

1. useState

2. useEffect

3. useReducer

4. useMemo

5. useCallBack

6. useRef

7. 커스텀 Hooks

 

useEffect 　VS　useCallBack 　VS 　useMemo

useEffect	useCallBack	useMemo
특정값(배열 안 값)이 업데이트 될때, 특정 작업을 수행하도록 설정 새로운 함수 인스턴스를 생성하는 것이 아니라, 실행되는지 여부와 관련	특정값이 업데이트 될 때, 함수를 새로 생성, 함수 memoization하여, 같은 함수 인스턴스 재사용 ※ 빈 배열, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용	특정값이 업데이트 될 때, 연산을 실행(o) 새로 생성(x) 값을 memoization하여, 계산 결과나 객체를 재사용 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용 (==메모이즈 된 값을 return)

Hooks는 함수 컴포넌트에서도 상태 관리를 할 수 있는 기능(useState, useEffect 등) 을 제공한다.

( 클래스형 컴포넌트를 작성하지 않고도 상태관리의 대부분의 기능을 구현)

 

1. useState

함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.

 

2. useEffect

컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.

빈 배열 [ ] : 맨 처음 렌더링 될때만 실행하고, 업데이트될 때는 실행하지 않음.

특정값이 업데이트 될 때만 실행하고 싶을땐, 배열 안에 검사하고 싶은 값을 넣어준다.

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

 

3. useReducer - useReducer('reducer' , 해당 리듀서의 기본값);

더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을때 사용한다.

'reducer'는 (현재 상태, 업데이트를 위해 필요한 정보를 담은 action값)을 인자로 전달받아 새로운 상태를 반환하는 함수이다.

컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

Nickname.js import { useEffect, useState } from "react"; const Nickname = () => {   const [name, setName] = useState("");   const [nickname, setNickName] = useState("");     // 특정 값('name')이 업데이트 될 때만 실행하고 싶을때,   // useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값 입력(['name'])   useEffect(() => {     console.log("effect");     console.log({ name, nickname });     // 컴포넌트가 언마운트 되기전, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶을때,     // 뒷정리 함수를 "반환(return)" 해 주어야 함.     return () => {       console.log("cleanup");       console.log({ name, nickname });     };   }, [name]);   const changeName = (e) => {     setName(e.target.value);   };   const changeNickName = (e) => {     setNickName(e.target.value);   };   return (     <>       <input onChange={changeName} value={name} />       <input onChange={changeNickName} value={nickname} />       <p> 이름 {name}</p>       <p> 닉네임 {nickname}</p>     </>   ); }; export default Nickname;

Nickname_useReducer.js import { useReducer } from "react"; // 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다. function reducer(state, action) {   return {     ...state,     [action.name]: action.value,   }; } const Nickname_useReducer = () => {   // useReducer 이 Hook을 사용하면 state값과 dispatch 함수를 받아옴.   // state - 현재 가리키고 있는 상태   // dispatch - 액션을 발생시키는 함수로, 함수 안에 파라미터로 액션 값을 넣어주면 'reducer'함수가 호출   // dispathch(e.target) -> reducer(state, e.target)   const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });   const { name, nickname } = state;   const onChange = (e) => {     dispatch(e.target);   };   return (     <>       <p>useReducer</p>       <input onChange={onChange} value={name} name="name" />       <input onChange={onChange} value={nickname} name="nickname" />       <p> 이름 {name}</p>       <p> 닉네임 {nickname}</p>     </>   ); }; export default Nickname_useReducer;

 

 

4. useMemo

: 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고,

원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용

(==메모이즈 된 값을 return)

 

5. useCallBack - useCallBack(생성하고 싶은 함수, 배열)

↗이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시,

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 배열안에 포함해야함.

※ 비어있는 배열을 넣게 되면, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용

:useMemo와 비슷, 이 Hook을 사용하면 만들어 놨던 함수를 재사용해 렌더링 성능을 최적화 할 수 있다.

 

6. useRef

: 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

또한 성능을 아낄 수 있다.

예를 들어 id 값은 화면에 보이지도 않고, 이 값이 바뀐다고 해서 컴포넌트가 리렌더링될 필요도 없습니다.

단순히 새로운 항목을 만들때 참조되는 값이므로 렌더링되는 정보가 아니다. 

 

import { useCallback, useMemo, useState, useRef } from 'react';

function getAverage(numbers) {
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
}

const Average = () => {
  const [number, setNum] = useState(0);
  const [list, setList] = useState([]);

  const InputEL = useRef(null);

  const onChange = useCallback((e) => {
    setNum(e.target.value);
  }, []);

  const onInsert = useCallback(() => {
    const newList = list.concat(parseInt(number));
    setList(newList);
    setNum('');
    InputEL.current.focus();
  }, [number, list]);

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <>
      <input onChange={onChange} ref={InputEL} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((e, i) => (
          <li key={i}>{e}</li>
        ))}
      </ul>
      <p>평균값 : {avg}</p>
    </>
  );
};

export default Average;

 

---

7. 커스텀 Hooks 만들기

여러 컴포넌트에서 비슷한 기능을 공유할 경우, 이를 여러분만의 Hook으로 작성하여 로직을 재사용할 수 있습니다.