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

[yujinnieOhh]

배포 링크 : https://react-messenger-23rd-ten.vercel.app

qa 등 추가 작성 예정입니다.

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

URL의 특정 부분을 변수처럼 사용하는 방식이다. 경로 뒤에 :id 같은 파라미터를 붙여 하나의 컴포넌트가 여러 페이지를 처리하게 만드는 것이 핵심이다. 주로 상세 페이지나 채팅방처럼 화면 구조는 동일하지만, 들어오는 데이터(ID)에 따라 다른 내용을 보여줘야 할 때 필수적으로 사용한다. 이번 프로젝트에서도 특정 채팅방 ID를 기반으로 해당 대화 내용을 불러오는 데 활용했다.

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

사용자가 '기다리고 있다'는 느낌을 덜 받게 하는 것이 중요하다. 디자인적으로는 데이터가 로드되기 전까지 실제 UI와 유사한 형태를 보여주는 스켈레톤 UI를 적용하거나, 이미지 로딩 시 저해상도 이미지를 먼저 보여주는 방식을 사용할 수 있다. 기술적으로는 데이터 요청 횟수를 줄이기 위한 로컬 스토리지 활용이나, 필요한 코드만 먼저 불러오는 코드 스플리팅 등을 통해 초기 로딩 속도를 최적화할 수 있다.

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

상태의 '영향 범위'와 '복잡도'에 차이가 있다. useState와 useReducer는 특정 컴포넌트 내부에서만 쓰이는 지역 상태를 관리하기에 적합하며, 로직이 단순하면 useState를, 복잡하면 useReducer를 쓴다. 반면, Context API나 전역 상태 관리 라이브러리는 여러 컴포넌트가 동시에 참조해야 하는 정보(로그인 유저 정보, 테마 등)를 다룰 때 사용한다. Context API는 별도의 설치 없이 쓸 수 있지만 자주 업데이트 시 성능 이슈가 있을 수 있어 데이터 규모가 커지면 전문 라이브러리를 고려하는 것이 효율적이다.