📚Hook이란?
Hook은 React 버전 16.8에 새로 추가되었다. Hook을 사용하면 class를 사용하지 않고도 state와 여러 React의 기능을 사용할 수 있다고 한다.
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이고 class에서는 동작하지 않는다. 대신, class없이 React를 사용할 수 있게 해준다.
그래서, 내가 기존에 작성했던 Recast.ly를 Hook을 이용해서 리팩토링 해보면서 Hook에 대해서 배워보려 했다.
Hook을 사용하기 위해서는 위와 같이 React를 import하면서 {useState}도 함께 import해야 한다.
🍯이제 함수형컴포넌트에서도 Hook을 사용해서 state를 추가할 수 있다!
useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공하고 useState는 인자로 초기 state값을 받는다
또한 하나의 컴포넌트 내에서 state를 여러개 선언할 수도 있다.
🤔그럼 componentDidMount랑 componentDidUpdate는?
React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 동작들을 side effects라고 한다. class컴포넌트에서는 이 side effects가 componentDidMount와 componentDidUpdate등을 통해서 이루어졌다.
하지만 Hook에서는 Effect Hook(useEffect)를 통해서 이루어진다.
useEffect를 사용하기 위해서는 React를 import할 때, useState와 함께 useEffect도 import해줘야 한다.
그런데 문제점이....
렌더링은 Hook을 사용하지 않고 진행한 recast.ly와 똑같이 잘 나오는데 useEffect에서 뭔가 잘못 설정했는지 계속 API요청을 보내서 다운되는 문제가 있다...
특정 값들이 리렌더링 시에 변경되지 않는다면 리액트로 하여금 effect를 건너뛰도록 할 수 있다는 공식문서의 내용을 보고 두번째 인자로 videos를 넘겼는데 계속 API요청을 보내서 금방 다운되어 버린다 ....
Hook에 대해 조금더 공부가 필요해 보인다ㅠㅠㅠ
