React hook에 대하여

원녕·2022년 12월 4일
0

React hook이란??

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다.
이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다.

함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? )
서로의 장점을 전부다 가지고 있다.
같은 Hook을 여러번 호출할 수 있다.

함수 컴포넌트 몸통이아닌, 몸통 안 복합 실행문의 {}에서는 사용할 수 없다.

javascript의 block scope는, block 외에서 사용할 수 없으므로 ( 지역변수이기 때문에 )
비동기 함수(async 키워드가 붙은 함수)는 콜백함수로 사용할 수 없다.

  1. useState(useState 관련 글 참고)

  2. 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

profile
메타인지하는 개발자

0개의 댓글