방금 만들던 거에서 깨달은 점 2
useEffect 앞에서 변수 선언해야 오류가 안난다.
선언하고 나서 불러야되는 건 당연한거긴 한데, 왠지 헷갈렸다.
useEffect는 랜더링이 다 된 다음에 실행되는 거니까 여기 써도 되나? 하고...
let [num, setNum] = useState(0);
useEffect(()=>{이렇게 useEffect() 앞에 변수를 썼을 떄는 정상적으로 작동하지만,
useEffect(()=>{ })
// 중략
let [num, setNum] = useState(0);이렇게 변수를 나중에 썼을 때는 에러가 난다.
지금보니 너무 당연함
당연히 변수를 모르니까 에러가 나겠지!! useEffect가 HTML 랜더링이 된 이후에 동작하는 것 뿐이지 코드는 원래 위아래로 읽으니까...
좋은 질문이에요! useEffect와 상태 변수 선언(useState)의 순서에 대한 차이를 이해하려면 React의 컴포넌트 초기화 및 렌더링 과정을 알아야 합니다.
핵심 개념
React에서 컴포넌트 함수는 컴포넌트가 렌더링될 때 실행됩니다. 컴포넌트 함수는 일반적인 함수처럼 위에서 아래로 순차적으로 실행되며, React 훅(useState, useEffect 등)도 이 규칙을 따릅니다.
useState의 역할
useState는 컴포넌트 함수가 처음 실행될 때, 상태를 초기화하고 React 내부적으로 상태를 관리하는 메커니즘을 제공합니다.- 상태가 선언되기 전에 다른 훅(
useEffect등)을 실행하려고 하면 문제가 발생합니다. React는useState를 통해 상태를 설정하기 전까지 해당 상태(num변수)를 알 수 없기 때문입니다.
useEffect의 역할
useEffect는 컴포넌트가 렌더링된 이후에 특정 작업(예: 데이터 패칭, 이벤트 등록, 상태 감시 등)을 수행하도록 예약하는 훅입니다.- 그러나
useEffect가 실행되는 시점과 컴포넌트 함수의 실행 순서는 다릅니다.- 컴포넌트 함수는 위에서 아래로 실행됩니다.
useEffect는 렌더링 후에 실행되지만,useEffect가 참조하는 모든 상태 변수(num등)는 컴포넌트 함수가 실행되며 초기화되어야만 사용할 수 있습니다.
왜 에러가 발생하나요?
useEffect에서 참조하는 num이 선언되기 전에 사용되었기 때문입니다.
예제 코드 분석
useEffect(() => {
console.log(num); // 여기서 num을 사용
});
// 중략
let [num, setNum] = useState(0);num은useState로 선언된 상태 변수입니다.- 하지만
num이useEffect보다 나중에 선언되어 있으므로,useEffect는num이 무엇인지 알 수 없습니다.- 즉,
num이 정의되기 전에 접근하려고 했기 때문에 에러가 발생합니다.
- 즉,
- React 훅(
useState,useEffect)은 반드시 컴포넌트 함수의 최상위에서 정의되어야 합니다. 훅을 순서대로 정의하지 않으면 React가 상태와 훅을 올바르게 연결할 수 없습니다.
React 훅의 순서 규칙
React에서는 다음 규칙을 지켜야 합니다:
1. React 훅은 컴포넌트 함수의 최상위에서 호출해야 합니다.
- 조건문, 반복문, 중첩 함수 내부에서 호출하면 안 됩니다.
- 선언된 순서대로 실행되므로,
useState는 반드시useEffect보다 앞에 있어야 합니다.
- React 훅은 선언 순서가 중요합니다.
- React는 훅의 선언 순서에 따라 상태를 연결합니다.
useEffect가useState로 정의된 상태를 참조하려면,useState가 반드시 먼저 호출되어야 합니다.
수정된 코드
아래처럼 useState를 useEffect보다 먼저 선언하면 정상적으로 동작합니다.
function Detail() {
let [num, setNum] = useState(0); // 상태 변수 선언이 먼저
useEffect(() => {
console.log(num); // 이제 num이 정의되어 있으므로 정상 작동
});
return (
<div>
<p>숫자: {num}</p>
<button onClick={() => setNum(num + 1)}>숫자 증가</button>
</div>
);
}정리
-
useEffect가 렌더링 이후 실행되더라도, 컴포넌트 함수는 위에서 아래로 실행됩니다.- 따라서
useEffect는 반드시useState로 정의된 상태를 참조하기 전에 선언되어야 합니다.
- 따라서
-
React 훅의 순서가 중요한 이유
- React는 훅을 실행 순서대로 연결합니다.
useState로 선언된 상태를 훅에서 참조하려면 반드시 해당 상태가 먼저 정의되어야 합니다.
-
React 훅의 규칙
- 훅은 컴포넌트 함수의 최상위에서만 호출해야 하며, 순서를 지켜야 합니다.
이게 규칙까지 있는 줄은 몰랐다. 하긴 이것도 당연한 거긴 함 ㄱ-...
또 헷갈리지 말라고 정리.
