TIL - React 함수형과 훅(hooks)에 대해서

useState : 상태관리

const [todos, setTodos] = useState();

useEffect : 렌더링 이후 사이드 이펙트 처리 (login, fetch etc)

• 여러번 쓸 수 있음
• (리액트 공식문서에 따르면) 비동기 함수의 경우 가져와서 써라! (직접 쓰지 말 것)

useEffect(()=> ... ,[])

2번째 인자에 빈 배열을 넣으면 초기에만 콜백을 실행한다.
2번째 인자인 배열에 state를 넣으면 그 state의 변화를 관찰하여 콜백이 실행된다(옵저버 패턴인듯?)

커스텀 훅

별도의 재사용 가능한 함수로 분리해서 쓰기 위해 사용.
이름을 use~~로 하면 리액트가 알아서 useEffect를 적절하게 실행해준다.

useFetch = async (callback, url) => {
  const response = await fetch(url);
  const data = await response.json();
  setTodos([...data]);

  useEffect(()=>{});