useState 초기값 질문

Question

선생님 useState 초기값 설정할때 const [ like , setLike ] = React . useState (() => { return Number ( localStorage . getItem ( 'like' )) || 0 ; }); 이렇게 함수로 넘기면 re-rendering 할 때마다 실행되지 않고 처음 한 번만 실행이 되는 건가요? 이게 그냥 문법이 그런거면 이해하고 넘어가겠는데~ 다른 이유가 있는거면 왜 그렇게 되는지 이해가 잘 되지 않아서요 😂 함수로 넘기면 그렇게 되도록 리액트 내부적으로 처리가 되는건지... ( useEffect가 적용이 되는건지)

진유림 · Answer

좋은 의문이에요~ 알고 계신 것처럼 리액트는 매 렌더링마다 모든 코드를 실행합니다. const [like, setLike] = useState(비싼초기계산값) 여기서 '비싼초기계산값' 코드가 매 렌더마다 실행되고, 첫 렌더링 이후의 실행값들은 무시됩니다 (이미 업데이트된 state값을 들고 있으니까요). 하지만 아래처럼 함수를 넘기면 const [like, setLike] = useState(() => get비싼초기계산값()); 함수인 () => get비싼초기계산값() 은 매 렌더링마다 불리지만 실제 비싼계산은 "get비싼초기계산값"이 실행(call된다고 하죠)되는 첫 렌더링때만 수행합니다. 정리해보면 1. 값으로 바로 초기화하든, 함수로 지연초기화하든 리액트는 매 렌더링마다 모든 코드를 실행 2. 다만 (리액트 문법에 따라) 함수로 지연초기화하면 실제 내부함수 실행은 초기렌더링에만 실행 입니다.