React_43_리액트 Hook_규칙

지원·2023년 10월 26일

React

목록 보기
44/71
post-thumbnail

리액트 Hook의 규칙

Hook을 사용할 떄 지켜야할 것들
Rating.js 파일을 수정하면서 알아보기

1. 반드시 리액트 컴포넌트 함수나

커스텀 Hook 함수 안에서 실행되어야 한다.

예) 리액트 Hook을 컴포넌트 함수 밖에서 사용하면 오류가 난다.

리액트 Hook은 컴포넌트 함수 안에서 사용하도록 만들어 진 것이기 때문에
반드시 컴포넌트 함수 안에서만 사용해야한다.

2. 반드시 함수의 최상위에서 실행해야한다.

(반복문이나 조건문안에서 사용하면 안된다.)

오류 메세지를 확인해보면
리액트 Hook은 반복문에서 사용할 수 없고
리액트 Hook은 모든 렌더링마다 같은 순서대로 실행되어야 한다.

앞에서 리액트 개발자도구로 State를 확인할 때
App 컴포넌트의 State를 살펴보면 State라고만 나와있다.

리액트에서 Hook을 실행할 때
우리가 이름을 정하는 것은 아니기 때문에
리액트는 Hook이 실행된 순서를 통해서 기억하게 된다.

그래서 여러 State를 쓰게되면 실행한 순서대로 값을 연결해두는 것이다.

0개의 댓글