useLayoutEffect란?useLayoutEffect와 useEffect는 거의 비슷한 역할을 한다.useEffect(() => { //...}, [state]) useLayoutEffect(() => { //...}, [state]) 구조도 비슷하고 기능도 비슷한데 다른점은 effect가 실행되는 시점이다.useEffect의 경우 화면이 업데이트된 이후에 effect가 실행된다.useLayoutEffect는 effect 실행 이후에 화면이 업데이트가 된다.useLayoutEffect를 통해 생기는 이점은 effect를 먼저 실행하기 때문에 사용자가 보는 UI를 보다 정교하게 보일 수 있다.코드로 알아보기'use client';import { useEffect, useLayoutEffec..

useMemo 란?useMemo는 컴포넌트를 최적화(optimization) 하는 리액트 훅이다.컴포넌트 최적화의 훅은 useMemo 말고 useCallback 도 존재한다.useMemo에서 Memo는 Memoization 을 의미한다Memoization은 동일한 값을 리턴하는 함수를 반복적으로 호출하는 경우, 처음의 값을 메모리에 저장해서 함수를 호출할때 마다 메모리의 값을 불러오는 기법이다. 값을 캐싱해서 불러오는 것이라고 생각하면 된다.함수형 컴포넌트가 렌더링 되는 과정에서 생기는 문제함수형 컴포넌트는 렌더링 될때 마다 Component 함수를 호출하기 때문에 모든 변수를 초기화하는 과정을 겪는다.fuction calculate(){ return 999}function Component() { co..

useRef 알아보기useRef는 다음과 같이 사용된다.const ref = useRef(value);// ref => { current. : value}인자로 넣어준 값이 current에 존재하게된다.const ref = useRef("메가커피"); // ref => { current. : "메가커피"}ref.current = "스타벅스" // ref => { current. : "스타벅스"}언제 어디서든 값이 변경이 가능하다.제일 중요한것!ref 는 unmount 되기 전까지 컴포넌트 전생에 주기에 유지된다.useRef는 언제 사용하는가?첫번째. 저장 공간의 용도state는 값이 변경되면 리렌더링 되어 컴포넌트 내부 변수들이 초기화가 된다. 반면 ref는 값이 변해도 리렌더링 되지 않아 화면의 불..