[ 리액트 면접준비 ] 프론트엔드 면접 준비, React.js

안녕하세요!~ 오늘 프론트엔드 개발자로써 면접 준비 과정을 정리해 기록해봤습니다.

React 기념, 특징과 React 쓰는 이유

React는 Facebook에서 개발한 UI(User Interface) 라이브러리로, JavaScript를 기반으로 합니다. React는 UI를 더욱 간편하게 구성하도록 해주는 선언형(Declarative) 프로그래밍 방식을 제공합니다. 이를 통해 개발자는 웹, 모바일, 데스크톱 등 여러 플랫폼에서 일관성 있고 빠르게 UI를 개발할 수 있습니다.

리액트의 특징은 다음과 같습니다:

컴포넌트 기반 아키텍처

React는 컴포넌트 기반 아키텍처를 사용합니다. 이는 UI를 작은 재사용 가능한 컴포넌트로 나누어 개발하는 것을 의미합니다. 코드 유지 보수가 더 쉬워지고, 앱 개발이 더 빠르고 효율적으로 진행될 수 있습니다.

Jsx

JSX (Javascript + XML(Extensible Markup Language) ) 는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 줍니다. 단순히 개발자가 마크업 코드에 익숙하다면, 그것만으로도 JSX를 통해 컴포넌트를 구성하는 데 쉽게 적응할 수 있다는 장점이 있습니다.

Vitual DOM

React는 가상 DOM을 사용합니다. 이를 통해 React는 빠른 UI 업데이트와 최적화된 성능을 제공합니다. React는 실제 DOM에 적용되기 전에 변경 사항을 추적하고, 가상 DOM에서 먼저 변경 사항을 적용하며, 변경 사항이 최소화되므로 성능 향상을 얻을 수 있습니다.

활발한 생태계, 뮤니티, 자료

React는 매우 활발한 개발자 생태계를 가지고 있습니다. 많은 개발자들이 React를 사용하며, React에 대한 문서와 튜토리얼, 오픈 소스 프로젝트, 플러그인 등이 많이 존재합니다. 이는 개발자들이 React를 사용하며 앱을 더욱 빠르고 효율적으로 개발할 수 있도록 지원합니다.

단방향 데이터 바인딩

React는 단방향 데이터 바인딩을 지원합니다. 이는 데이터가 한 방향으로만 흐르는 것을 의미합니다. 이는 상태 관리를 보다 쉽게 만들며, 데이터를 추적하고 관리하기 쉬워집니다. 또는 UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있습니다

ES6이란 무엇인가?

ES6는 ECMA라는 국제 기구에서 만든 표준 문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 말합니다. 6번째 버전이 2015년에 나왔기 때문에 ES2015라고도 합니다. 추가적으로 ECMA 인터내셔널은 정보와 통신 시스템에 대한 표준을 제정하는 국제적 표준화 기구입니다.

ES6에서 추가된 몇 가지 기능은 다음과 같습니다:

1. 화살표 함수(Arrow functions)
2. let과 const 변수 선언
3. 클래스(Class)
4 . 템플릿 리터럴(Template literals)
5. 디스트럭처링(Destructuring)
6. 확장된 객체 리터럴(Enhanced object literals)
7. Promise와 async/await
8 . 모듈(Module)

이런 ES6의 새로운 기능들은 JavaScript를 더욱 간결하고 효율적으로 작성할 수 있게 해주며, 개발자들이 더욱 쉽게 코드를 작성하고 유지 보수할 수 있도록 도와줍니다. ES6의 기능을 활용하면 JavaScript를 더욱 선언적(Declarative)이고 함수형(Functional) 프로그래밍 방식으로 작성할 수 있으며, 이는 코드의 가독성과 유지 보수성을 향상시켜줍니다.

Babel이란 무엇인가?

Babel은JavaScript 컴파일러이고 최신 버전의 JavaScript로 코드를 작성하는데 도움이 되는 도구입니다. JavaScript의 버전업그레이드로 인한 최신 문법을 가진 ES6+ 코드를 런타임 환경인 브라우저가 인식하고 실행하는데 문제가 생시고 효율성과 유지보수등의 이유로 코드는 ES6+ 로 구현해야 하는데 실행환경인 모든 브라우저가 최신 문법을 다 지원하지 못하기에 버전 차이가 발생하게 됩니다. 이러한 문제를 해결해 주는게 Babel라고 합니다.

Babel은 이러한 기능을 수행하기 위해 다양한 플러그인(plugin)을 제공합니다. 이 플러그인들은 각각 다른 역할을 수행하며, 코드를 변환할 때 적용할 수 있습니다. 또한, Babel은 빌드 도구(build tool)와 연동하여 자동으로 코드 변환 작업을 수행할 수 있도록 해주는 기능도 제공합니다.

Babel은 React, Vue, Angular 등의 모던 프론트엔드 프레임워크와 함께 사용되어, 최신 JavaScript 기능을 활용한 모던한 웹 애플리케이션 개발을 가능하게 해줍니다.

Dom이란 무엇인가?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이며 DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와줍니다.

DOM은 웹 페이지를 구성하는 요소(Element)들을 객체로 나타내며, 이들 객체는 서로 중첩되어 있고, 부모-자식 관계를 갖고 있습니다. 이러한 객체 모델은 자바스크립트와 같은 프로그래밍 언어를 통해 동적으로 수정될 수 있습니다.

웹 페이지의 요소들은 DOM 트리 구조로 구성되어 있습니다. 가장 상위 노드는 document 객체이며, 이 하위에 HTML 요소들이 포함됩니다. 이 요소들은 다시 하위 요소들을 가질 수 있으며, 이러한 구조를 통해 웹 페이지의 구조를 나타내는 것입니다.

DOM은 웹 페이지의 요소들을 조작하고 제어하는 데 사용됩니다. JavaScript를 사용하여 DOM을 조작할 수 있으며, 이를 통해 동적으로 웹 페이지를 변경하거나 이벤트를 처리할 수 있습니다. 또한, jQuery, React, Vue 등의 프론트엔드 라이브러리나 프레임워크에서도 DOM을 사용하여 웹 페이지를 조작합니다.

Hook 이란..?

Hook은 리액트 hook은 React 16.8버전에 새로 추가된 기능으로, 함수형 컴포넌트에서 react state와 생명주기 기능( lifecycle features )을 "연동(hook into)할 수 있게 해주며 useState를 예시로 들면 class를 사용하지 않고도 상태를 가질 수 있게 된 것입니다. 또한 props, state, context, refs 그리고 lifecycle과 같은 리액트 개념에 좀 더 직관적인 API를 제공한다. 또한 이 개념들을 엮기 위해 새로운 방법을 제공합니다.

Hook의 장점으로서 컴포넌트로부터 상태 관련 로직을 추상화할 수 있고 이를 이용해 독립적인 재사용이 가능합니다. 생명주기 메서드를 기반으로 쪼개는 것 보다는 훅을 통해 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.

React에서 제공하는 기본적인 Hook으로는 useState, useEffect, useContext 등이 있습니다.

useState: 함수형 컴포넌트에서 상태를 관리하기 위한 Hook입니다. useState 함수는 배열을 반환하며, 첫 번째 요소는 현재 상태 값을, 두 번째 요소는 상태 값을 변경할 수 있는 함수를 반환합니다. useState를 이용해서 버튼 클릭할때마다 상태 값이 변경되는 예시입니다.

import React, { useState } from 'react';

function Counter() {

  /* useState를 사용하여 count라는 상태와 setCount 함수를 생성합니다 */
  
  const [count, setCount] = useState(0);
  

  /* 버튼을 누를 때마다 count 값을 증가시키는 handleClick 함수를 작성합니다.*/
  
  function handleClick() {
    setCount(count + 1);
  }
  
  
  /* 버튼을 누를 때마다 count 값을 감소시키는 handleDown 함수를 작성합니다. */
  
  function handleDown() {
    setCount(count - 1);
  }

  /* JSX를 사용하여 버튼을 렌더링합니다. */
  
  return (
    <div>
      <p>Count: {count}</p>
      
      
      /*  증가시키는 버튼 + handleClick 함수 사용 */
      
      <button onClick={handleClick}>+1</button>
      
      
      /* 감소시키는 버튼 + handleDown 함수 사용 */
      
      <button onClick={handleDown}>-1</button>
    </div>
  );
}

useEffect: 함수형 컴포넌트에서 생명주기 메서드를 사용하기 위한 Hook입니다. useEffect 함수는 컴포넌트가 렌더링 될 때마다 실행되며, 해당 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등 다양한 타이밍에 실행할 수 있습니다.

useContext: 컴포넌트 트리 안에서 전역적으로 상태를 관리하기 위한 Hook입니다. createContext를 통해 생성한 Context 객체를 사용하여 컴포넌트 간에 값을 공유할 수 있습니다.

추가적으로 useReducer, useCallback, useMemo, useRef, useImperativeHandle 등 다양한 Hook이 존재합니다. Hook을 사용하면 클래스 컴포넌트와 함수형 컴포넌트 간의 차이가 줄어들어 코드 작성이 간편해지고, 컴포넌트의 재사용성과 성능을 개선할 수 있습니다.

State

State : state는 간단하게 말해서 변수입니다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링되어 화면이 바꿥니다.

const [state, setState] = useState('');

let 대신 const 쓰느 이유는 변수의 재할당 막기위해이고 변수 현식 할당 가능해서 let 대신 const을 씁니다.

일반 변수는 변경되어도 자동으로 화면이 재렌더링되지 않고 state를 사용하면 변수를 데이터 바인딩 할 수 있습니다.

Key

key: key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 리액트에서 key는 컴포넌트 리스트를 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용하며 유동적인 데이터를 다룰 때, 리스트의 중간에 새로운 컴포넌트가 추가될 수도, 삭제될 수도 있습니다.

useEffect

useEffect() : useEffect는 React에서 제공 내장 라이브러리 api 함수로 Side Effect를 함수형에서 사용할 수 있게 하는 리액트 hooks입니다. useEffect의 기본형태는 useEffect( function , deps) => function : 수행하고자 하는 작업( ex)실행시킬 함수), deps : 배열형태로 배열안에 검사하고자 하는 특정 값,혹은 빈배열.

컴포넌트가 업데이트 될때 (특정 props, states가 바뀔때)

useEffect(()=> {
		console.log("나타났을때만 호출")
    },[props(바뀌는값)])

dependency array : 언뜻 생각해보면 dependency array에 어떤 변수를 넣어도 해당 변수의 값이 변하면 콜백함수가 호출된다고 생각할 수도 있으며 하지만 dependency array를 비교하려면 useEffect함수가 실행이 되어야 합니다. useEffect함수가 실행이 된다는 것은 컴포넌트 함수가 호출된다는 것이고 이것은 곧 컴포넌트가 렌더링 된다는 것과 같은 뜻입니다.

React.memo

React.memo : React.memo는 Higher-Order Components(HOC)입니다. (HOC란 컴포넌트를 인자로 받아서 새로운 컴포넌트를 return해주는 구조의 함수) . 하나의 컴포넌트가 똑같은 props를 넘겨 받았을 때 같은 결과를 렌더링 하고 있다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지 할 수 있으며 React.memo를 사용할 경우 이전과 같은 props가 들어올때는 렌더링 과정을 스킵하고 가장 최근에 렌더링된 결과를 재사용 합니다.

React.memo의 사용법

export default React.memo(component);

useMemo : useMemo는 메모이즈된 값을 return하는 hook입니다. useMemo는 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용됩니다. (특정 value를 재사용) useMemo 사용법

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef와의 차이 : useMemo는 deps가 변경되기 전까지 값을 기억하고, 실행후 값을 보관하는 역할로도 사용합니다. 복잡한 함수의 return 값을 기억한다는 점에서 useRef와는 다르고 useRef는 특정 값을 기억하는 경우, useMemo는 복잡한 함수의 return값을 기억하는 경우에 사용합니다.

useCallback

useCallback: useCallback은 리액트의 렌더링 성능을 위해서 제공되는 Hook입니다. 컴포넌트가 렌더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 자식 컴포넌트에 Prop으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리렌더링이 일어날 수 있습니다.

useCallback 함수는 첫 번째 인수로 입력된 콜백의 메모이제이션 버전을 반환합니다.
반환된 메모이제이션 버전은 콜백의 의존성이 변경되었을 때만 변경되며, 이는 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.
예로 React의 Memo로 감싸진 컴포넌트에 프롭으로 전달하는 경우, 자주 사용됩니다.

React.memo, useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있습니다. React.memo는 HOC이고, useMemo와 useCallback은 hook입니다. React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능합니다.useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적입니다.

LifeCycle

React의 라이프사이클 : React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는, 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.

Virtual DOM

Virtual DOM : DOM과 유사한 객체를 메모리에 올리고, 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고, DOM에 대해 비교를 수행하여 변경사항에 대해서만 DOM에 반영하는 것을 말합니다.
이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.

React Hook

React Hook : 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다.
훅을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태값을 관리할수도, 컴포넌트의 생명 주기 메소드또한 이용할 수 있게 해줍니다. 추가적으로 커스텀훅을 통해 재사용성 있는 함수를 여러 컴포넌트에서 쉽게 사용할 수 있습니다.

useRef

useRef : useRef 은 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환하며, 이 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 이 전 생애주기를 통한 유지란 컴포넌트가 리렌더링되어도 값이 유지가된다는 뜻입니다.

Error Boundaries

Error Boundaries : 에러 바운더리('Error Boundaries')는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.

함수형 컴포넌트의 장점

클래스형 컴포넌트보다 선언이 간편합니다.
클래스형 컴포넌트보다 메모리 자원을 덜 사용합니다.
프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작습니다.
이전에는 라이프사이클 API를 사용하지 못한다는 단점이 있었는데, 이제는 16.8부터 지원하는 Hook을 통해 이한 단점이 사라졌습니다.

Redux와 Mobx 중에 Redux를 사용하는 이유

Redux는 상태값 변경 시 순수함수만을 사용하여 사이드 이펙트가 없으며, 이로 인해 테스트 코드를 작성하기 쉽다는 장점이 있습니다.
MobX의 경우 클래스형 컴포넌트가 기본 기준으로 잡혀있어, 함수형 컴포넌트에서 Hook과 함께 사용하려고 하면 오류가 발생했었습니다.

'면접준비' 카테고리의 다른 글

[프론트엔드 면접] HTTP와 HTTPS의 개념 및 차이점 (6)	2024.02.12
[ 프론트엔드 면접 ] Vue.js 면접 질문 정리 (1)	2023.04.07
[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , JavaSctipt (0)	2023.02.21
[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , HTML + CSS (0)	2023.02.20
[ 면접 준비 ] 프론트엔드 면접 준비, 기술 면접 (0)	2023.02.18