본문 바로가기

전체 글245

면접 - react props drilling 해결 ⸻질문:React 프로젝트에서 상태 공유 시 props drilling 문제를 어떻게 해결하셨나요?또한 이 과정에서 발생할 수 있는 컴포넌트 재렌더링 문제를 최소화하는 방법도 말씀해 주세요.답변 스크립트:props drilling 문제를 해결하기 위해 React에서는 Context API를 기본적으로 지원합니다.Context를 활용하면 상위 컴포넌트에서 하위 컴포넌트로 깊게 상태를 전달할 필요 없이, 전역처럼 필요한 컴포넌트에서 직접 상태를 사용할 수 있습니다.추가로 저는 상황에 따라 Redux, React Query, Recoil, Zustand 같은 상태 관리 라이브러리를 사용해왔습니다.특히 최근에는 가벼운 상태 관리가 필요한 경우 Zustand를 주로 사용했는데, 이 방법은 Redux처럼 별도의 리.. 2025. 4. 26.
면접 - race condition, 중복 호출 방지 질문:Next.js 프로젝트에서 비동기 처리 중 발생할 수 있는 race condition 문제를 어떻게 방지하셨는지,그리고 클라이언트 사이드에서 중복 호출이나 불필요한 렌더링을 줄이기 위해 어떤 전략을 사용하셨는지 말씀해 주세요.답변 스크립트:비동기 처리에서 발생할 수 있는 race condition을 방지하기 위해, 사용자 입력이나 버튼 클릭 시 이전 요청 상태와 동기화할 수 있는 로직을 먼저 구성했습니다.예를 들어 입력값이 변경되었는지 비교하거나, 로딩 상태를 관리하면서 중복 호출을 막는 구조로 설계했습니다.또한 컴포넌트 재렌더링 최적화를 위해 useMemo와 React.memo를 사용해 메모이제이션을 적용했고,이로 인해 동일한 props로 렌더링되는 컴포넌트는 불필요하게 다시 그려지지 않도록 처리.. 2025. 4. 11.
면접 - React Virtual DOM 질문:React의 가상 DOM이 실제 DOM과 어떤 방식으로 다르게 동작하며 성능 최적화에 어떻게 기여하는지 설명해주시고,React Native에서는 이 개념이 어떻게 적용되는지도 함께 말씀해주시겠어요?답변 스크립트:React의 가상 DOM은 실제 DOM의 사본을 메모리 상에 유지하면서, 상태 변화가 생겼을 때 변경 전과 후의 가상 DOM을 **비교(diffing)**하여 변경된 부분만 실제 DOM에 반영하는 구조입니다.이 과정에서 React는 **얕은 비교(shallow comparison)**를 통해 최소 단위의 업데이트만 수행하기 때문에, 전체 DOM을 다시 렌더링하는 전통적인 방식보다 훨씬 효율적으로 작동합니다.실제 DOM 조작은 브라우저에서 비용이 크기 때문에, 가상 DOM을 통해 변경 사항을 .. 2025. 4. 10.
면접 - Next.js CSR SSR API 호출 ⸻질문:Next.js 프로젝트에서 성능 최적화를 위해 “API 호출 시점을 조정”하셨다고 했는데요,CSR과 SSR 구조에서 API 호출 시점이 성능에 어떤 영향을 주는지 설명해주시고, 왜 그 조정이 효과적이었는지 말씀해주시겠어요?답변 스크립트:CSR에서는 API 호출이 브라우저에서 DOM이 생성된 이후에 실행되기 때문에, 초기 화면에는 데이터가 없는 상태로 로딩 표시만 보이는 경우가 많습니다. 반면 SSR에서는 서버에서 데이터를 먼저 받아오고, 그 데이터를 포함한 HTML을 클라이언트에 전달하기 때문에, 사용자 입장에서는 페이지 로딩과 동시에 완성된 화면을 확인할 수 있습니다.그래서 저는 페이지에 반드시 필요한 초기 데이터는 getServerSideProps를 통해 SSR 방식으로 미리 렌더링했고, 사용.. 2025. 4. 9.

티스토리툴바