Myalog/Study

[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 Day 6

myalog 2024. 9. 2. 07:43

 

사전직무교육 Day6

 

오밀조밀 모여있는게 귀엽다..

 

오늘은 사전직무교육 여섯째날이다

얼른 퇴원해서 오프라인으로 교육 듣고싶다😭😭

⚙️ React Hooks

 

useEffect

  • 컴포넌트의 생명주기를 관리하기 위한 Hook
  • 컴포넌트 생명주기
    • 컴포넌트 생성
    • 컴포넌트 삭제 (clean up 함수 활용)
    • 컴포넌트 업데이트 (상태 값 변경)
useEffect(() => { ... },[의존성 배열])
  • 첫번째 인자에는 콜백함수, 두번째 인자에는 의존성 배열을 넣어 사용
  • 리액트에서는 컴포넌트가 생성될 때 호출하기 위해 데이터 페칭, API 통신을 할때 가장 많이 사용되는 Hook
  • 상태 끌어올리기 (state lifting)
    • 하위 컴포넌트에 작성된 state를 상위 컴포넌트로 끌어올리는 것
    • 상위 컴포넌트에서 로직을 작성해야하는 경우 상태를 끌어올려야 동일한 상태 값을 공유할 수 있음
  • darkmode, imagepreloader 등에서도 많이 쓰임
// 유저의 다크모드 환경을 체크
useEffect(()=>{
	const userPrefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)"
    ).matches;
    setIsDarkmode(userPrefersDark);
},[])
// imagePreloader
// 초기 렌더링 경험을 개선하기 위해 많이 사용됨
function useImagePreloader(images: string[]){
	useEffect(()=>{
		images.forEach((image)=>{
			const img = new Image();
			img.src = image
		})
	},[images])
}

useImagePreloader([Seoul, London, ...])

 

useLayoutEffect

  • 화면에 컴포넌트가 생성될 때 실행되는건 맞지만, 컴포넌트를 화면에 그리기 바로 전에 동기적으로 코드를 처리하는 Hook
  • 따라서 코드가 종료될 때까지 다른 코드가 작동되지 않음
  • 데이터 통신은 useEffect Hook을 사용하고, 단순히 레이아웃이 변경될 때는 useLayoutEffect Hook을 많이 사용함

 

useTransition

  • React 18 버전에서 출시된 Hook 중 하나
  • 동시성 모드 훅에 포함됨
  • 컴포넌트 내 로직때문에 컴포넌트 전체가 부하가 걸릴 경우, 부하를 줄일 수 있도록 사용하는 Hook
  • React에서보다는 Next.js에서 가장 많이 사용되는 Hook
const [pending, startTransition] = useTransition();

// startTransition 함수에 부하가 걸리는 코드를 맵핑
// 내부에 있는 코드의 우선순위를 낮춰주어 컴포넌트의 부하를 줄여줌 -> 내부 로직 코드가 비동기처럼 실행되게 함
startTransition(() => {
  ....
});

// View 코드
{!pending ? (
  <ul>
    ...
  </ul>
) : (
  <p>loading</p>
)}
  • input의 onChange 이벤트에서 성능을 최적화하기 위해 사용되는 디바운스와는 달리 연속으로 입력하는만큼 DOM 요소를 새롭게 생성하고, 렌더링을 반복함
    • 디바운스(Debounce)
      • input 컴포넌트에 사용자가 요소를 입력할때마다 onChange 이벤트가 발생하게되고, 그 때마다 컴포넌트가 업데이트 되면서 리렌더링이 계속해서 일어나 성능이 저하됨
      • 따라서 사용자가 특정 시간동안 입력이 끝날때까지를 기다렸다가 입력이 끝났음을 인식하고 렌더링을 시켜 성능을 최적화
      • 또는 이벤트가 발생되는 컴포넌트를 최대한 하위 컴포넌트로 분리하여 상위 컴포넌트의 리렌더링을 방지

 

 

본격적으로 데이터 페칭과 관련된 Hooks를 배우면서 지난 프로젝트들에서 활용했던 것들을 다시 상기하며 내가 놓치고 있는 부분들을 파악할 수 있었다.

내일도 화이팅하자!! 😇

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.