인프런 커뮤니티 질문&답변
작성한 질문수
useState 초기값 질문
작성
·
989
2
선생님 useState 초기값 설정할때
const [like, setLike] = React.useState(() => {
return Number(localStorage.getItem('like')) || 0;
});
이렇게 함수로 넘기면 re-rendering 할 때마다 실행되지 않고
처음 한 번만 실행이 되는 건가요?
이게 그냥 문법이 그런거면 이해하고 넘어가겠는데~
다른 이유가 있는거면
왜 그렇게 되는지 이해가 잘 되지 않아서요 😂
함수로 넘기면 그렇게 되도록 리액트 내부적으로 처리가 되는건지...
( useEffect가 적용이 되는건지)
답변 1
4
진유림
지식공유자
좋은 의문이에요~
알고 계신 것처럼 리액트는 매 렌더링마다 모든 코드를 실행합니다.
const [like, setLike] = useState(비싼초기계산값)
여기서 '비싼초기계산값' 코드가 매 렌더마다 실행되고, 첫 렌더링 이후의 실행값들은 무시됩니다 (이미 업데이트된 state값을 들고 있으니까요).
하지만 아래처럼 함수를 넘기면
const [like, setLike] = useState(() => get비싼초기계산값());
함수인 () => get비싼초기계산값() 은 매 렌더링마다 불리지만 실제 비싼계산은 "get비싼초기계산값"이 실행(call된다고 하죠)되는 첫 렌더링때만 수행합니다.
정리해보면
1. 값으로 바로 초기화하든, 함수로 지연초기화하든 리액트는 매 렌더링마다 모든 코드를 실행
2. 다만 (리액트 문법에 따라) 함수로 지연초기화하면 실제 내부함수 실행은 초기렌더링에만 실행
입니다.