프론트엔드 기술 면접 질문

 

 

Q. React에서 useMemo와 useCallback 훅의 차이를 메모이제이션과 함께 설명해주세요.

A. useMemo는 비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고, 이 저장된 값을 반환하는 훅이다.

useCallback은 인수로 넘겨받은 콜백 자체를 기억한다. 특정 함수를 새로 만들지 않고 다시 재사용한다. 이처럼 함수의 재생성을 막아 불필요한 리소스 또는 리렌더링을 방지하고 싶을 때 useCallback을 사용해 볼 수 있다.

 

 

 

 

Q. React에서 Strict Mode란 무엇이며, 이를 사용하는 목적과 주요 기능을 설명해주세요.

A. React의 Strict Mode는 애플리케이션의 잠재적인 문제를 조기에 발견하고 더 나은 개발 방식을 적용하도록 도와주는 개발 모드 전용 기능입니다.

주요 기능과 목적:

1. 컴포넌트의 이중 렌더링 : 순수하지 않은 렌더링으로 인한 버그를 쉽게 발견할 수 있습니다.
2.  useEffect 클린업 함수 검증 : 모든 useEffect의 클린업 함수가 제대로 구현되었는지 확인합니다.  컴포넌트 마운트/언마운트를 추가로 실행하여 메모리 누수를 방지합니다.
3.  레거시 API 사용 감지 : findeDOMNode, componentWillMount, componentWillReceiveProps 등의 권장되지 않는 생명주기 메서드 사용 시 경고를 표시합니다.
4. 레거시 문자열 ref에 대한 경고

 

 

Q. React의 forwardRef에 대해 설명하고, 이를 활용하여 하위 컴포넌트의 DOM 요소에 접근할 수 있는 예제를 작성해주세요

A. forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 DOM에 직접 접근할 수 있게 해주는 React 기능입니다.
일반 컴포넌트는 ref prop을 받을 수 없지만, forwardRef로 감싸면 두 번째 파라미터로 ref를 받아서 DOM 요소에 전달할 수 있습니다.
주로 input 요소에 포커스를 주거나, 특정 DOM 요소의 크기나 위치를 측정해야 할 때 사용합니다.

import React, { forwardRef, useRef, useEffect } from 'react';

// forwardRef 없이 만든 컴포넌트
const InputWithoutRef = (props) => {
  return (
    <div className="mb-4">
      <p className="text-red-500 mb-2">이 컴포넌트는 ref를 전달받을 수 없습니다</p>
      <input
        type="text"
        className="w-full px-4 py-2 border rounded"
        {...props}
      />
    </div>
  );
};

// forwardRef를 사용한 컴포넌트
const InputWithRef = forwardRef((props, ref) => {
  useEffect(() => {
    console.log('ref가 전달됨:', ref);
  }, [ref]);

  return (
    <div className="mb-4">
      <p className="text-green-500 mb-2">이 컴포넌트는 ref를 전달받을 수 있습니다</p>
      <input
        ref={ref}
        type="text"
        className="w-full px-4 py-2 border rounded"
        {...props}
      />
    </div>
  );
});

// 부모 컴포넌트
const App = () => {
  const refWithout = useRef(null);
  const refWith = useRef(null);

  useEffect(() => {
    // refWithout.current는 null
    console.log('ref without forwardRef:', refWithout.current);
    
    // refWith.current는 input 엘리먼트
    console.log('ref with forwardRef:', refWith.current);
    
    if (refWith.current) {
      // DOM API 사용 가능
      refWith.current.focus();
    }
  }, []);

  return (
    <div className="p-6 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-6">Ref 전달 과정 데모</h1>
      
      <InputWithoutRef
        ref={refWithout}
        placeholder="forwardRef 없는 컴포넌트"
      />
      
      <InputWithRef
        ref={refWith}
        placeholder="forwardRef 사용한 컴포넌트"
      />
      
      <button
        onClick={() => refWith.current?.focus()}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        두 번째 입력란에 포커스
      </button>
    </div>
  );
};

export default App;

 

 

 

Q. React에서 Custom Hook이란 무엇인지, 어떻게 설계하는지 설명해주세요.

A. React Custom Hook은 로직을 재사용 가능한 함수로 추출하여 여러 컴포넌트에서 동일한 상태 관리나 동작을 공유할 수 있게 해주는 패턴입니다.

1. 문제 정의하기

2. 입력값과 반환값 설계하기

3. 세부 로직 구현하기

 

function useInput(initialValue = '') {
  // 입력값을 저장할 상태를 생성합니다
  const [value, setValue] = useState(initialValue);

  // 입력값이 변경될 때마다 호출될 함수입니다
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  // 입력값 초기화 함수입니다
  const reset = () => {
    setValue(initialValue);
  };

  // 필요한 값과 함수들을 반환합니다
  return {
    value,      // 현재 입력값
    onChange: handleChange,  // 변경 이벤트 처리 함수
    reset       // 초기화 함수
  };
}

 

 

 

Q. React에서 컨트롤드 컴포넌트(Controlled Component)와 언컨트롤드 컴포넌트(Uncontrolled Component)의 차이를 설명하고 각각의 장단점을 비교해주세요.

A. 컨트롤드 컴포넌트는 React의 state에 의해 입력 값이 완전히 제어되는 폼 요소 입니다.

언컨트롤드 컴포넌트는 React의 state를 사용하지 않고, DOM 자체에서 폼 데이터를 관리하는 요소입니다.

 

Controlled Component

• 폼 요소의 value 속성은 컴포넌트의 state에 연결됩니다.
• onChange 이벤트 핸들러를 통해 사용자 입력이 발생할 때마다 state를 업데이트합니다.
• 모든 데이터 변경은 setState()를 통해 이루어집니다.

장점

• 데이터 흐름이 명확함: 모든 폼 상태 변화가 React state를 통해 이루어지므로 데이터 흐름을 쉽게 파악할 수 있습니다.
• 즉각적인 유효성 검사: 입력 값이 변경될 때마다 검증할 수 있습니다.
• 조건부 렌더링: 입력 값에 따라 UI를 동적으로 변경하기 쉽습니다.
• 폼 값 관리 용이: 여러 입력 필드를 쉽게 초기화하거나 변경할 수 있습니다.
• 서버 통신 용이: state에 저장된 데이터를 바로 서버로 전송할 수 있습니다.

단점

• 코드 복잡성 증가: 각 입력 필드마다 state와 이벤트 핸들러를 관리해야 합니다.
• 성능 이슈: 입력할 때마다 렌더링이 발생할 수 있어, 큰 폼에서는 성능 문제가 생길 수 있습니다.
• 초기 설정 필요: 모든 입력 필드에 대한 state 초기화가 필요합니다.

 

 

Uncontrolled Component

• React state 대신 DOM에서 직접 폼 데이터를 관리합니다.
• ref를 사용하여 DOM 노드에 접근합니다.
• 필요한 시점(주로 폼 제출 시)에만 DOM에서 값을 가져옵니다.

 

장점

• 간단한 구현: 최소한의 코드로 구현할 수 있습니다.
• 성능 이점: 입력마다 React의 렌더링 사이클을 트리거하지 않아 성능상 이점이 있습니다.
• 기존 코드와의 통합: 비-React 코드와 쉽게 통합할 수 있습니다.
• 파일 입력 처리에 적합: <input type="file">은 언컨트롤드 컴포넌트로만 가능합니다.

단점

• 상태 추적 어려움: DOM에 의존하므로 컴포넌트의 상태를 추적하기 어렵습니다.
• 즉각적인 유효성 검사 제한: 입력 시점마다의 검증이 어렵습니다.
• 폼 상태 관리 어려움: 여러 입력 필드가 있는 복잡한 폼에서는 관리가 어려울 수 있습니다.
• 테스트 어려움: DOM에 의존하므로 테스트하기 어려울 수 있습니다.

 

 

Q. React에서 HOC(Higher-Order Component)란 무엇이며, 이를 사용하여 인증된 사용자만 접근할 수 있는 컴포넌트를 구현하는 방법을 설명해주세요.

A. 고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다.

 

toss Frontend Fundamentals

function LoginStartPage() {
  /* ... 로그인 관련 로직 ... */

  return <>{/* ... 로그인 관련 컴포넌트 ... */}</>;
}

export default withAuthGuard(LoginStartPage);

// HOC 정의
function withAuthGuard(WrappedComponent) {
  return function AuthGuard(props) {
    const status = useCheckLoginStatus();

    useEffect(() => {
      if (status === "LOGGED_IN") {
        location.href = "/home";
      }
    }, [status]);

    return status !== "LOGGED_IN" ? <WrappedComponent {...props} /> : null;
  };
}

 

 

Q. React에서 리렌더링(Re-rendering)이 발생하는 조건을 아는 한 모두 설명해주세요

Q.  상태가 변경될 때, 부모 컴포넌트의 리렌더링 시 자식 컴포넌트 전체 리렌더링, props변경, conText변경(context API를 사용하는 컴포넌트), 리액트 훅의 의존성 배열 변경

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

reference.

Frontend_Fundamentals.https://frontend-fundamentals.com/code/examples/login-start-page.html