모던 리액트 Deep Dive - useState, useEffect

useState

• 내부에 선언된 함수가 함수의 실행이 종료된 이후에도 지역변수인 값을 계속 참조할 수 있도록 리액트는 클로저를 활용하는것을 짐작할 수 있음.

게으른 초기화

• useState에 변수 대신 함수를 넘기는 것을 게으른 초기화라고 한다.

const [count, setCount] = useState(
	() => Number.parseInt(window.localStorage.getItem(cacheKey))
)

• useState의 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용 
• 해당 함수는 오로지 state가 처음 만들어질때만 사용됨. (리렌더링 시 해당 함수는 무시됨)
• 주로 localStorage, sessionStorage에 대한 접근. map, filter, find같은 배열에 대한 접근 혹은 초깃값 계산을 위해 함수 호출이 필요할 때와 같이 무거운 연산을 포함해 실행 비용이 많이 드는 경우.

useEffect

• useEffect는 state와 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수라고 볼 수 있음
  • 렌더링 할때마다 의존성에 있는 값을 보면서 이 의존성 값이 이전과 다른게 하나라도 있으면 부수 효과를 실행하는 평범한 함수
• useEffect의 effect는 부수효과란 의미. 즉, 컴포넌트가 렌더링된 후에 어떠한 부수효과를 일으키고 싶을때 사용하는 훅

클린업 함수의 목적

useEffect(()=> {
	const handleMouseClick = () => console.log(counter);
    
    window.addEventListener('click', handleMouseClick);
    // 클린업
    return () => window.removeEventListener('click', handleMouseClick);
},[])

• 클린업 함수는 이전 상태를 청소해 주는 개념
• 컴포넌트가 언마운트 되면 더이상 해당 로직은 사용할 필요가 없음. 이벤트가 등록되거나 이전에 비동기식으로 실행된 함수가 있는 경우 컴포넌트가 언마운트된 후에도 해당 로직은 메모리를 계속 점유하고 있음.
  • 리사이즈, 스크롤과 같은 이벤트는 해제가 되지 않았기 때문에 다른곳에서 해당 이벤트가 실행되면 지속적으로 사용됨. => 메모리 누수 악화
  • 언마운트 되어 상태가 업데이트될 필요없는 데이터가 업데이트가 될 수도 있음.

• 의존성 배열은 이전값과 현재 값을 얕은 비교한다.
• useEffect의 함수는 대부분 익명 함수를 넘겨준다. 하지만 함수가 복잡해 지는 경우 기명 함수로 바꿔주는 것이 좋다.
• useEffect 내에서 사용할 부수 효과라면 내부에서 만들어서 정의해서 사용하는 편이 훨씬 도움 됨.