얼렁뚱땅 중간고사 기간 끝났구,,,,, 다시 CEOS,,
그냥 빨리 졸업시켜줘,,,,

🚀 React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?

⚡️ Routing이란?

사용자가 요청한 URL에 따라서 알맞은 페이지를 보여주는 것이며 이때 기능을 가진 것이 바로 ROUTER 인 것!

⚡️ 정적 라우팅

미리 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의하는 방식

⚡️ 동적 라우팅

특정 규칙을 정의한 후 규칙에 부합하는 URL이 있을 경우에 해당하는 element를 보여주게 설정하는 방식, path parmaeter를 이용한다.

< Route path = "/post/:postId" element = {<PostDetail/>} />

useParmas

URL 파라미터(path parameter)를 객체 형태로 가져오는 훅, 이때 parmas는 string으로 수정 불가능한 값이다

🚀 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법은 무엇인가요?

⚡️ UI/UX 디자인 전략

1. 명확한 아이콘과 레이블링
2. 네비게이션의 표현 방식
3. 일관성 있는 콘텐츠 분류 방식
4. 간단한 레이아웃과 화면 구성
5. 타이포그래피의 가독성

⚡️ 2. 기술적 최적화 방법

1. 크롬 개발자 도구

• Performance 패널: 웹 페이지가 로드될 때, 실행되는 모든 작업을 보여주어 어떤 코드가 느린 지 확인
• Lighthouse 패널 : 웹 사이트 성능을 측정하고, 개선 방향을 제시해주는 자동화 툴
• webpack-bundle-analyzer: webpack을 통해 번들링된 파일이 어떤 코드, 어떤 라이브러리를 담고 있는지 보여주어 최종적으로 완성된 번들 파일 중 불필요한 코드를 파악할 수 있다.

2. 리소스 최적화

• 자바스크립트, CSS, 이미지 파일 등 리소스 크기를 줄이는 작업이며, 페이지 로딩 시간을 단축시키고 대역폭 사용을 줄이는 효과가 있음

3. 캐싱 전략

• 리소스의 재요청을 줄여, 자주 변경되지 않는 리소스를 대상으로 페이지 로딩 속도를 향상시킬 수 있음

🚀 React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점을 설명하세요.

⚡️ 상태란?

어떤 의미를 지닌 값이며 지속적으로 변경될 수 있는 값

역할에 따른 분류

1. UI 상태: 상호 작용이 가능한 모든 요소의 현재 값 ex) Input
2. 폼(form) 상태: loading, submit,,,
3. 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값 (API 요청)
4. URL 상태: 브라우저에 의해 관리되는 상태값

범위에 따른 분류

1. 지역 상태

useState 훅을 사용하여 관리되는 상태
특정 컴포넌트 안에서만 관리되는 상태

2. 전역 상태

애플리케이션 전체에 공유되는 상태
전역 상태는 주로 상태 관리 라이브러리를 사용하여 관리

⚡️ 지역 상태 관리 : useState, useReducer

function useCounter(initCounte : number = 0 ) {
  const [ counter, setCounter ] = useState(initCount)

  function inc() {
    setCounter((prev) => prev +1)
  }
 
  return {counter, inc}
}

해당 훅은 useCounter를 사용하는 함수형 컴포넌트에서 각자 counter 변수를 관리하며, 중복되는 로직 없이 숫자를 1씩 증가시키는 기능을 손쉽게 이용할 수 있다.

type Initializer<T> = T extends any ? T | ((prev : T) => T): never

function useStateWithUserReducer<T>(initialState: T){
  const [state, dispatch] = useReducer(
    (prev: T, action: Initializer<T>) => 
    	typeof action === 'function' ? action(prev) : action,
    initialState,
    )

  return [state, dispatch]
}

이도 마찬가지로, useState와 동일한 작동, T를 받거나 (prev:T)=>T를 받아 새로운 값을 설정할 수 있다.

이는 모두 컴포넌트 내부의 상태를 관리하는 방법이기 때문에, 컴포넌트 별로 다른 상태를 가질 수밖에 없다.

⚡️ React Context

Context API

리액트에서 전역적으로 필요한 값을 공유할 수 있도록 고안된 방법

React.createContext

Context 객체를 만들어, 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 값을 읽는다

Context.Provider

value prop을 받아서 이 값을 하위 컴포넌트에 전달한다
context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 된다.

ContextConsumer

context 변화를 구독하는 컴포넌트

useContext()

context의 현재 값을 반환하는 hook
useContext를 호출한 컴포넌트는 context값이 변경되면 항상 리렌더링 된다.

⚡️ 전역 상태 관리 라이브러리

Redux

중앙화된 저장소를 통해 앱의 상태를 예측 가능하게 한다.
Store, Action, Reducer로 구성되어 있다.

📌 Reducer

Action에서 보낸 데이터 처리 방식을 보고 Store의 상태를 관리해준다.
변화를 일으키는 함수

📌 Store

상태가 관리되는 하나의 공간, 필요한 전역 상태를 모두 담는다

📌 Action

store에 운반한 데이터, 객체 형식이며 type 필드를 가지고 있어야 한다

⚡️ Recoil

훅의 개념으로 상태 관리를 시작한 최초의 라이브러리

📌 RecoilRoot

Recoil을 사용하기 위해 애플리케이션 최상단에 선언해야 하는 부분

📌 atom

Recoil의 최소 상태 단위

📌 selector

여러 상태를 조합한 새로운 상태로 get, set 메서드를 사용할 수 있다.

⚡️ zustand

Context API 기반으로 하는 상태 관리 라이브러리로 하나의 스토어를 중앙 집중형식으로 활용해 스토어 내부에서 상태 관리