state 지연 초기화

React에서 state 지연 초기화란?

useState에 초기값을 전달할 때 해당 값을 항상 생성되지만 react는 첫 번째 렌더에만 그 값을 사용한다. 문자열을 초기값으로 전달할 때 등과 같은 경우에는 문제가되지 않지만 state를 복잡한 값으로 초기화할 필요가 있다. 그런 상황에서 useState의 초기값 자리에 함수를 전달할 수 있따. 그러면 react는 컴포넌트가 마운트 됐을 때만 함수를 호출한다!!

 

 

투두리스트를 작성할 때 아래와 같이 연산을 통한 state 초기 값을 주었다. 

const [todoList, setTodoList] = useState<ITodo[]>(
    JSON.parse(localStorage.getItem("todolist") ?? "[]"),
);

 

지금은 그렇게 엄청 복잡한 연산은 아니지만 더 복잡한 연산을 하게 될 경우 컴포넌트 렌더링 시 매번 실행하게 된다. 

 

const [todoList, setTodoList] = useState<ITodo[]>(
   () => JSON.parse(localStorage.getItem("todolist") ?? "[]"), 
);

이렇게 콜백으로 넘겨주어 최초에 한 번만(함수가 마운트 됐을 때 한 번만) 실행하게 만들어줄 수 있다.