useState 안에 함수를 넘기면 왜 반복실행을 방지할 수 있나... - 인프런

만들면서 배우는 리액트 : 기초

33 setState 더 알아보기- 함수, 지연초기화

useState 안에 함수를 넘기면 왜 반복실행을 방지할 수 있나요?

작성

1.2K

해당 영상 강의 초반에

const [counter, setCounter] = React.useState(jsonLocalStorage.getItem('counter'))

위 코드를 수정하시면서 카운터의 useState( ) 초기값에 함수 형식으로 쓰면, App 이 렌더링 될 때마다 local storage 에 접근하는 걸 방지할 수 있다고 설명하신 걸로 이해했습니다.

왜 함수 형식 () => { return ... } 으로 useState 초기값에 코드를 쓰면 리액트가 반복실행을 안하는(?) 건지 궁금합니다!

감사합니다 :)

답변 2

지식공유자

오 현이님 감사합니다 ㅎㅎ 딱 정확한 문서예요~

더 궁금하다면 Kent의 이 글을 참고해보시는것도 추천드려요.

https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates

요약해보면

- 함수를 통해 state를 지연초기화하면 매 렌더링마다 함수를 생성하긴 한다 (js엔진이 매우 빠르기 때문에 매번 함수 생성하는건 노이슈)

- 다만 함수를 실행시키는건 값이 필요한 순간(즉 초기렌더링 순간)뿐이기 때문에 고비용 연산은 초기 한번만 실행된다

입니다

해당질문은 https://ko.reactjs.org/docs/hooks-reference.html#lazy-initial-state 여기서 설명하고있습니다. (리액트 공식문서)

참고 해보시면 좋을것 같아요 :)