면접대비 질문 정리: 리액트

면접질문 참고

1. 리액트란?

✅ 답변

UI를 구축하기 위한 자바스크립트 라이브러리입니다.

프레임워크가 아니고 라이브러리라 다른 프레임워크에 간편하게 붙여서 사용가능합니다.

SPA이며 component를 기반으로 하여 모듈형으로 ui를 구성합니다.
컴포넌트 기반이라 생산성과 유지보수가 용이하며, virtual DOM으로 인해 앱의 효율성과 속도가 빠릅니다.

참고: https://manon-kim.tistory.com/entry/%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC

2. 리액트를 사용한 이유?

✅ 답변

리액트는 컴포넌트 기반으로 UI를 구성할 수 있기 때문에 모듈화나 재사용성이 뛰어나고 따라서 개발 생산성 증대에도 도움을 줍니다.

또한 가상 DOM을 사용해, 기존과 달라진 UI만 추적해서 실제 DOM에 반영하기 때문에 빠른 렌더링이 가능하다는 장점도 있습니다.

마지막으로 리액트를 사용하는 유저가 많고 따라서 관련 커뮤니티도 활발하기 때문에 개발할 때 헷갈렸던 부분을 서치하기도 쉬웠고 다양한 라이브러리가 출시되어 있어 개발을 하는 데 있어 편리한 점이 많을 것 같아 리액트를 선택했습니다.

3. 프레임워크 vs 라이브러리

✅ 답변

라이브러리와 프레임워크의 제어 흐름에 대한 주도성이 개발자에게 있는가에 따라 구분됩니다.(즉, 애플리케이션의 Flow(흐름)을 누가 쥐고 있느냐에 달려있습니다.)

라이브러리와 달리 프레임워크는 그 스스로 제어 흐름의 주도성을 갖습니다. 또한 프레임워크는 이미 프로그래밍에 대한 규칙을 가지고 있습니다. 예를 들면 설정파일의 태그설정이나, DB연동 방법등에 대한 규칙을 가지고 있고 개발자는 이를 따라야 합니다.

반면, 라이브러리는 애플리케이션의 흐름을 개발자가 가지고 있고 프로그래밍에 있어서의 자유도가 높습니다.

참고: https://sharonprogress.tistory.com/169

4. 가상 돔(Virtual-DOM)

✅ 답변

가상 DOM은 실제 DOM의 가벼운 복사본이며, 리액트 요소의 상태 변경에 따른 UI 업데이트를 추적합니다.

상태 변경이 발생하면 리액트는 이전 가상 DOM과 현재 상태를 비교하여 변경된 부분을 식별합니다. 이를 위해 리액트는 diffing 알고리즘을 사용하는데, 이 알고리즘은 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 효율적으로 찾아내고 이를 최소한의 DOM 조작으로 반영합니다.

가상 DOM과 diffing 알고리즘을 통해 React는 성능을 최적화하고 빠른 렌더링을 제공합니다. 특히, 대규모 애플리케이션에서도 효과적으로 작동합니다.

참고:

5. state와 props의 차이

✅ 답변

state와 props는 둘 다 컴포넌트 내에서 사용할 수 있는 변수입니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. props는 변경되지 않으며, 자식 컴포넌트에서 전달받은 데이터를 사용하여 렌더링합니다.

반면에 state는 현재 컴포넌트에서 생성하고, 변경될 수 있는 컴포넌트 내부 동적 데이터 입니다. state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능합니다.

(state는 반드시 객체 형태로 생성 되거나 아니면 null (state를 정의하지 않음) 타입이여야만 합니다.)

6. 리액트 생명주기에 대해 아는 대로 설명

✅ 답변

React 컴포넌트에는 생명 주기(라이프사이클)가 존재합니다.

생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어 있고, 이때 사용되는 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있습니다.함수형 컴포넌트에서는 Hook을 사용해 유사한 동작을 구현할 수 있습니다.

마운트란 처음 DOM이 생성된 후 웹 브라우저 상에 컴포넌트가 나타나는 것을 의미합니다.

업데이트는 리액트 컴포넌트에 변화가 생길 때마다 발생하며, props가 바뀌거나 state가 바뀔 때, 또는 부모 컴포넌트가 리렌더링될 때 발생합니다.

마지막으로 언마운트는 컴포넌트가 DOM에서 제거되는 과정을 의미합니다. 마운트 시에 등록되었던 이벤트 및 타이머, 상태들이 제거됩니다.

참고: 생명주기 관련 포스팅

7. 리액트 상태관리의 의미

✅ 답변

리액트는 부모 자식 컴포넌트 간에만 데이터 전달이 이루어지기 때문에 부모 자식 관계가 아닌 각 컴포넌트 간의 직접적인 데이터 전달이 어렵습니다.

이러한 특성으로 인해 props drilling 현상이 나타나고, 그렇게 되면 Prop의 출처를 찾기 어려워져 유지보수나 기능 개발 시에 어려움을 겪을 수 있습니다. 이런 상황에서 전역 상태 관리 도구나 패턴을 사용하여 애플리케이션의 상태를 중앙에서 관리하면 각 컴포넌트에서 필요한 데이터를 저장소에서 그때그때 가져다 쓸 수 있어 더욱 효율적인 프로그래밍이 가능합니다.

추가
- 여러 컴포넌트 간의 데이터 공유를 용이하게 함 ⇒ 중복 코드를 방지하고, 코드의 재사용성 증가
- 성능 최적화에도 도움이 됨.
- 필요한 상태만 업데이트해 불필요한 렌더링, 네트워크 요청을 최소화 함.

출처: 상태관리 포스팅

8. 라우팅이란

✅ 답변

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 라우팅이라 합니다. 리액트에는 라우팅 관련 기능이 없기 때문에 추가적인 라우팅 라이브러리를 설치해서 사용합니다. 대체로 React Router를 가장 많이 사용합니다.

npm install react-router-dom

9. flux 패턴?

✅ 답변

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는, 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다.

redux는 flux패턴을 이용하여 상태 관리를 할 수 있도록 도와주는 라이브러리라고 할 수 있습니다.

10. JSX 에 대해 설명⭐

✅ 답변

JSX는 자바스크립트의 확장 문법으로, 리액트 애플리케이션에서 UI를 작성하는 데 사용됩니다. JSX는 자바스크립트 코드 안에서 HTML과 비슷한 구문을 사용하여 UI 요소를 작성할 수 있게 해줍니다. 이렇게 작성된 JSX 코드는 브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

11. SPA란?

✅ 답변

SPA(Single-Page Application)는 하나의 HTML 페이지를 기반으로 하는 웹 애플리케이션입니다. 전통적인 다중 페이지 애플리케이션과 달리, SPA는 초기 페이지 로드 이후에는 페이지 전체를 새로고침하지 않고 동적으로 콘텐츠를 업데이트합니다.

SPA는 주로 클라이언트 측 라우팅을 사용하여 사용자 경험을 관리합니다. 초기에 모든 필요한 HTML, CSS 및 자바스크립트 파일을 로드하고, 이후에는 필요한 데이터만 서버로부터 가져와서 동적으로 페이지를 업데이트합니다. 이를 통해 사용자가 애플리케이션을 사용하는 동안 빠른 응답성과 부드러운 사용자 경험을 제공할 수 있습니다.

12. useRef에 대해 설명⭐

✅ 답변

첫 번째로, useRef는 변수를 관리하는 데 사용됩니다. useRef로 생성한 변수는 컴포넌트가 리렌더링되어도 초기화되지 않는다는 특징을 가지고 있습니다. (useRef로 참조한 변수의 값이 바뀐다고 해서 state처럼 새롭게 컴포넌트가 리렌더링되지도 않습니다)

따라서 컴포넌트가 리렌더링되어도 값이 변하지 않는 변수를 지정하고 싶을 때 useRef를 사용합니다.

두 번째로, useRef는 DOM 요소나 React 엘리먼트에 대한 참조를 생성하는 데 사용됩니다. 이를 통해 React 컴포넌트 내에서 DOM 요소에 직접 접근해서 DOM을 조작할 수 있습니다. 예를 들어 useRef를 사용하면, 특정 input에 포커스를 주거나 텍스트 선택 영역을 조작하는 등의 작업을 할 수 있습니다.

추가

포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
애니메이션을 직접적으로 실행시킬 때.
서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

참고: React Hooks에 취한다 - useRef 완벽 정리 1# 변수 관리 | 리액트 훅스 시리즈

13. 메모이제이션에 대해 설명해주세요⭐

✅ 답변

리액트에서 메모이제이션(Memoization)은 컴포넌트의 불필요한 리렌더링을 방지하여 성능을 최적화하는 기법입니다. 메모이제이션을 통해 이전에 계산된 값을 저장하고, 동일한 입력값에 대한 연산을 진행하지 않도록 합니다. 리액트에서는 React.memo, useMemo, useCallback과 같은 기능을 통해 메모이제이션을 구현할 수 있습니다.

`React.memo`는 고차 컴포넌트(Higher Order Component, HOC)로, 함수형 컴포넌트를 메모이제이션합니다. React.memo를 사용하면 props가 변경되지 않는 한 컴포넌트를 다시 렌더링하지 않습니다.

`useMemo`는 계산량이 많은 연산의 결과를 메모이제이션하여, 의존성 배열의 값이 변경되지 않는 한 다시 계산하지 않습니다.

`useCallback`은 함수의 메모이제이션을 위해 사용됩니다. 의존성 배열의 값이 변경되지 않는 한 동일한 함수 객체를 반환합니다. 이를 통해 자식 컴포넌트에 props로 전달된 함수를 메모이제이션할 수 있습니다.

* useMemo와 useCallback의 차이점

useMemo: 값의 메모이제이션에 사용
useCallback: 함수의 메모이제이션에 사용

함수의 참조와 useCallback
자바스크립트에서 함수는 일급 객체이므로 함수를 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.
하지만 렌더링할 때마다 새로운 함수가 생성되면, 그 함수의 메모리 주소가 달라지기 때문에 이전의 함수와는 다른 객체로 인식됩니다.
const MyComponent = () => {
  const handleClick = () => {
    console.log("Clicked!");
  };

  return <button onClick={handleClick}>Click me</button>;
};
위의 경우 `MyComponent`가 렌더링될 때마다 `handleClick` 함수가 새로 생성됩니다. 이로 인해 onClick에 할당된 함수는 매번 다른 메모리 주소를 가지게 됩니다.

이로 인해 발생하는 문제
- 리렌더링 최적화: React에서 컴포넌트가 리렌더링될 때마다 새로운 함수 객체가 생성되면, React는 해당 함수가 변경된 것으로 판단하고 해당 컴포넌트를 다시 렌더링하게 됩니다.
- 불필요한 업데이트: 메모리 주소가 달라짐에 따라, React의 `shouldComponentUpdate`나 `React.memo`를 사용할 때 불필요한 업데이트가 발생할 수 있습니다.
이 문제를 해결하기 위해 `useCallback 훅`을 사용할 수 있습니다. `useCallback`은 함수가 의존하는 값이 변경되지 않는 한 동일한 함수 객체를 반환하도록 보장합니다.

14. 라이브러리, 프레임워크의 차이점을 설명

✅ 답변

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게 / 어디에게 있는가에 있습니다.

프레임워크는 이미 프로그래밍에 대한 규칙이 존재하고 개발자는 이를 따라야 합니다. 프레임워크가 그 스스로 제어 흐름의 주도성을 갖는 반면, 라이브러리는 개발자에게 제어 흐름이 존재합니다. 라이브러리를 사용할 시 파일의 구조나 폴더 구조 및 필요한 개발의 모든 것을 개발자가 직접 세팅합니다.(ex. 리액트 - react-routing) 즉 개발자의 자유도가 높습니다.

15. 리액트 훅에 대해 설명

✅ 답변

리액트 훅은 React 16.8버전에 새로 추가된 기능으로, 리액트 훅을 사용하면 리액트 클래스형 컴포넌트에서 사용하던 코드를 함수형 컴포넌트에서도 사용할 수 있습니다.

대표적인 내장 훅에는 useState, useEffect, useContext, useRef, useMemo 등이 있습니다.

리액트 훅은 함수형 컴포넌트의 기능을 확장하고 코드의 재사용성을 높이며, 더 간결하고 이해하기 쉬운 코드를 작성하는 데 도움을 줍니다.

16. 사용해 봤던 상태관리 라이브러리 장단점 비교⭐

✅ 답변

Redux

Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나로, 전역 상태를 엄격한 규칙에 따라 관리합니다.

장점

예측 가능한 상태 관리: 상태가 단일 저장소(Store)에서 관리되고, 상태 변경이 항상 Action과 Reducer를 통해 이루어지기 때문에 예측 가능하고 디버깅이 쉽습니다.
도구 지원: Redux DevTools와 같은 강력한 개발자 도구가 제공되어 상태 변경을 추적하고, 시간여행 디버깅(Time-Travel Debugging, 애플리케이션에서 발생한 상태 변화를 과거로 되돌아가면서 탐색할 수 있는 디버깅 방식)이 가능합니다.
미들웨어: redux-thunk나 redux-saga와 같은 미들웨어를 통해 비동기 작업을 쉽게 처리할 수 있습니다.
거대한 생태계: 많은 플러그인과 확장이 존재하며, 커뮤니티와 문서가 풍부합니다.

단점

보일러플레이트 코드: Action, Reducer, Store 설정 등 초기 설정이 복잡하고 많은 코드가 필요합니다.
복잡성: 작은 프로젝트나 간단한 상태 관리에는 오버엔지니어링일 수 있으며, 상태 변경의 과정이 다소 무겁게 느껴질 수 있습니다.
러닝 커브: 처음 학습할 때 개념이 복잡하게 느껴질 수 있으며, 특히 미들웨어와 비동기 로직을 다룰 때 어려움이 있을 수 있습니다.

Zustand

Zustand는 더 간결하고 사용하기 쉬운 상태 관리 라이브러리로, 보일러플레이트를 최소화한 상태 관리가 가능하며 React 애플리케이션에서 사용하기 적합합니다.

장점

간단한 API: Redux와 비교했을 때 설정이 매우 간단하고 보일러플레이트 코드가 거의 없습니다. 상태를 함수로 정의하고, 쉽게 관리할 수 있습니다.
선택적 리렌더링: 필요할 때만 구독된 컴포넌트를 리렌더링하므로 성능 최적화가 용이합니다.
직관적인 사용법: 기본적으로 함수형 프로그래밍 패턴을 사용하여 상태를 쉽게 업데이트하고 가져올 수 있습니다.
가벼운 라이브러리: 매우 가벼워서 작은 프로젝트나 복잡하지 않은 상태 관리에 이상적입니다.
미들웨어 지원: persist 등의 미들웨어로 간단하게 상태를 로컬 저장소에 저장할 수 있습니다.

단점

커뮤니티: Redux에 비해 상대적으로 작은 커뮤니티와 생태계를 가지고 있으며, 문서도 상대적으로 간결하여 복잡한 사용 사례에 대한 자료가 부족할 수 있습니다.
큰 프로젝트에 한계: 복잡한 상태 관리가 필요한 대형 애플리케이션에서는 도구의 지원이 부족하거나 상태 관리가 어려울 수 있습니다.

Context API

Context API는 React에서 기본적으로 제공하는 상태 관리 기능으로, 전역 상태를 간단하게 관리할 수 있는 방법입니다.

장점

내장 기능: React에 기본적으로 포함되어 있어 추가적인 라이브러리 설치가 필요하지 않습니다.
간단한 설정: 소규모 프로젝트나 간단한 상태 관리에는 매우 유용하며, 상태를 쉽게 전달할 수 있습니다.
함수형 컴포넌트와 잘 맞음: React의 함수형 컴포넌트와 매우 자연스럽게 통합됩니다.
구독 모델: 특정 컨텍스트에 구독된 컴포넌트만 리렌더링할 수 있습니다.

단점

성능 문제: 상태가 자주 변경되는 경우, Context를 사용하는 컴포넌트는 불필요한 리렌더링을 일으킬 수 있습니다.
전역 상태 관리에 한계: Context API는 전역 상태 관리보다는 데이터를 깊이 있는 트리 구조로 전달할 때 유리하며, 복잡한 상태 관리에는 적합하지 않을 수 있습니다.
트리 구조 문제: 중첩된 트리 구조에서는 데이터 흐름이 복잡해질 수 있으며, 관리가 어려워질 수 있습니다.

요약 비교

라이브러리	장점	단점	사용 용도
Redux	예측 가능한 상태 관리, 강력한 도구 지원, 미들웨어 활용	보일러플레이트 코드, 러닝 커브, 복잡성	복잡한 상태 관리가 필요한 대규모 애플리케이션
Zustand	간단한 API, 선택적 리렌더링, 가벼움, 미들웨어 지원	작은 커뮤니티, 큰 프로젝트에서는 복잡성 관리에 한계	소규모 프로젝트, 간결한 상태 관리
Context API	내장 기능, 간단한 설정, 소규모 상태 관리에 적합	성능 문제, 복잡한 상태 관리에는 적합하지 않음	소규모 상태 관리, 간단한 데이터 전달

Redux는 복잡한 상태 관리를 요구하는 대규모 프로젝트에 적합하고, Zustand는 간단하고 가벼운 상태 관리가 필요한 경우 유용하며, Context API는 간단한 전역 상태 관리나 데이터 전달에 적합합니다.

17. 양방향 통신과 단방향 통신의 차이와 장단점을 설명

✅ 답변

- 단방향 통신: 데이터가 부모에서 자식으로 한 방향으로만 전달됩니다. 데이터 흐름이 예측 가능하고, 유지 보수가 쉽습니다. 리액트는 단방향 데이터 흐름을 사용합니다.

- 양방향 통신: 데이터가 상호작용할 수 있으며, 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달할 수 있습니다. 복잡한 데이터 구조를 처리할 때 유용하지만, 데이터 흐름이 복잡해질 수 있습니다.

18. React에서 state의 불변성을 유지하는 방법

✅ 답변

React에서는 불변성을 유지하기 위해 `Object.assign` 또는 `전개 연산자(…)`를 사용하여 기존 객체나 배열을 복사한 후 수정합니다. 불변성을 유지하면 변경 사항을 추적할 수 있어 리액트의 상태 관리와 성능 최적화에 도움이 됩니다.

19. 커스텀 훅을 작성하는 이유

✅ 답변

중복된 로직을 재사용하고, 코드의 가독성을 높이며 상태 관리 로직을 분리하기 위해 커스텀 훅을 작성합니다.

20. useEffect와 useLayoutEffect의 차이점

✅ 답변

useEffect: DOM이 변경된 후 비동기로 실행됩니다. 주로 데이터 패칭, 이벤트 리스너 등록 등에 사용됩니다.
useLayoutEffect: DOM이 변경된 직후, 화면이 그려지기 전에 동기적으로 실행됩니다. 레이아웃 조정이나 DOM 조작이 필요한 경우에 사용합니다.

리액트가 등장하게 된 배경(이유)에 대해 설명해주세요(*)

component

Re-rendering

useEffect

저작자표시 비영리 변경금지

'Developer > 취업 | 취준' 카테고리의 다른 글

취업 후 1개월 반 후기 (0)	2024.11.23
면접대비 질문 정리: Next.js (4)	2024.08.26
면접대비 질문 정리: 자바스크립트, 타입스크립트 (0)	2024.05.01
면접대비 질문 정리: 웹, HTML, CSS (0)	2024.04.11

노력중인 블로그

면접대비 질문 정리: 리액트

면접질문 참고

1. 리액트란?

2. 리액트를 사용한 이유?

3. 프레임워크 vs 라이브러리

4. 가상 돔(Virtual-DOM)

5. state와 props의 차이

6. 리액트 생명주기에 대해 아는 대로 설명

7. 리액트 상태관리의 의미

8. 라우팅이란

9. flux 패턴?

10. JSX 에 대해 설명⭐

11. SPA란?

12. useRef에 대해 설명⭐

13. 메모이제이션에 대해 설명해주세요⭐

14. 라이브러리, 프레임워크의 차이점을 설명

15. 리액트 훅에 대해 설명

16. 사용해 봤던 상태관리 라이브러리 장단점 비교⭐

17. 양방향 통신과 단방향 통신의 차이와 장단점을 설명

18. React에서 state의 불변성을 유지하는 방법

19. 커스텀 훅을 작성하는 이유

20. useEffect와 useLayoutEffect의 차이점

'Developer > 취업 | 취준' 카테고리의 다른 글

티스토리툴바

면접대비 질문 정리: 리액트

면접질문 참고

1. 리액트란?

2. 리액트를 사용한 이유?

3. 프레임워크 vs 라이브러리

4. 가상 돔(Virtual-DOM)

5. state와 props의 차이

6. 리액트 생명주기에 대해 아는 대로 설명

7. 리액트 상태관리의 의미

8. 라우팅이란

9. flux 패턴?

10. JSX 에 대해 설명⭐

11. SPA란?

12. useRef에 대해 설명⭐

13. 메모이제이션에 대해 설명해주세요⭐

14. 라이브러리, 프레임워크의 차이점을 설명

15. 리액트 훅에 대해 설명

16. 사용해 봤던 상태관리 라이브러리 장단점 비교⭐

17. 양방향 통신과 단방향 통신의 차이와 장단점을 설명

18. React에서 state의 불변성을 유지하는 방법

19. 커스텀 훅을 작성하는 이유

20. useEffect와 useLayoutEffect의 차이점

'Developer > 취업 | 취준' 카테고리의 다른 글

관련글

티스토리툴바