React Hooks 코드 사용 예시모음

useState

//선언
const [user, setUser] = useState({
  username: '',
  email: ''
});
//사용부

console.log(user);

const {name, value} = e.target;

setUser({

...user,

[name]: value

});

useEffect

마운트, 언마운트가 있음

마운트는 새로 홈페이지 화면이 열리거나 값이 바뀔때마다 리렌더링 됨
언마운트는 값이 바뀌거나, 해당 컴포넌트가 사라질 때 호출됨
뒤에 []는 deps로 함수내에서 사용되는 것들을 적어줘야 함(dependencies)
deps의 값이 바뀌면, 리렌더링 전에 unmount가 먼저 실행되고, 그 다음 리렌더링이 되고 mount가 실행됨

  useEffect(() => {
    console.log('user 값이 설정됨'); // mount
    console.log(user); // mount
    return () => { // unmount
      console.log('user 값이 바뀌기 전');
      console.log(user);
    };
  }, [user]);

useMemo

계산된 값이 변경되지 않을 시 재사용하기 위해 사용

function countActiveUsers(users) {
  console.log('활성 사용자를 세는 중...');
  return users.filter(user => user.active).length;
}
//사용부

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

첫번째 매개변수는 호출하는 함수형태로 들어가야 하고, []안에 역시나 사용된 deps를 넣어줌 deps가 바뀌면 값을 새롭게 다시 계산함

useRef

useRef의 쓰임새는 두가지가 있음

1. 어떤 input과 같은 것들의 reference를 가지고옴
   예시

const hi = useRef();
<input ref={hi}/>
console.log(hi.current.value);

이런식으로 코드를 짜주면, input의 값이 바뀌면 console창에도 값이 찍힘 만약 값이 초기화 되고 해당 input에 포커스를 주고 싶으면
hi.current.focus()를 사용하면 됨

2. 리렌더링 되도 유지되는 값을 변수에 넣어주고 싶을 때
   예시

const a = useRef(4);
//사용부

const user = {

id: a.current,

}

a.current +=1

예를 들면 데이터 입력시마다 id값을 1추가하기 위해 사용

useCallback

useMemo와 비슷하지만, deps의 변화에 따라 값을 재사용할지 다시 계산할지를 따지기보다는 함수를 다시 실행할지 아닐지에 쓰임

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

[]은 역시 deps 부분인데 이 배열안의 값이 변경이 일어나면 useCallback안의 함수가 실행되며 리렌더링 발생 그때, setUsers안에 users => 를 사용하면서, useState를 함수를 통해 값을 바꿔주게 되므로, 따로 deps안에 바뀌는 값을 넣어주지 않아도 됨

useReducer

useState와 마찬가지로 상태를 변경, 업데이트 해주는 Hooks

리듀서 함수를 따로 만든 다음, state와 action을 매개변수로 받고, action에 필시 들어가는 type에 대해 어떤식으로 state를 변경해 변경된 상태를 반환해줄지를 기술하는 Hooks 이 과정에서 type은 바로 위에도 적었지만 반드시 필요

// 선언
function reducer(state, action) {
  switch(action.type){
    case '~~':
      // do Something
    default:
      // do Something
  }
}

이렇게 만들어진 리듀서 함수를 useReducer를 통해 사용

const [number, dispatch] = useReducer(reducer, 0);

여기서 number는 리듀서에 의해 바뀌는 상태값이고, dispatch는 리듀서를 호출해주는 값인데, 반드시 ()안에 액션객체로 안에 type을 넣어줘야 함 이 액션객체를 통해 리듀서를 발생시킴 그리고 useReducer(reducer, 0); 부분에서 0은 number의 초기값, 즉 상태의 초기값을 의미

<div>
  <h1>{number}</h1>
  <button onClick={() => dispatch({ type: 'increase' })}>+1</button>
  <button onClick={() => dispatch({ type: 'decrease' })}>-1</button>
</div>

이런식으로 dispatch를 통해 액션을 발생시키면 reducer함수에서 해당 type에 맞게 state를 변경시켜줌

function reducer(state, action) {
  switch (action.type) {
    case 'increase': {
      return state + 1;
    }
    case 'decrease': {
      return state - 1;
    }
    default:
      throw new Error('Unhandled action');
  }
}