React - Lazy Initalize State / TIL - 16
게으른 초기 상태값
예제 코드
const [keyword, setKeyword] = useState(() => {
return window.localStorage.getItem('keyword');
});
const [keyword, setKeyword] = useState(window.localStorage.getItem('keyword'));
두 코드의 차이
- 두개의 코드의 차이는
useState
변수를 직접 넣는가와 즉시실행 화살표 함수를 넣는지에 차이가 있다.
Lazy initial state
useState
에 직접적인 값 대신에 함수를 넘기는 것을 게으른 초기화(Lazy initial state)라고 한다.
언제 사용하는가
- 공식 문서에 따르면 이러한 게으른 초기화를 초기 값이 복잡한 연산을 포함할 때 사용하라고 명시되어 있음.
state
내부에 함수는state
가 처음 만들어질때만 실행되고, 이후 리렌더링이 된다면, 함수의 실행은 무시된다.
실행순서적인 측면에서
useState
의 초기값은 처음 렌더링 될 때 사용되며, 이는keyword
의 초기값을 만든다.setKeyword
함수가 실행되면, 전체 함수가 다시 실행되며,keyword
의 값을 업데이트 한다.- 따라서, 리렌더링이 발생할 때 마다 로컬스토리지의 값을 읽어오지만, 연산이 복잡한 초기값은 최초 렌더링시에만 해당 값이 필요하므로, 이는 필요없는 연산을 계속해서 하게 되는 것이다.
단점
- 비록 초기값을 설정하는 함수가 게으른 초기화로 인해 한번만 호출되지만, 여전히 함수를 만드는 비용이 존재한다. 그리고 함수를 만드는 비용이 보통 변수를 생성하거나 단순히 값을 넘기는 비용보다는 크다.
게으른 초기값을 사용해야 하는 자세한 상황
- 앞선 예와 같이
localStorage
의 접근,map
,filter
,find
등의 배열을 조작하는 것들이 그 예가 될 수 있다. 일반적으로, 함수를 통해서 값을 초기값을 설정해야 한다면 게으른 초기화를 하는게 좋을 수도 있다.
Author And Source
이 문제에 관하여(React - Lazy Initalize State / TIL - 16), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jujihong2/React-Lazy-Initalize-State-TIL-16저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)