리액트 Hooks 정리

📌 useRef

✔ javascript에서 특정 Dom을 선택하는 역할 (getElementById, querySelector)
- Ref객체의 .current 값이 설정한 DOM을 가르킴

const userInput = useRef();
retrun(
<input ref={userInput} />
)

✔ 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리
- useRef로 관리하는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않고, 설정 후 업데이트 된 값을 바로 조회 할 수 있다.
- useRef()에 파라미터를 넣어주면 해당 값이 .current의 기본값이 됨

const nextId = useRef(2);
console.log(nextId.current); // 2

📌 useEffect

✔ 컴포넌트가 브라우저에 처음 나타날 때, 사라질 때, 특정 props가 바뀔때 특정 작업을 처리
- useEffect 안에서 사용하는 상태나 props가 있다면 deps에 넣어주어야 함(필수)
- deps[]가 비어있을 경우 처음 한 번만 실행, deps에 파라미터 값을 넣어줄 경우 파라미터값이 업데이트 될때마다 실행

useEffect(() => {
    // 처음 나타날 때 작업할 내용 작성(componentDidmount)
    return () => {
   // 컴포넌트가 사라질 때 작업할 내용 작성(componentWillUnmount)
    };
  }, [/*deps 입력부분(componentDidUpdate)*/]);

📌 useMemo

✔ 특정 결과값을 재사용할때 사용
- 첫번째 인수에는 함수, 두번째 인수에는 deps를 넣어준다.
- deps 값이 바뀔때만 함수가 실행, deps 값이 동일할경우 이전의 값을 재사용

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

📌 usecallback

✔ 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용
- 함수 안에서 사용되는 상태, props가 있다면 deps 안에 필수로 포함시켜야 함

const onRemove = useCallback(
    id => {
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );

📌 React.memo

✔ 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정
- 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지

export default React.memo(CreateUser);

📌 useReducer

✔ 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
- 컴포넌트 바깥에 작성 & 다른 파일에 작성 후 불러와서 사용 가능

1. reducer 함수 정의
(현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수)

function reducer(state, action) {
  switch(atction.type){
  	case 'CHANGE':
  		return(...)
  	case 'REMOVE':
  		return(
        	state.list.filter((li) => li.id !== action.id)
        )
  	default:
  		return (...)
}

reducer에서 반환하는 상태 -> 컴포넌트가 지닐 새로운 상태
action : 업데이트를 위한 정보, 주로 type 값을 지닌 객체 형태로 사용
switch문을 이용해서 각 케이스마다 작업할 내용을 작성

2. useReducer 사용하기

const [state, dispatch] = useReducer(reducer, initialState);

state : useReducer를 통해 저장된 변수, 컴포넌트에서 사용할 수 있는 상태
dispatch : 액션을 발생시키는 함수
useReducer의 첫번째 파라미터는 reducer함수, 두번째 파라미터는 초기 상태값
주로 initialState라는 객체에 초기 정보를 담고 useReducer 에게 전달한다.

3. dispatch 사용하기

const onRemove = (id) => {
  dispatch({ 
  	type: 'REMOVE', 
    id
  })
}

❓ useReducer와 useState의 차이
- useState: 컴포넌트에서 관리하는 값이 단순, 숫자, 문자열 , boolean 값
- useReducer: 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡

📌 useContext

✔ 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 (reducer와 함께 사용)

1. 새로운 context 만들기
- createContext의 파라미터 값은 Context를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본 값
- export로 내보내고 다른 컴포넌트에서 import 하여 사용

export const UserDispatch = React.createContext(null);

2. Provider 컴포넌트로 감싸주면서 context 값 설정(value)
- Provider로 감싸진 내부 컴포넌트 어디에서든 context 값 조회 가능

<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>

3. useContext로 UserDispatch context 값(dispatch) 조회해서 사용하기

import { useContext } from 'react';
import { UserDispatch } from './App';
const dispatch = useContext(UserDispatch);