면접 질문 (React 관련)

원동환·2021년 9월 9일
0

1. DOM & virtual DOM

DOM은 HTML문서를 프로그래밍적으로 접근가능하게 해주는 인터페이스로 DOM node에 접근하여 편집을 하게 되면 DOM이 업데이트 되는데 비용이 굉장히 많이 든다. node를 추가하면 node를 추가하여 업데이트 하고 이러한 업데이트로 인해 레이아웃에 변화가 생기면 웹페이지 일부 또는 전체를 다시 렌더링 하게 될 수 있다.

Virtual DOM은 DOM을 추상화한 DOM으로 돔의 사본이다.
DOM 조작 및 업데이트에 대해 성능 최적화를 하고자 등장했다.
결국 가상돔은 돔 조작 및 업데이트를 자동화 해주는 수단으로 이해하면 된다. 리액트에서는 2개의 가상돔을 비교해서 real DOM에 변경사항을 그룹화 하여 수행한다.

2. React란?

페이스북에서 개발하고 관리하는 UI를 만들기 위한 javascript 라이브러리이다.

3. React의 특징

  • 단방향 데이터 흐름 : 데이터를 추적하기 쉽고 디버깅이 쉽다
  • Virtual DOM: 가상돔을 이용하여 DOM 변경 시 필요한 최소한만 갱신하여 성능 개선
  • UI component 기반: UI를 컴포넌트 단위로 쪼개어 재사용성 및 유지,보수 이점을 취한다.

4. JSX란?

  • Javascript XML의 약자
  • JSX는 React.creatElement를 생성한다
  • 자바스크립트로 HTML 코드 작성을 쉽게 도와주는 문법이다.

5. HOC(High-Order-Component)란?

  • 컴포넌트 로직을 재사용하기 위한 기술
  • 컴포넌트를 받아서 컴포넌트를 반환한다.
  • HOC 접두사는 with으로 시작하는 것이 관행이다.

Context API란?

context는 컴포넌트 안에서 전역적으로 데이터를 공유하도록 나온 개념이다. 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등 다양하게 컴포넌트간 공유되어야 할 데이터로 사용하면 좋다.

6. FLUX란?

  • 프론트엔드에서 적용된 MVC패턴에 대한 문제로 나온 패턴이다.
  • 단방향 데이터 흐름 모델의 개념을 따르는 아키텍쳐이다.
  • flux에서 UI는 데이터를 전달받기만 하면 된다
  • UI쪽에 데이터를 변경할 때마다 직접 Store와 동기화를 하는게 아닌, action을 일으켜 store에 변경사항을 업데이트 해주고 그 변경사항을 UI에 전달해준다. 가장 큰 장점은 단방향이기 때문에 추적이 쉽고 예측 가능하다는 점이다.

7. Redux란?

  • Flux 아키텍처를 기반으로 단방향 데이터 흐름 상태관리 라이브러리

    위와 같이 단방향으로 데이터가 움직인다.
  • action: UI에서 상태변경이 일어난 모든 사건
  • reducer: 사건에 대한 상태값에 대한 변화를 일으킨다
  • store: 상태들이 있는 저장소

8. Redux 원칙

  • Single source of truth: redux는 어플리케이션 상태를 한 곳에서 관리하기 위해 단 한개의 store만을 사용한다
  • state is readOnly: UI즉 컴포넌트에서 직접 state에 접근해서 변경할수 없다
  • changes are made with pure functions: reducer(상태변화 함수)는 순수 함수 즉 side-effect가 없이 예상 가능 해야하는 함수를 의미한다.

9. Redux-thunk

먼저 thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 말한다.
리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로 redux-thunk를 이용한다. 간단히 말하면 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다. 리덕스에서는 기본적으로 액션 객체를 디스패치를 한다. 하지만 이 액션을 몇초 뒤에 실행되게 하거나 상태에 따라 달라지게 하려면 일반 액션 생성자로는 불가능 하지만 thunk는 이런 작업들을 가능하게 해준다.

10. Redux-saga

redux-saga는 비동기 작업처럼 리듀서에서 처리하면 안되는 순수 함수가 아닌 작업들을 하기 위한 리덕스 미들웨어이다. redux-thunk의 경우 함수를 dispatch해주었지만 redux-saga는 일반 액션을 dispatch하게 된다. 그리고 특정 액션이 발생하면 이를 모니터링 하여 이에 기반하여 추가적인 작업을 하도록 설계한다.

11. 클래스형과 함수형의 차이

React 16.8이전(hooks 도입전) 버전에는 내부 state를 유지하는 데 필요한 컴포넌트를 생성하거나 생명주기 메소드를 활용하기 위해 클래스기반 컴포넌트를 사용했다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트는 state를 갖지 않으며 렌더링할 출력 결과를 반환한다. 함수형 컴포넌트가 클래스 기반보다 심플하기 때문에 props에만 의존하는 UI를 렌더링하는데 더 선호된다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

12. 생명주기 메소드

  • componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기 전에 호출된다.
  • componentDidMount: 처음으로 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용 가능할 때 호출된다.
  • componentWillReceiveProps: props가 업데이트 될 때 호출된다.
  • shouldComponentUpdate: 새로운 props를 받았을 때 호출되며, 성능 최적화를 위해 리랜더링을 막을 수 있다.
  • componentWillUpdate: 새로운 props를 받았고 shouldComponentUpdate가 true를 리턴할 때 호출된다.
  • componentDidUpdate: 컴포넌트가 업데이트된 후에 호출된다.
  • componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출되어 이벤트리스너 등을 정리할 수 있게 해준다.

13. React Hooks란?

hooks는 클래스 기반 컴포넌트의 장점(state와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도

  • 클래스 기반 컴포넌트, 샐명주기, this의 필요성이 사라짐
  • 공통 기능을 커스텀 hook으로 만들어 로직을 재사용하기 쉬워짐
  • 컴포넌트 자체에서 로직을 분리 할 수 있어서 쉽고 테스트하기 쉬운 코드 작성 가능
    자세한 훅에 관한설명
profile
Mojittoba

0개의 댓글