기술면접 - React

Virtual DOM은 웹 개발에서 효율적인 렌더링을 위해 사용되는 프로그래밍 개념입니다. 이는 JavaScript 객체를 사용하여 실제 DOM의 복사본을 만들며, 이렇게 만들어진 복사본을 'Virtual DOM'이라고 부릅니다. DOM(Document Object M

JSX는 JavaScript XML의 약자로, 자바스크립트 내에서 HTML을 작성하기 위한 문법입니다. Facebook이 개발한 React 라이브러리에서 주로 사용되며, 복잡한 UI 구조를 더욱 쉽게 작성하고 이해할 수 있도록 도와줍니다.JSX는 일반적인 자바스크립트

React에서는 주로 두 가지 유형의 컴포넌트를 사용하여 UI를 만듭니다: 클래스 컴포넌트와 함수형 컴포넌트입니다. 클래스 컴포넌트: 이들은 ES6의 클래스를 기반으로 생성됩니다. 클래스 컴포넌트는 React의 생명주기 메소드에 접근할 수 있으며, this.state를

React에서 key는 컴포넌트 리스트를 렌더링할 때 각 항목을 식별하기 위한 고유한 문자열을 의미합니다. key의 주요 목적은 React가 렌더링 된 항목을 식별하고 추적하도록 돕는 것입니다.리스트나 배열의 각 항목을 반복적으로 렌더링 할 때, React는 DOM 업

리액트에 있는 라이프 사이클과 각 라이프 사이클의 역할에 대해 설명해주세요. 리액트 라이프사이클이란? 리액트에서는 라이프사이클 메서드를 통해 컴포넌트의 생성, 업데이트, 제거 등의 과정을 관리합니다. 이를 통해 특정 시점에 필요한 동작을 수행할 수 있습니다. 202

리액트 Hooks는 16.8 버전부터 도입된 기능으로, 클래스 컴포넌트의 라이프사이클이나 상태 관리 등의 기능을 함수형 컴포넌트에서도 사용할 수 있게 해줍니다. Hooks의 도입으로 인해 많은 장점이 있습니다:코드 간결성: 함수형 컴포넌트와 Hooks를 사용하면 클래스

useCallback은 리액트의 Hook 중 하나로, 특정 함수를 재사용할 수 있도록 돕습니다. useCallback Hook은 메모이제이션된 버전의 콜백 함수를 반환합니다. 이는 함수 내에서 사용하는 상태나 속성이 변경될 때까지 동일한 함수를 재사용하는 데 도움이 됩

React에서 상태(state)를 직접 변경하지 않고 setState를 사용하는 이유는 두 가지 주요한 이유가 있습니다:상태 변경의 비동기성: React는 성능 최적화를 위해 여러 setState 호출을 한 번에 처리하는 비동기 업데이트를 수행합니다. 이러한 업데이트

Context API에 대해 설명해주세요 Context API란? Context API는 React에서 상태나 데이터를 전역적으로 공유하기 위한 메커니즘을 제공하는 기능입니다. Context를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 props로 전달하지

useMemo는 React의 훅 중 하나로, 계산 비용이 많이 드는 함수의 결과를 메모이제이션하는 데 사용됩니다. 메모이제이션은 이전에 계산한 값을 저장하여 동일한 계산을 반복하지 않도록 하는 최적화 기법입니다.useMemo 훅은 두 가지 인수를 받습니다: 첫 번째 인

FLUX 패턴은 Facebook에서 개발한 React의 상태 관리 아키텍처 패턴입니다. 이 패턴은 React와 함께 사용되는 애플리케이션의 데이터 흐름을 설명하는 개념입니다. "FLUX"라는 용어는 데이터 흐름의 개념을 나타내기 위해 사용되었습니다.FLUX 패턴은 단방

React와 Vue는 모두 인기 있는 프론트엔드 JavaScript 라이브러리이며, 웹 애플리케이션을 구축하는 데 사용됩니다. 하지만 React와 Vue는 몇 가지 중요한 차이점이 있습니다:학습 곡선: React는 JavaScript와 JSX를 사용하여 컴포넌트 기반의

"props"는 React에서 컴포넌트 간 데이터를 전달하는 데 사용되는 속성입니다. 컴포넌트는 일반적으로 다른 컴포넌트에 데이터를 전달하고자 할 때 props를 사용합니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 props를 사용하여 데이터

HOC(고차 컴포넌트, Higher-Order Component)는 React에서 컴포넌트 로직을 재사용하기 위해 사용되는 디자인 패턴입니다. HOC는 함수로 구현되며, 인자로 컴포넌트를 받아 새로운 컴포넌트를 반환하는 방식으로 동작합니다.HOC는 기존 컴포넌트를 래핑

제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 React에서 폼(form) 요소를 다룰 때 사용되는 두 가지 접근 방식입니다. 이 두 방식은 폼 입력값을 다루는 방식과 관련이 있습니다.제어 컴포넌트(

재조정(Reconciliation)은 React에서 가상 돔(Virtual DOM)을 사용하여 UI를 효율적으로 업데이트하는 과정입니다. React는 상태(state) 변경에 따른 UI 업데이트를 처리하기 위해 가상 돔과 실제 돔을 비교하고 필요한 변경 사항을 최소화합

React에서 조건부 렌더링을 수행하기 위해 다양한 방법을 사용할 수 있습니다.조건문(if/else): JavaScript의 일반적인 조건문을 사용하여 조건부 렌더링을 수행할 수 있습니다. 조건을 평가하고 JSX 코드에서 조건에 따라 다른 컴포넌트나 엘리먼트를 반환합니

React-query가 무엇인가요? React-query의 개념 React-Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 데 도움을 주는 JavaScript 라이브러리입니다. 이 라이브러리는 서버로부터 데이터를 효율적으로 가져와 컴포넌트 상태를

Redux는 JavaScript 애플리케이션의 상태 관리를 위한 상태 관리 라이브러리입니다. React와 함께 사용되는 것이 일반적이지만, 다른 JavaScript 프레임워크나 라이브러리와도 함께 사용할 수 있습니다.Redux의 주요 목표는 애플리케이션의 상태를 예측

Redux와 Context API는 둘 다 React 애플리케이션에서 상태 관리를 위해 사용되는 도구입니다. 그러나 두 가지 접근 방식에는 몇 가지 주요한 차이점이 있습니다:복잡성과 유연성: Redux는 상태 관리를 위해 중앙 집중화된 데이터 저장소(스토어)를 사용하는

setState 메서드에서 prevState를 사용하는 이유는 상태 업데이트가 비동기적일 수 있기 때문입니다. React는 상태 업데이트를 배치(batch)로 처리하고, 연속적인 setState 호출이 즉시 반영되지 않을 수 있습니다. 따라서 이전 상태를 직접 참조하여

React 함수형 컴포넌트에서 componentWillUnmount와 같은 정리(clean-up) 동작을 구현하려면 useEffect 훅의 반환 함수를 활용할 수 있습니다. useEffect 훅은 컴포넌트의 라이프사이클 개념 중 componentDidMount, com

React의 Strict 모드(Strict Mode)는 개발 환경에서 추가적인 검사와 경고를 활성화하여 애플리케이션의 잠재적인 문제를 식별하고 개선하기 위한 도구입니다. Strict 모드는 개발 시에만 활성화되며, 프로덕션 환경에서는 비활성화됩니다.Strict 모드는

React Router는 React 애플리케이션에서 브라우저의 주소와 상호작용하기 위한 라이브러리입니다. React Router는 URL 경로에 따라 다른 컴포넌트를 렌더링하고, 애플리케이션의 라우팅을 관리하는 역할을 수행합니다.React Router의 동작 원리는 다

React의 렌더링 과정은 다음과 같습니다:1\. 초기 렌더링(Initial Rendering):ReactDOM.render() 함수나 React의 컴포넌트를 사용하여 초기 렌더링을 시작합니다.루트 컴포넌트가 ReactDOM.render() 함수로 전달되면 해당 컴포넌

propTypes는 React 컴포넌트에서 사용되는 속성(props)의 유효성을 검사하기 위해 제공되는 기능입니다. propTypes를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 속성(props)의 타입을 명시하고, 잘못된 타입의 속성이 전달될 경우 개발자에게

Redux 미들웨어(Redux Middleware)는 Redux 스토어(Store)와 액션(Action) 사이에서 동작하는 확장 기능입니다. 미들웨어는 Redux 애플리케이션에서 액션을 디스패치할 때 추가적인 동작을 적용하거나 액션을 가로채서 변경할 수 있는 방법을 제

React Error Boundary는 React 컴포넌트 트리 내에서 에러를 처리하고 관리하는 기능입니다. 일반적으로 React 컴포넌트에서 에러가 발생하면 해당 컴포넌트와 그 하위 컴포넌트들이 완전히 언마운트되고 애플리케이션이 중단됩니다. 그러나 Error Boun

React에서 형제 컴포넌트 간에 데이터를 전달하려면 일반적으로 공통의 부모 컴포넌트를 통해 데이터를 전달하는 방법을 사용합니다. 부모 컴포넌트에서 상태(state) 또는 속성(props)을 관리하고, 이를 자식 컴포넌트에 전달하여 형제 간에 데이터를 공유할 수 있습니

refs는 React 컴포넌트에서 DOM 요소나 컴포넌트 인스턴스에 직접 접근할 수 있게 해주는 기능입니다. refs는 주로 다음과 같은 경우에 사용됩니다:DOM 요소에 접근: refs를 사용하여 DOM 요소에 직접 접근할 수 있습니다. 예를 들어, 특정 DOM 요소의

React에서 리다이렉트를 처리하기 위해 react-router-dom 패키지의 Redirect 컴포넌트를 사용할 수 있습니다. Redirect 컴포넌트를 사용하면 브라우저의 URL을 다른 경로로 리다이렉트할 수 있습니다.다음은 Redirect 컴포넌트의 사용 예시입니

React Router v6는 v5와 비교해서 달라진 점이 많습니다.달라진 점의 예로는 다음과 같은 것들이 있습니다:작아진 번들 사이즈: v6는 v5대비 70% 정도의 크기가 줄어들었습니다. 덕분에 좀 더 최적화에 적합해졌습니다.switch에서 routes로 변경: 기

Redux Saga는 Redux와 함께 사용되는 미들웨어 라이브러리입니다. Redux Saga를 사용하면 애플리케이션의 비동기 작업, 즉 데이터 가져오기, 서버 요청 처리, WebSocket 연결 등을 보다 간편하고 효율적으로 관리할 수 있습니다.Redux Saga는

Redux Thunk는 Redux와 함께 사용되는 미들웨어 라이브러리로, 비동기 작업을 처리하기 위한 방법 중 하나입니다. Redux Thunk를 사용하면 액션 크리에이터(액션 생성 함수)에서 일반적인 액션 객체 대신 함수를 반환할 수 있습니다.Redux Thunk를

Custom Hook은 React 컴포넌트에서 로직을 재사용하기 위한 JavaScript 함수입니다. Custom Hook은 "use"로 시작하는 함수 이름을 가지며, 내부에서 다른 React Hooks를 사용할 수 있습니다.Custom Hook을 작성하여 컴포넌트 로

Redux Toolkit은 Redux를 보다 간편하고 효율적으로 사용할 수 있도록 도와주는 공식적인 Redux의 추천 라이브러리입니다. Redux Toolkit은 Redux 애플리케이션 개발에 필요한 여러 가지 도구와 유틸리티 함수를 제공하며, 보일러플레이트 코드를 줄