[기술면접] React의 장점

huni_·2022년 7월 1일
0

React

목록 보기
2/57
post-thumbnail

1. 리액트(React.js)란?

: 페이스북에서 제공해주는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다.

  • 웹 페이지를 만들기에는 html, css로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이 때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기때문에 리액트를 사용한다.

2. 리액트의 특징

  • 컴포넌트 기반의 라이브러리 : 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다.
  • 단방향 데이터 바인딩(One Way Data Flow) : 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.
  • Props and State
    1. Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

    2. State: 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다.

      각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능하지만 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.

  • Virtual DOM : 가상의 Document Object Mode.로 실제 DOM을 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다.

3. 리액트 장점과 단점

장점

  • 배우기가 간단하고, 애플리케이션을 만들 때 복잡함이 적다.
  • Controller, directive, template, model 처럼 분리를 하지 않고 Component 단 하나로 관리한다.
  • 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있다.
  • 서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원한다.
  • 간편한 UI 수정과 재사용이 용이하다.
  • 다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. 즉, 개발이 완료된 서비스에도 적응이 가능하다.

단점

  • 보여지는 부분에만 관여하기때문에 데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않는다.
  • view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우애는 사용이 힘들다.
  • IE8 이하 버전들을 지원하지 않는다.
profile
FrontEnd Developer

0개의 댓글