💻 React Hooks

React Hook들을 간단하게 정리 해보겠다

---

💡useState

컴포넌트에서 값이 바뀔때 관리하는 hook

const [number, setNumber] = useState(0);

👆 useState 함수를 불러오는 코드

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

원래는 배열 형태라 이렇게 해야한다(첫번째 원소는 형재 상태, 두번째 원소는 Setter 함수)

setNumber(number - 1)
setNumber(number + 1)

이런 형식으로 number의 값을 바꿔줄 수 있다.

객체 값을 바꿀 때

setInputs({
  ...inputs,
  [name]: value
});

📌 리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 됩니다.

---

💡 useRef

1. 특정 DOM 사용해야 할때 리액트의 ref를 사용해야 하는데 이때 useRef라는 Hook을 사용한다.
2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할때 사용한다.

---

💡 useEffect

컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리할때 사용한다.

 useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. (마운트)
함수에서 반환하는 값은 cleanup 함수라고 하는데 deps가 비어있으면 컴포넌트가 사라질때 cleanup 함수가 호출된다. (언마운트)

📌 마운트시 의 작업사항

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

📌 언마운트 시의 작업사항

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

deps에 특정값 넣을때

deps에 특정값을 넣으면 컴포넌트가 처음 마운트 될때도 호출되고, 지정한 값이 바뀔 때에서 호출된다.

 useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, [users]);

---

💡 useMemo

성능 최적하를 위해 연산된 값을 재사용 하고 싶을 때 사용한다.

const count = useMemo(() => countActiveUsers(users), [users]);

첫번째 파라미터에는 연산을 정의하는 함수를 넣어주고 두번째 파라미터에는 deps 배열을 넣어준다. 이 배열안에 넣은 값이 바뀌면 새로 연산을 해주고 안바뀌면 값을 재사용한다.

---

💡 useCallback

useMemo는 특정 값을 재사용 하는 것이고, useCallback은 특정 함수를 재사용해 성능 최적화를 시킬 때 사용한다.

기존 onCreate

const onCreate = () => {
  const user = {
    id: nextId.current,
    username,
    email
  };
  setUsers(users.concat(user));

  setInputs({
    username: '',
    email: ''
  });
  nextId.current += 1;
};

useCallback 사용한 onCreate

const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  }, [users, username, email]);

📌 함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다!

---

💡 React.memo

컴포넌트의 props가 바뀌지 않았을때 리랜더링을 방지하는 함수

import React from 'react';

const User = React.memo(function User({ user, onRemove, onToggle }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
});

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default React.memo(UserList);

👆 첫번째 함수는 사용만 하는 함수이기 때문에 const User에 React.memo로 묶어서 재할당 해주었고 UserList는 export 해주기 때문에 마지막에 React.memo해주었다.