1. 탐구

1. useState

: 함수 형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅

import { useState } from 'react'
const [state,setState] = useState();

useState의 인수로는 사용할 state의 초기값을 넘겨준다. 아무런 값을 넘기지 않으면 초기값은 undefined이다. useState훅의 반환 값은 배열이며, 배열의 첫 번째 원소로 state값 자체를 사용할 수 있고, 두 번째 원소인 setState함수를 사용해 해당 state의 값을 변경할 수 있다.

함수형 컴포넌트는 매번 함수를 실행해 렌더링이 일어나고, 함수 내부의 값은 함수가 실행될 때마다 다시 초기화된다. 그럼에도 useState 훅의 결과값은 함수가 실행되도 그 값을 유지하는 이유는 closure를 이용했기 때문이다.

게으른 초기화

: useState에 변수 대신 함수를 넘기는 것

useState는 초기값으로 초기화를 단 한 번만 실행하기 때문에, 이 게으른 초기화 함수는 오로지 state가 처음 만들어질 때만 사용된다.

무거운 연산이 요구될 때 사용을 권장한다.

1. localStorage, sessionStorage에 대한 접근
2. map, filter, find같은 배열에 대한 접근
3. 초기값 계산을 위해 함수 호출이 필요할 때

2. useEffect

: state와 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수

• 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수효과를 만드는 매커니즘

클린업 함수

: useEffect는 콜백이 실행될 때마다 이전의 클린업 함수가 존재한다면 그 클린업 함수를 실행한 뒤에 콜백을 실행한다. 이렇게 함으로써 특정 이벤트의 핸들러가 무한히 추가되는 것을 방지할 수 있다.