[4주차] 권오진 과제 제출합니다.

[KOJ50]

배포링크
피그마 링크
노션 링크

---

느낀점

---

Review Question

1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
   React Router : React 애플리케이션에서 클라이언트 측 라우팅을 쉽게 구현할 수 있도록 도와주는 라이브러리
   → React는 기본적으로 SPA이고 URL이 변경되더라도 페이지 전체를 새로고침하지 않고도 컴포넌트만 변경할 수 있도록 설계되어 있음
   React Router를 사용한단면 사용자가 특정 URL로 이동할 때 해당 URL에 맞는 컴포넌트를 렌더링함
   동적 라우팅 : 웹 애플리케이션에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식
   사용자의 입력, 상태 변화, 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정
   경로변수 (Parameters)를 사용해 동적페이지를 만들 수 있음
   useParams → React Router에서 URL의 파라미터 값을 가져오는 Hook

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

• UI/UX 디자인 전략
  느린 네트워크에서 사용자가 앱이 작동하지 않다고 느끼지 않도록 로딩상태를 명확하게 보여주어야 합니다.
  모든 콘텐츠를 한 번에 보여주려고 하면 초기 화면이 늦게 뜰 수 있어 사용자가 먼저 봐야 하는 정보를 우선으로 제공해야 합니다.
  데이터를 불러오는 동안 빈 화면이 보이면 오류라고 사용자가 생각할 수 있으므로 추가적인 UI를 제공하거나 화면 구조를 먼저 보여주며 사용자 경험을 개선합니다.
  느린 네트워크에서 요청 실패가 자주 발생할 수 있으므로 요청 실패에 대한 원인과 해결 방안을 제시하여 에러 상황을 안내하고 해결할 수 있도록 도와줍니다.

• 기술적 최적화 방법
  이미지는 웹페이지에서 용량을 많이 차지하는 요소로 이미지 압축, 반응형 이미지 등 용량을 감소하며 품질을 해치지 않도록 하는 것이 중요합니다.
  디자인 전략과 동일하게 처음부터 모든 데이터를 불러오지 않고, 필요한 시점에 필요한 정보를 불러오는 방식을 활용합니다.
  캐싱을 사용하여 이미 불러온 데이터를 매번 다시 요청하지 않도록 저장해두는 방식을 사용합니다.
  필요한 데이터만 요청하거나 여러 API 호출을 묶는 등 요청 횟수를 줄여 네트워크가 느린 환경에도 작동하도록 할 수 있습니다.

→UI/UX 디자인 전략은 네트워크 속도가 느린 상황에서도 사용자가 불편함을 덜 느끼도록 하며 기술적 최적화 방법은 실제로 필요한 데이터를 더 적고, 더 빠르게 불러오도록 만드는 것이 중요합니다.

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

지역 상태 관리 : 특정 컴포넌트 또는 가까운 하위 컴포넌트에서만 필요한 상태
useState : 단순한 값이나 짧은 상태를 관리할 때 적합
→ 상태가 단순할 때, 업데이트 로직이 간단할 때, 한 컴포넌트 안에서만 사용할 때
useReducer : useState보다 상태 변경 로직이 복잡할 때 사용
→ 상태 값이 여러 개일 때, 상태 변경 로직이 복잡할 때, 이전 상태를 기반으로 변경할 때, 상태 변화 종류가 많을 때

Context API : 여러 컴포넌트가 같은 값을 공유할 수 있도록 함
일반적으로 부모에서 자식 컴포넌트로 props를 사용하여 데이터를 전달할 때 구조가 깊어지면 여러 단계를 거쳐 계속 내려야 하는데 Context API는 필요한 컴포넌트가 직접 값을 가져올 수 있게 함

전역 상태 관리 라이브러리 : 여러 컴포넌트, 여러 페이지에서 공유하는 상태를 더 체계적으로 관리하기 위한 도구
→ 여러 페이지에서 같은 상태를 공유, 상태 변경 로직이 복잡, 상태를 디버깅해야 할 때, 서버 데이터와 클라이언트 상태가 섞였을 때, 상태 변경 추적이 중요할 때
ex) Zustand를 사용하면 전역 store를 만들 수 있으며 컴포넌트 깊이에 상관없이 필요한 곳에서 상태를 가져올 수 있음