[react/공부] Hook이 뭐야?

Hook 알아보기

추가로 보면 좋을 링크

 

---

       Hook? 

Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.

react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.

 

 

---

       State Hook 

전 게시글에서 얘기한 바 있는 그 state가 맞다.

State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.

전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.

const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')

상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.

 

 

---

       Effect Hook 

Effect를 통해 컴포넌트는 DOM, 네트워크 등 외부 시스템에 연결하고 동기화할 수 있다.

useEffect('콜백함수', '배열로 된 비교값')

비교값과 비교해서 변경 사항이 생겼을 때 콜백함수를 실행한다.

즉 비교값이 빈 배열인 경우, 최초 1회만 실행되고 콜백함수는 더이상 진행되지 않는다. (더이상 비교할 수 없기 때문)

이런식으로 반환값이 없는 함수를 void 함수라고 부른다. (addEventListener도 마찬가지)

useEffect 안에 들어가는 콜백함수를 effect 함수 라고 부르기도 한다.

 

 

---

       Custom Hook 

destructuring을 통해 custom hook을 만들 수 있는데,

//파일 1
const [custom, setCustom] = useState()

export { custom, setCustom } //값, 함수 보내주기


//파일 2
import { custom, setCustom } from '파일 1' //값, 함수 받기

const [custom, setCustom] = useCustom()

이런식으로 넣어주면 결국 똑같이 사용할 수 있다.

useState를 선언한 파일에서 상태 변화하는 함수를 세워준 후,

같은 규칙을 다양한 곳에 사용해야할 때 사용하면 좋을 거 같다.

 

** 이때, 같은 custom, setCustom을 여러군데 쓴다고 해서 그 값들이 함께 동기화되지 않는다.

아래와 같은 상황에서 둘은 동기화 되지 않고 따로 작동한다.

//파일 2 //위 예시와 연결
import { custom, setCustom } from '파일 1' //값, 함수 받기

const [custom, setCustom] = useCustom()
const [custom, setCustom] = useCustom2()

 

 

---

비슷한 내용으로 조금씩 보완해서 추가하는 중인데,

반복해서 공부하고 정리할 수록 더 명확하게 이해되는 것 같아서 좋다!