React hook이란??
React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리
함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다.
이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다.
함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? )
서로의 장점을 전부다 가지고 있다.
같은 Hook을 여러번 호출할 수 있다.
함수 컴포넌트 몸통이아닌, 몸통 안 복합 실행문의 {}에서는 사용할 수 없다.
javascript의 block scope는, block 외에서 사용할 수 없으므로 ( 지역변수이기 때문에 )
비동기 함수(async 키워드가 붙은 함수)는 콜백함수로 사용할 수 없다.
useState(useState 관련 글 참고)
useEffect
렌더링 이후에 실행할 코드를 만들수 있다.
어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다.
// useEffect(실행할 함수, 트리거가 될 변수)
useEffect(() => {
if (data.me === null) {
console.log("Data changed!")
}
return () => console.log("컴포넌트 파괴, 언마운트 됨")
}, [data]);
// data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
그외 react hook 및 이 글의 출처
https://defineall.tistory.com/900