8장. Hooks

정리보단 지식 쌓기 느낌으로 정리하였다.

 

- React.StrictMode란?

useEffect를 사용한 코드에 문제가 있는지 없는지 감지하기 때문에 console.log() 코드가 두번 실행이 됨.

 

- useEffect를 통해 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶을 땐, useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 함.

-> 렌더링될 때마다 뒷정리 함수가 계속 나타남, 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줌.

오직 언마운트될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두번째 파라미터에 []를 넣으면 됨.

 

- 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수다.

리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜줘야 함.

 

-useReducer의 활용

import React, { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}
const Info = () => {
  // const [name, setName] = useState("");
  // const [nickname, setNickname] = useState("");
  const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });
  const { name, nickname } = state;

  const onChange = (e) => {
    dispatch(e.target);
  };
  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름: {name}</b>
        </div>
        <div>
          <b>닉네임: {nickname}</b>
        </div>
      </div>
    </div>
  );
};

export default Info;

- reduce 함수

//numbers 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환함.
numbers.reduce((a, b)=> a+b);

 

- useMemo() : 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식.

- useCallback(): 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아질 때 최적화해주는 함수로, 컴포넌트가 처음 렌더링될 때만 함수를 생성함.

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

const getAverage = (numbers) => {
  console.log("평균값 계산 중");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};
const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const inputEl = useRef(null);

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

  const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
    inputEl.current.focus();
  }, [number, list]);
  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <div>
        <input value={number} onChange={onChange} ref={inputEl} />
        <button onClick={onInsert}>등록</button>
        <ul>
          {list.map((value, index) => (
            <li key={index}>{value}</li>
          ))}
        </ul>
        <div>
          <b>평균값:</b> {avg}
        </div>
      </div>
    </div>
  );
};

export default Average;

 

 

- useRef() : 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해줌.(ex. 포커싱) + 로컬 변수로도 사용이 가능함.(이때, 렌더링과 상관없이 바뀔 수 있는 값으로 쓰임.-> ∴ ref 안의 값이 바뀌어도 컴포넌트가 렌더링되지는 않음!!)