[React] 리액트 Hooks

< Hook >

👉 Hook은 React 버전 16.8부터 추가됨.
👉 Hook을 이용하면 기존 클래스 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있음.

💟 Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수.
Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것.

- useState

• 가장 기본적인 Hook으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌.
• useState 사용 시 반환되는 배열은 [state 값, state 설정 함수]
• const [value, setValue] = useState(0); 과 같이 사용함.
• 윗줄의 예시와 같이 useState 함수의 파라미터에는 상태의 기본값을 넣어줌.
  즉, 우리는 저 상황에서의 기본값을 0으로 설정하겠다는 말이 됨.
• if) 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용하면 됨.

📌 사용사례 )

어떤 글에 좋아요를 누를 경우,

const [value, setValue] = useState(0); // 좋아요 수의 기본값을 0으로 설정
return (
  <div>
    <p> 좋아요 수: {value} </p>
    <button onClick={() => setValue(value + 1)}>좋아요</button>
  </div>
);

이런식으로 좋아요를 누를 때마다 setValue를 이용하여 value값을 1씩 증가시켜주어 
좋아요 수가 증가하도록 할 수 있음.

- useEffect

• 이 친구는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
• 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태로 보아도 무방함.
• useEffect(() => { 렌더링 될 때 수행될 작업 });
• useEffect는 컴포넌트가 렌더링 될 때마다 수행되므로, 만약 컴포넌트가 마운트 될 때만 실행하고 싶다면 useEffect 함수의 두번째 파라미터로 빈 배열을 넣어주면 됨.
  useEffect(() => { console.log('마운트 될 때만 실행.');}, []);
• 이번엔 특정 값이 업데이트 될 때만 실행하고 싶다면, 함수의 두번재 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됨.
  useEffect(() => { console.log(name);}, [name]);
  • 배열 안에는 useState를 통해 관리하고 있는 상태를 넣어줘도 되고, props로 전달받은 값을 넣어주어도 됨.
• if) 컴포넌트가 언마운트 되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 함.

📌 사용사례 )

id를 입력받을 경우

const [id, setId] = useState(''); // id의 기본값을 빈 문자열로 셋팅
useEffect(() => {
  alert('id를 입력해주세요');
}

id 입력받는 컴포넌트가 마운트 될 때만 사용자에게 id를 입력하라는 알림창이 보여짐.

- useContext

• 이 hook을 사용하면 함수형 컴포넌트에서 Context를 보다 더 쉽게 사용할 수 있음.
• useContext는 쉽게 말하면, 내게 필요한 props를 글로벌하게 사용할 수 있게 도와준다고 말할 수 있음.
• 우리는 리액트로 작업하면서 props를 정말 많이 사용하게 되는데, 부모 > 자식 > 또 다른 자식 등등 2중, 3중으로 props를 넘겨받아야 하는 컴포넌트들이 존재한다면 관리에 있어서 시간 소요가 커짐.
• 따라서 props가 2중 3중으로 props가 넘겨받아져야 하는 상황에 사용하기 좋음.
• createContext({ 필요한 변수 혹은 함수 });

📌 사용사례 ) 

화면에 검정색 사각형을 띄우고 싶을 경우,

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px';
    height: '24px';
    background: theme
  };
  return <div style={style}>;
};

이렇게 하면 브라우저에 가로, 세로가 24px인 검정색 정사각형이 나타나게 됨.

- useReducer

• useState보다 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook.
• Redux에서 reducer라는 개념을 다루게 되므로, Redux 공부가 추가적으로 필요할듯 !
• 우선, 리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달 받아 새로운 상태를 반환하는 함수임.
• 리듀서 함수에서 새로운 상태를 만들 때에는 아래와 같이 꼭 불변성을 지켜주어야 함.

function reducer(state, action) {
  return {...};
}

• Redux에서는 액션 객체에 어떤 액션인지 알려주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액션 객체는 꼭 type을 지니고 있을 필요가 없음.
  게다가, 객체가 아니라 문자열 / 숫자여도 상관 없을 무.

ex)
function reducer(state, action) {
  // action.type 에 따라 다른 작업 수행
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      // 아무것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b> 입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};

요런 느낌.

• useReducer의 첫번째 파라미터로는 리듀서 함수, 두번째 파라미터로는 해당 리듀서의 기본 값을 넣어줌.

• 이 hook을 사용했을 때 받아오는 state 값은 현재 가리키고 있는 상태, dispatch는 액션을 발생시키는 함수임.

• 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 점.

• 사용이유)

  • React는 state를 변경하면 바뀐 부분을 새로 그리기 위해 모든 컴포넌트를 다시 실행한다. 스케일이 커지는 프로젝트 일수록 최적화를 신경써야한다.(코드를 체계적으로 관리 필요...)
  • useReducer를 사용하면 코드량이 늘어나지만 더 체계적이다.

📌 사용사례 )

여러 개의 input (useState)를 다뤄야 할 때,
function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

const Info = () => {
  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>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

기존에는 
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');
이렇게 useState를 여러번 사용해서 관리했었다면, useReducer로 한번에 관리 가능.

- useMemo

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있음.
• if) 리스트에 숫자들을 추가하면 해당 숫자들의 평균을 나타내는 함수형 컴포넌트가 있을 때, 숫자를 추가하기 전에 input내용을 수정할 때도 평균을 구하는 함수가 실행됨.
  렌더링 할 때마다 계산 하는 것은 낭비 !
• const avg = useMemo(() => getAverage(list), [list]); 이렇게 useMemo를 이용하면, 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 만약에 원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 다시 사용하는 방식으로 작업을 최적화 할 수 있음.

📌 사용사례)

콘솔에 숫자를 변경할 때는 숫자 변경 문구만 뜨고, 문자를 변경할 때는 문자 변경만 뜨게 하고 싶으면,

const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};

const ShowState = ({ number, text }) => {
  const showNumber = useMemo(()=>getNumber(number),[number]);
  const showText = useMemo(()=>getText(text),[text]);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

이렇게 해주면 됨.
사용법은 생각보다 간단 !

- useCallback

• useMemo와 상당한 비슷한 함수로, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용
• 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있음.
• 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 컴포넌트가 리렌더링 될 때마다 새로 생성되는 함수들의 부분을 최적화 해주는 것이 좋음.
• useEffect와 같이 두번째 파라미터에 빈 배열을 넣을 경우 컴포넌트가 렌더링 될 대 단 한번만 함수가 생성되고, 배열 안에 조건을 넣으면 그 조건에 해당될 때마다 함수가 생성됨.

const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성

• 함수 내부에서 기존의 상태 값을 의존 (조회 시 필요 등) 해야 할 때는 꼭 두번째 파라미터 안에 포함시켜 주어야 함 !
• useCallback은 결국 useMemo에서 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 Hook.
• 숫자, 문자열, 객체처럼 일반 값을 재사용하기 위해서는 useMemo를, 그리고 함수를 재사용하기 위해서는 useCallback을 사용하라고 하심.

📌 사용사례)

리스트에 숫자를 입력하면 리스트 값들의 평균을 구해주는 코드 작성 시, 
onChange와 onInsert에 useCallback을 이용하여 각각 해당하는 조건에서만
생성 되도록 설정

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성
  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
    },
    [number, list]
  ); // number 혹은 list 가 바뀌었을 때만 함수 생성

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

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

- useRef

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해줌.
• useRef를 사용하여 ref를 설정하면, useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리키게 됨.
• state가 변경되어도 리렌더링 되지 않아서 굳이 변수 선언 하지 않고 얘 사용하는 거 !
• 컴포넌트 로컬 변수(렌더링이랑은 관계 없이 바뀔 수 있는 값)를 사용해야 할 때도 useRef를 활용.

const RefSample = () => {
  const id = useRef(1);
  const setId = (n) => {
    id.current = n;
  }
  const printId = () => {
    console.log(id.current);
  }
  return (
    <div>
      refsample
    </div>
  );
};

• 근데 이렇게 넣는 ref 안의 값은 바뀌어도 컴포넌트가 렌더링 되지 않으므로, 렌더링과 관련되지 않은 값을 관리할 때만 이러한 방식으로 코드 작성하는 것이 좋음.

📌 사용사례)

등록 버튼을 눌렀을 때 포커스가 인풋 쪽으로 넘어가도록 하려면,
const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');
  const inputEl = useRef(null); // null로 셋팅

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []);
  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
      inputEl.current.focus(); // 포커스 넘어가도록 설정
    },
    [number, list]
  ); 

참고 사이트

Hook의 개요
리액트의 Hooks 완벽 정복하기
useContext란?