프론트엔드기술면접질문

 

 

Q. React에서 서버 컴포넌트(Server Components)란 무엇인지 설명해주세요.
A. 서버에서 렌더링되고 실행되는 컴포넌트 입니다.
(번들링 전에 클라이언트 앱이나 SSR(Server Side Rendering) 서버와는 분리된 환경에서 미리 렌더링되는 새로운 유형)
*이 별도의 환경이 바로 React 서버 컴포넌트에서의 “서버”입니다.

토스에서 얘기하는 서버 컴포넌트, 클라이언트 컴포넌트, 공유 컴포넌트

 

 

 

Q. React에서 useLayoutEffect와 useEffect의 차이점을 설명하고, 각각의 훅이 적합한 상황을 예제와 함께 제시해주세요. 
A. useEffect는 컴포넌트들이 render 와 paint 된 후 비동기적으로 실행됩니다.

EX) 데이터 페칭, 이벤트 리스너 등록, 비동기 작업 처리 ... 
useLayoutEffect의 경우 DOM이 변경된 후에 동기적으로 실행되어 깜빡임 등을 방지할 수 있습니다.

EX) DOM 측정이 필요한 경우, 화면 깜빡임 방지, 스크롤 위치 조정 ... 

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
useLayoutEffect는 useEffect와 동일하지만, useLayoutEffect는 DOM 변경 후에 동기적으로 발생한다. 이를 통해 DOM에서 레이아웃을 읽고 동기적으로 리 랜더링 한다. useLayoutEffect 내에서 스케줄된 업데이트는 브라우저가 Paint하기 전에 동기적으로 실행된다.
- 리액트 공식 문서

 

 

Q. React에서 프로퍼티 드릴링(Prop Drilling)이란 무엇인지 설명하고, 이를 해결하기 위한 방법 3가지를 제시해주세요.
A. 프로퍼티 드릴링은 상위 컴포넌트에서 데이터를 하위 컴포넌트로 전달할 때, 중간에 있는 여러 컴포넌트들을 거쳐가야 하는 현상을 의미합니다. 이러한 방식은 다음과 같은 문제를 일으킬 수 있습니다.

1. 유지보수의 어려움 : 각 컴포넌트가 불필요하게 많은 props를 관리해야 하므로, 컴포넌트의 유지보수가 복잡해집니다.
2. 코드의 가독성 저하 : 중간 컴포넌트들이 실제로 사용하지 않는 props를 전달하므로, 코드의 가독성이 떨어집니다.
3. 재사용성 감소 : 중간 컴포넌트들이 특정 데이터에 종속되어 재사용하기 어려워집니다.

리액트에서의 상태란 컴포넌트의 데이터를 의미하며, 결국 이러한 prop drilling문제는 상태관리의 중요성을 나타냅니다.

이를 해결하기 위해 Context API사용, Redux, zustand, jotai등 상태관리 라이브러리들이 사용되고 있습니다.

 

 

Q. React의 키(key) 속성은 어떤 역할을 하며, 컴포넌트 리스트를 렌더링할 때 key를 올바르게 설정하는 방법을 설명해주세요.

A. key는 React가 Virtual DOM에서 각 요소를 고유하게 식별하는데 사용하는 특별한 속성입니다. 

그래서 key설정을 할 때에는 고유한 값을 가지고 있어야 하며, 변경되지 않는 안정적인 값이어야 합니다.

// ❌ 잘못된 예시
const TodoList = () => {
  const todos = ['리액트 공부하기', '키 속성 이해하기', '컴포넌트 만들기'];
  
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>  // index를 key로 사용하면 안 됨
      ))}
    </ul>
  );
};

// ✅ 올바른 예시
const TodoList = () => {
  const todos = [
    { id: 1, text: '리액트 공부하기' },
    { id: 2, text: '키 속성 이해하기' },
    { id: 3, text: '컴포넌트 만들기' }
  ];
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>  // 고유한 id를 key로 사용
      ))}
    </ul>
  );
};

 

처음 코드를 짤 때에는 간단하게 index를 사용하여 key값을 설정했던 기억이 있습니다. 😃..
index를 key값으로 설정하면 안되는 이유는 해당 리스트가 추가/삭제될 때 변경될 수 있는 값이라 주의해야 합니다.

이렇게 올바르게 key값을 설정하게 되면 React가 각 요소를 식별하는 데 도움을 주고 변경 사항을 효율적으로 관리할 수 있습니다.

 

 

Q. React에서 포털(Portal)이란 무엇인지 설명하고, 이를 사용하여 모달 컴포넌트를 구현하는 방법을 설명해주세요.

A. Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식 컴포넌트를 렌더링할 수 있게 해주는 React의 기능입니다.

createPortal을 사용하면 일부 자식을 DOM의 다른 부분으로 렌더링할 수 있습니다. 컴포넌트를 현재 위치가 아닌 다른 곳에 렌더링하고 싶을 때 사용합니다.

ex) 모달, 팝업, 툴팁과 같은 오버레이 UI 구현 시 

 

 

Q. React의 동적 import를 사용하여 코드 스플리팅(Code Splitting)을 구현하는 방법을 설명해주세요.

A. 먼저 코드 스플리팅은 프론트엔드 애플리케이션의 번들을 작은 조각으로 분할하여 필요한 부분만 로드하는 최적화 기법입니다. 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 

// 기존 방식
import HeavyComponent from './HeavyComponent';

// 동적 import 사용
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

 

suspense와 함께 사용하는 예시

// routes.js
import React, { lazy } from 'react';

// 각 페이지 컴포넌트를 동적으로 import
const HomePage = lazy(() => import('./pages/Home'));
const ProductPage = lazy(() => import('./pages/Product'));
const CartPage = lazy(() => import('./pages/Cart'));

function Routes() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/products" component={ProductPage} />
        <Route path="/cart" component={CartPage} />
      </Switch>
    </Suspense>
  );
}

 

 

 

 

Q. React에서 에러 바운더리(Error Boundary)란 무엇이며 이를 구현하는 방법을 설명해주세요.

A. 에러 바운더리는 React 컴포넌트에서 발생하는 JavaScript 에러를 캐치하고, 에러가 발생했을 때 폴백 UI를 보여주는 특별한 컴포넌트입니다. 마치 try-catch 구문처럼 동작하지만, 컴포넌트 레벨에서 작동합니다. 오직 클래스 컴포넌트만이 에러 경계가 될 수 있습니다

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    // 에러 상태를 관리하기 위한 초기 state 설정
    this.state = { hasError: false };
  }

  // 에러가 발생했을 때 호출되는 생명주기 메서드
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 에러 정보를 로깅하기 위한 생명주기 메서드
  componentDidCatch(error, errorInfo) {
    // 여기서 에러 로깅 서비스에 에러를 보낼 수 있습니다
    console.log('에러가 발생했습니다:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 에러가 발생했을 때 보여줄 폴백 UI
      return <h1>죄송합니다. 문제가 발생했습니다.</h1>;
    }

    // 정상적인 경우 자식 컴포넌트를 렌더링
    return this.props.children;
  }
}

 

사용할 때 에러 바운더리 예시

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

 

 

 

 

 

 

 

reference.
카카오 테크 로그 -React 18: 리액트 서버 컴포넌트 준비하기.lyn.lee(22.05).https://tech.kakaopay.com/post/react-server-components/

React공식 문서.v19.https://ko.react.dev/reference/rsc/server-components

props drilling 해결하기.NOWWEB.(24.04)/https://forweber.palms.blog/nowsopt-react-imddoy