130. [React] useState 사용하여 상태값 초기화 TIL 23.02.17

---

 

useState 사용하여 상태값 초기화

todolist를 만들던 중

const [todos, setTodos] = useState(storage());

const [todos, setTodos] = useState(() => storage());
(축약: const [todos, setTodos] = useState(storage);

코드 차이가 너무 헷갈렸음 그래서 구글링을 해봄

 

React에서 useState를 사용하여 상태값을 초기화하는 방법은 크게 두 가지 있음

1. 함수 호출을 통해 초기값을 전달하는 방법
const [todos, setTodos] = useState(storage())
위 코드와 같이 함수의 반환값을 초기값으로 전달하는 방법.
이 방법은 컴포넌트가 렌더링 될 때마다 함수가 실행되고, 초기값이 업데이트됨

2. 함수를 반환하는 콜백 함수를 전달하여 초기값을 계산하는 방법
const [todos, setTodos] = useState(() => storage())
위 코드와 같이 콜백함수를 사용하여 초기값을 걔산하는 방법
이 방법은 컴포넌트가 처음 렌더링될 때만 실행됨, 그 이후에는 다시 실행되지 않음

두 가지 모두 동일한 결과를 만듦. 렌더 속도, 성능 차이도 크게 나지 않음.
하지만 만약 초기값을 계산하는 작업이 매우 무거운 작업이면, 함수를 반환하는 콜백 함수(2번째 방법)를 사용하는 것이 초기 렌더링 성능을 향상 시킬 수 있음.