프론트엔드 면접 질문 & 답 React, Redux, Frontend Part

React

• virtual DOM 가 무엇이고 작동원리
  virtual DOM(가상 DOM)은 웹 개발에서 사용되는 개념으로, 사용자 인터페이스의 성능을 향상시키기 위해 사용되며, 웹 페이지의 HTML 구조를 나타낸다.
  작동원리는

  1. 가상 DOM은 실제 DOM의 가벼운 복사본으로 구성된다. 이를 통해 브라우저에 직접적인 접근을 최소화하고, 가상 DOM을 통해 변경 사항을 처리할 수 있다.
  2. 사용자 입력이나 데이터의 변경 등 변화가 발생하면, 가상 DOM은 이를 감지하고, 변경이 필요한 부분만 새로운 가상 DOM으로 업데이트한다.
  3. 가상 DOM은 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 적용한다. 이를 통해 필요한 부분만 업데이트하고, 전체 페이지를 다시 렌더링하는 것을 방지할 수 있다.
  4. 변경된 실제 DOM은 브라우저에 적용되어, 사용자에게 변경 사항이 반영된 웹 페이지가 표시된다.

• React를 사용하는 이유

  1. React는 가상 DOM을 사용하여, 변경된 부분만 업데이트하고 전체 페이지를 다시 렌더링하는 것을 방지함으로써 성능을 최적화할 수 있다. 이를 통해 사용자가 빠른 속도로 페이지를 로드하고 상호작용할 수 있다.
  2. React는 컴포넌트 기반으로 UI를 개발할 수 있는데 이를 통해 코드의 재사용성 및 유지보수성을 높일 수 있다. 또한 이를 통해 각 컴포넌트를 독립적으로 테스트할 수 있다.
  3. 상태는 컴포넌트 내부에서 관리되며, 상태가 변경되면 해당 컴포넌트만 다시 렌더링된다.
  4. 다양한 라이브러리와 프레임워크의 호환성이 높다.
  5. React는 Facebook에서 개발하고 유지보수하고 있으며, 전 세계적으로 널리 사용되고 있는 라이브러리이다.

• 제어 컴포넌트와 비제어 컴포넌트의 차이
  제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 React에서 폼(form) 관련 컴포넌트를 다룰 때 사용되는 두 가지 패턴이다.
  제어 컴포넌트는 폼 관련 데이터를 React의 state로 관리하며, 입력 데이터를 처리하는 로직을 직접 구현한다. 이 방식은 React의 상태 관리 기능을 활용하여 데이터의 변화를 실시간으로 감지하고, UI를 업데이트할 수 있다.
  비제어 컴포넌트는 폼 관련 데이터를 state로 관리하지 않고, DOM에서 직접 관리한다. 이 방식은 코드가 더 짧고 간단해질 수 있으며, 다른 라이브러리와 함께 사용할 때 유용하다.

• 'key' prop을 사용하는 이유
  React에서 리스트를 렌더링할 때 'key' prop을 사용한다. 'key' prop은 각 요소의 고유한 식별자를 지정하는데 사용한다.
  'key' prop을 사용하는 이유는 각 리스트를 고유하게 식별하여 추가, 삭제 또는 이동되었는지 감지하고, 이에 따라 효율적으로 업데이트 할 수 있다. 또한 'key' prop이 있는 경우, React는 변경된 아이템만 렌더링 하므로 성능이 향상된다.

• props와 state의 차이
  props와 state는 컴포넌트의 데이터를 다루는데 사용되는 두 가지 개념이다.
  props는 컴포넌트의 속성을 나타내는 객체이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. props는 컴포넌트 외부에서 설정되어 내부에서 변경할 수 없으며, 컴포넌트가 렌더링될 때마다 동일한 props를 가지고 렌더링된다.
  state는 컴포넌트의 상태를 나타내는 객체이다. state는 컴포넌트 내부에서 관리되며, 컴포넌트 내부에서 변경할 수 있다. 컴포넌트가 렌더링될 때마다 state가 변경되면, React는 변경된 state를 기반으로 새 UI를 생성한다.
  props는 컴포넌트의 데이터를 읽기 전용으로 유지하며, state는 데이터를 변경할 수 있는 상태를 나타내는 데 사용된다.

• 클래스형 컴포넌트와 함수형 컴포넌트의 차이

  1. 클래스형 컴포넌트
     ⭐️ React.Component 클래스를 상속받는 형태로 작성되며, render() 메소드를 포함한다.
     ⭐️ 내부적으로 state와 lifecycle 메소드를 사용할 수 있다.
     ⭐️ props를 이용해 부모 컴포넌트로부터 전달받은 데이터를 활용한다.
  2. 함수형 컴포넌트
     ⭐️ 함수로 작성되며, props를 인자로 받아 JSX를 반환한다.
     ⭐️ 내부적으로 state와 lifecyle 메소드를 사용할 수 없다.
     ⭐️ 클래스형보다 간결하고, 성능도 좋다.

• useState를 사용하는 이유
  useState는 React에서 컴포넌트 내부에서 상태를 관리하는 Hook 중 하나이다.

  1. 상태를 관리하기 위해 필요하다. 컴포넌트의 상태를 업데이트하면 자동으로 컴포넌트를 다시 렌더링하는데 useState를 사용하면 상태를 관리할 수 있다.
  2. 상태를 업데이트할 때마다 새로운 상태를 만들어야 한다. 이는 React의 불변성 원칙에 따라 상태를 변경하는 것이 아니라 새로운 상태를 만들어 변경해야 한다는 것을 의미하며 이는 컴포넌트의 성능을 향상시킨다.
  3. React의 가장 기본적인 Hook 중 하나이며, 다른 Hook과 사용하면 더욱 강력한 기능을 구현할 수 있다.

• useMemo와 useCallback에 대해 설명
  useMemo와 useCallback은 React에서 성능 최적화를 위해 사용되는 두 가지 Hook이다.
  useMemo는 계산 비용이 많이 드는 함수의 결과를 캐시하여 성능을 최적화하는 데 사용된다. 이 Hook을 사용하면 함수가 실행될 때마다 계산하지 않고 이전에 계산한 결과를 재사용할 수 있다.
  useMemo는 복잡한 계산을 수행하는 함수가 자주 호출될 때와 컴포넌트가 다시 렌더링될 때마다 계산이 반복되는 경우에 유용하다.
  useCallback은 함수를 메모이제이션하여 새로운 함수 인스턴스를 생성하는 것을 방지하고 성능을 최적화하는 데 사용된다. 이 Hook을 사용하면 함수가 실행될 때마다 새 함수를 생성하는 것이 아닌 생성된 함수를 재사용할 수 있다.
  useCallback은 자식 컴포넌트에 함수를 전달할 때와 useEffect의 의존성 배열에 함수를 전달할 때 유용하다.

• react-query란?
  react-query는 React 애플리케이션에서 데이터 가져오기(fetching data)를 간편하게 해주는 라이브러리이다. react-query는 데이터 가져오기에 필요한 상태관리, 캐싱, 오류처리, 재시도, 중복 요청 방지 등의 기능을 제공한다.
  react-query의 가장 큰 특징은 데이터 가져오기를 비동기적으로 처리하고 결과를 캐싱하여 같은 요청이 반복되지 않도록 함으로써 성능을 향상시킨다는 것이다. 캐시된 데이터는 시간이 지나면 자동으로 만료되고, 필요에 따라 재시도를 할 수 있다.
  또한 react-query는 데이터 가져오기와 관련된 상태를 관리할 때 유용한 Hook을 제공한다.
  react-query는 REST API 뿐 아니라 다양한 데이터 소스에 대해 사용할 수 있다.

• Context API?
  Context API는 React에서 전역 상태를 관리하기 위해 제공하는 API이다. Context API를 사용하면 컴포넌트 트리에서 매개변수로 상태를 전달하지 않고도 상태 값을 공유할 수 있다.
  Context API는 다수의 하위 컴포넌트가 동일한 상태를 공유해야 하는 경우나 전역적으로 접근 가능한 설정 정보 등을 제공해야 하는 경우에 사용된다.
  Context API는 두 가지 주요 구성 요소가 있는데

  1. Context 객체: 전역적으로 사용할 데이터를 포함하는 객체이다. createContext함수를 사용하여 생성할 수 있다.
  2. Provider 컴포넌트: Context 객체에서 제공하는 데이터를 하위 컴포넌트에 전달하는 역할을 한다. 하위 컴포넌트에서 Context 객체에 접근하려면 useContext Hook을 사용한다.

Redux

• Redux를 사용하는 이유 및 단점

  1. Redux는 애플리케이션의 모든 상태를 단일 스토어에 저장하여 상태를 중앙 집중화된 방식으로 관리한다. 이를 통해 상태가 여러 컴포넌트에서 공유되어야 하는 경우 상태를 전파하기 쉬워지고, 추적하기 쉬워져 디버깅이 용이하다.
  2. Redux는 상태 변화를 예측 가능한 방식으로 관리하는데 상태를 변경하기 위해 수행되는 모든 액션(action)을 기록하고, 상태를 변경하는 것을 리듀서(reducer)라는 순수 함수로 정의한다. 이를 통해 언제 어떻게 상태 변경이 되었는지 예측할 수 있고, 디버깅이 용이해진다.
  3. Redux는 애플리케이션에서 일어나는 모든 상태 변화를 저장하므로, 과거의 상태로 돌아가거나 특정 시점의 상태를 복원하는 등의 시간 여행 기능을 제공할 수 있다.
  4. Redux는 상태와 뷰의 분리를 강조하는데 이를 통해 컴포넌트가 단순해지고 상호작용이 줄어 코드의 유지 보수성이 높아진다.

  단점

  1. 복잡한 개념과 용어를 사용해 처음 사용하는 개발자는 학습 곡선이 높을 수 있다.
  2. 작은 규모의 애플리케이션에서는 Redux를 사용하는 것이 비효율적일 수 있다.
  3. Redux 스토어(store), 리듀서(reducer), 미들웨어(middleware) 등 구성이 복잡하다.

• Context API와 Redux 비교

  1. 관리하는 상태의 양
     ⭐️ Context API: 컴포넌트 계층 구조에서 상태를 전달하기 위해 사용되기 때문에 작은 규모의 애플리케이션에서 사용된다.
     ⭐️ Redux: 중앙 상태 저장소를 사용하여 상태를 관리하기 때문에 대규모 애플리케이션에서 사용된다.

  2. 구현 방법
     ⭐️ Context API: React의 내장 기능으로 제공되는 Context API를 사용한다. Provider와 Consumer 컴포넌트를 이용해 상태를 전달하고 받는다.
     ⭐️ Redux: 별도의 라이브러리로 설치하여 사용한다. 스토어, 액션, 리듀서 등을 이용해 상태를 관리한다.

  3. 성능
     ⭐️ Context API: 상태가 변경될 때마다 모든 하위 컴포넌트가 다시 렌더링된다. 컴포넌트의 수가 많거나 상태가 변경되는 빈도가 높은 경우 성능에 영향을 미칠 수 있다.
     ⭐️ Redux: 스토어의 상태가 변경될 때마다 연관된 컴포넌트만 렌더링된다. 불필요한 렌더링을 최소화해 성능을 향상시킬 수 있다.

• Redux와 Recoil

  1. Recoil
     Reoil은 페이스북에서 만든 Context API 기반으로 구현된 함수형 컴포넌트에서만 사용 가능한 상태관리 라이브러리이다.
     ⭐️ Recoil은 Redux에 비해 간결하며, 코드 작성이 간단(기존 React 내장 Hooks 사용방식과 크게 다르지 않음)
     ⭐️ Recoil은 효율적인 변경 감지 알고리즘을 사용하여 빠른 성능을 제공한다.
     ⭐️ Recoil은 적은 양의 코드로 상태 관리를 할 수 있어 개발 생산성을 높일 수 있다.
  • 단점
    ⭐️ 새로운 라이브러리라 Redux에 비해 커뮤니티 자원이 적다.
    ⭐️ Recoil은 Redux보다 기능이 상대적으로 제한되어 있어 큰 규모의 애플리케이션에는 제한이 있다.

• Next.js의 장점
  Next.js는 React 기반의 서버 사이드 렌더링 프레임워크

  1. Next.js는 서버 측에서 React 컴포넌트를 렌더링하여 초기 페이지 로드 속도를 개선한다. 이는 검색 엔진 최적화(SEO)와 성능 향상에 큰 도움을 준다.
  2. 페이지를 자동으로 코드 청크로 분할하므로 필요한 부분만 로드되어 초기 로드 시간을 줄인다.
  3. 사전 렌더링된 정적 페이지를 생성할 수 있으며, 이를 통해 페이지 로딩 속도를 개선할 수 있다.
  4. API 라우팅을 지원하므로 서버 측에서 API 엔드포인트를 쉽게 작성하고 사용할 수 있습니다.
  5. 자동으로 웹팩을 구성하여 프로젝트를 더 쉽게 설정하고 오류의 위험을 줄여준다.
  6. TypeScript를 기본적으로 지원하여 확장 가능하고 유지 관리 가능한 코드를 더 쉽게 작성할 수 있다.
  7. 대규모의 활발한 개발자 커뮤니티가 있어 다양한 리소스, 듀토리얼 및 자원을 찾을 수 있다.

• CSR과 SSR의 차이
  CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)은 모두 프론트엔드 프레임워크에서 사용되는 렌더링 방식이다.
  CSR은 브라우저에서 JavaScript를 이용하여 화면을 그리는 방식이다. 즉, 서버는 HTML 파일 하나와 JavaScript 파일 하나만 보내주고, JavaScript 파일을 이용하여 브라우저에서 화면을 그린다. 이 방식은 초기 로딩 시간이 길어질 수 있으나, 한 번 로딩되면 이후에는 빠른 페이지 이동이 가능하다.
  SSR은 서버에서 화면을 그려서 브라우저로 보내주는 방식이다. 즉, 브라우저는 이미 그려진 HTML 파일을 받아서 바로 화면을 보여줄 수 있다. 이 방식은 초기 로딩 시간이 짧아지며, 검색 엔진 최적화(SEO)가 용이하다는 장점이 있지만 서버 부하가 증가할 수 있고, 다양한 브라우저에 대한 호환성 이슈가 발생할 수 있다.

• null 과 undefined의 차이
  둘 다 의미 있는 값이 없음을 나타내는 특수 값이다.
  하지만 null은 객체 값이 의도적으로 없음을 나타내는 값인데 변수 또는 객체 속성에 값이 없거나 어떤 객체를 참조하지 않음을 나타내는 데 자주 사용된다.
  undefined는 객체든 숫자든 어떤 값도 없음을 나타내는 값인데 변수나 객체 속성에 값이 할당되지 않았음을 나타내는 데 자주 사용된다.
  null과 undefined는 type을 확인해보면 null은 object값이 나오고 undefined는 undefined라고 나온다.
  null == undefined는 true로 나오는데 그 이유는 타입을 판단하지 않고 두 값을 비교했을 때 true로 나오는 것이고 null === undefined는 타입까지 비교하기 때문에 false로 나온다.