[면접 질문 정리] - React 질문

리액트

리액트란?

리액트는 2011년 페이스북의 개발자들에 의해 탄생한 자바스크립트 라이브러리로서, 웹/모바일 애플리케이션의 뷰를 개발할 때 사용된다. 리액트는 컴포넌트에 기반한 접근 방식을 사용하므로, 재사용 가능성이 높은 컴포넌트를 개발할 수 있다.

 

리액트의 주요 특징

리액트의 주요 특징

리액트는 단방향식 데이터 흐름 모델을 사용한다. (참고: "데이터는 아래로 흐릅니다")

리액트는 가상 DOM을 사용한다.

 

 

 

단방향 바인딩하는 이유

코드 흐름 파악하기 쉽고 유지보수시 장점이 있기 때문입니다.

React의 상태관리 방법에 대해서 설명하시오

   - 리액트의 상태관리에는 context API를 통한 방법 및 MobX, Redux 등의 라이브러리를 사용한 방법이 있다. 그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용된다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, reduc-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은 소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있다.

 

클래스형 컴포넌트와 함수형 컴포넌트를 비교해주세요.

   - 리액트에서 컴포넌트를 선언하는 두가지 방식인 클래스형 컴포넌트와 함수형 컴포넌트 중, 클래스형의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능하다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능하다. 함수형 컴포넌트보다 먼저 나왔기 때문에 유지보수를 위해 알아두어야 한다. 
함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다.   

 

React의 라이프사이클에 대해 설명해주세요

   - 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프 사이클은 총 9개의 과정이 존재하는데 크게는 컴포넌트가 처음 실행될때인 Mount, 데이터에 변화가있을때인 Update, 컴포넌트가 제거 될때인 Unmount이렇게 세개로 나눌 수 있다. (아주 잘 설명되어있는 블로그 바로 여기)

 

 

 

State  VS Props

공통점

- 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는 일반 JavaScript 객체입니다.

 

차이점

- props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면

- state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

Virtual Dom

Virtual DOM?

1. Virtual DOM이란?

→ "DOM을 추상화한 가상의 객체" 이때 DOM은 document object model의 약자로 "문서의 구성요소들을 객체로 구조화하여 나타낸 것"입니다. 실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과 비교해서 달라진 부분을 리렌더링 시켜주는 방식으로 작동을 한다.

 

리액트를 사용하는 이유

React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다. 컴포넌트를 레고처럼 다루어 레고를 조립하듯이 컴포넌트를 조립하여 UI를 개발하여서 유지 보수하기에 유리합니다. React를 사용하면 페이지 전체를 렌더링 하지 않고 렌더링이 필요한 부분만 렌더링 할 수 있습니다.

 

 

클래스형 컴포넌트와 함수형 컴포넌트

리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있다.

클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있다.

그러나 함수형 컴포넌트는 이 모든 일을 할 수 없다. 이 둘의 차이점은 상태값과 LifeCycle를 가질 수 있느냐 없느냐이다. 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되면서 함수형 컴포넌트의 선호도가 상승하였습니다.

 

state변경 시, 왜 setState, useState를 사용하나요?

state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데, 이것을 업데이트 하기위해서는 setState, useState가 필요합니다. 직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고 setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하기 때문입니다.

 

 

 

JSX

JSX란?

JSX는 JavaScript XML(eXtensible Markup Language)의 약어로, HTML 요소에 유효한 자바스크립트 객체를 내장할 수 있는 자바스크립트 확장이다. 리액트에선 보통 HTML과 자바스크립트를 별도로 작성하기 보다는, JSX를 이용하여 HTML과 자바스크립트를 모두 포함하고 있는 '컴포넌트'를 생성한다.

JSX는 HTML보다는 자바스크립트에 가깝다고 한다.

 

브라우저가 JSX 파일을 읽을 수 있는가?

(답변 참고: Introducing the New JSX Transform)

 

브라우저는 JSX 파일을 직접 읽을 수는 없다. 브라우저가 JSX 파일을 읽으려면 JSX를 자바스크립트 객체로 변환을 해야 한다. 그리고 그 변환 작업은 바벨과 같은 컴파일러를 통해 이루어진다.

여기서 기존에 JSX를 사용한 파일 내에서 React를 import 했던 이유를 알 수 있다. 컴파일러를 통해 JSX 코드가 자바스크립트 코드로 변환이 되면, 아래와 같이 React.createElement()로 변환이 된다.

 

 

Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.

리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게

모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다.

 

 

React Hooks란? 

Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.

함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다.

 

Hook 의 기능

- Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

- useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.  

 

• State Hook - useState 
• Effect Hook - useEffect 

리액트 훅에 대해 설명하시오

 - 리액트 훅은 리액트 16.8 버전에서 새롭게 추가된 사용방법으로 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 한다. 함수형 컴포넌트에서 상태값을 관리할수도, 생명주기 함수 또한 이용할 수 있다. 훅을 사용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 또 React의 내장된 훅 말고 새로운 커스텀 훅을 만들수도 있다. 또한 코드 가독성이 좋아지는 장점이 있다. (예를들어, componentDidMount + componentWillUnmount를 useEffect 로 간단하게 대체할 수 있음)
 리액트에는 useState, useEffect, useCallback 등의 기본적인 내장 훅들이 있다. 

 

 

 

Hooks 규칙

1. 최상위에서만 호출해야한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 이 규칙을 따른다면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출된다. 이는 react가 useState와 useEffect를 여러 번 호출하는 중에도 Hook 상태를 유지할 수 있도록 해주기 때문이다.

 

1. 오직 React 함수 내에서만 호출해야한다.

일반적인 JS 함수에서 Hook을 호출하면 안된다.

이 두 규칙을 강제하는 플러그인은 eslint-plugin-react-hooks이고 이를 프로젝트에 추가할 수 있다. Create React App에는 기본적으로 포함되어있다.

 

 

 

useEffect란?

  - 컴포넌트가 렌더링 되거나 업데이트 될 때 그 안에 있는 기능을 실행할 수 있는 React Hooks중 하나다. 컴포넌트의 특정 값이 업데이트 될 때 해당 기능으로 작동시키고 싶으면 두 번째 파라미터의 배열에 그 값을 넣어주면 된다. 컴포넌트가 언마운트 되거나 업데이트 되기 직전에 원하는 작업을 하고 싶다면 뒷정리 함수를 리턴하면 된다. 실제로 무한스크롤을 구현 할 때 스크롤 이벤트를 삭제하기 위해 사용했었다.

 

- 트윗, 즉 게시글을 실시간으로 파이어베이스에서 가져왔습니다.

 

 

usequery

- useQuery는 React Query를 이용해 서버로부터 데이터를 조회해올 때 사용합니다.

  - axios를 편하게 쓰는 방법