[개념] React의 정의와 특징

정의

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리다.

리액트는 프레임워크인가 라이브러리인가

프레임워크: 기능 구현에 집중하여 개발할 수 있도록 필요한 기능들을 갖추고 있는 것으로 어느정도 일정한 형태를 가지고 결과물을 만드는 것

라이브러리: 공통으로 사용될 수 있는 특정 기능에 대한 API를 모은 집합

프레임워크는 라우터같은 기본적으로 내장하고 있는 기능이 있어야 하지만 리액트는 특정 기능을 구현하기 위해 여러 추가 라이브러리를 함께 사용해야 한다.(리액트 라우터, 리덕스 등) 따라서 리액트는 라이브러리이다.

리액트의 특징

컴포넌트 기반 화면 구성

리액트는 기능이나 역할에 따라 컴포넌트 파일을 작성하고 작성한 컴포넌트 파일들을 조합하여 화면을 구성할 수 있다.
따라서 코드를 관리하기 용이하고, 화면에서 공통되는 부분은 해당 컴포넌트를 재사용하여 빠르게 구성할 수 있어 생산성과 유지 보수를 수월하게 한다.

virtual DOM(가상돔) 방식

Virtual DOM은 DOM을 추상화한 가상의 객체다.
DOM을 최소한으로 조작하여 성능 저하를 최소화 한다.

먼저, 브라우저에서 DOM 변화가 발생하면 브라우저가 다시 CSS를 연산하여 레이아웃을 구성하고 페이지를 리페인트하기 때문에 성능이 저하되는 문제점이 발생한다. Virtual DOM 방식은 데이터가 업데이트되었을 경우 전체 화면을 Virtual DOM에 렌더링하고, 이것을 이전의 Virtual DOM과 비교하여 바뀐 부분만 실제 DOM에 적용하는 방식을 사용하여 DOM 처리 횟수를 최소화하여 성능을 개선할 수 있다.

단방향 데이터 흐름

데이터 흐름이 단방향이다. 위에서 아래, 부모에서 자식, 한방향으로만 흐르며 거꾸로 부모의 데이터를 바꿔주기 위해서는 state를 이용해야 한다. 단방향 데이터 흐름은 데이터를 추적하기 쉽고 디버깅을 쉽게 해준다.

JSX 문법

JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있다.

선언형 프로그래밍

명령형 프로그래밍은 프로그래밍을 할 때 어떻게(How)에 집중하는 것을 말하며 선언형 프로그래밍은 무엇(What)에 집중하여 프로그래밍을 하는 것을 말한다.

명령형 프로그래밍

const double = (arr) => {
  let results = [];
  for (let i = 0; i < arr.length; i ++) {
    results.push(arra[i] * 2);
  }
  return results;
}

선언형 프로그래밍

const double = (arr) => {
  return arr.map((elem) => elem * 2);
}

위에 두 함수는 같은 동작을 하는 함수로써, 주어진 배열의 값을 두 배로 만드는 동작을 수행한다. 첫번째 명령형 프로그래밍으로써 주어진 배열의 값을 두 배로 늘리기 위해, for 문을 사용했으며, i변수와 배열의 크기를 사용하여 배열의 값을 하나씩 가져와 두 배로 만든 후, result라는 새로운 배열에 값을 추가한 후, 결과값으로 반환. 이렇게 명령형 프로그래밍은 과정을 중심으로 프로그래밍을 하게 된다.

두 번째 함수는 선언형 프로그래밍으로써 map 함수를 사용하여 주어진 배열값을 두 배로 만들어 반환한다. map이 어떻게 동작하는지는 크게 신경쓰지 않고 결과인 배열값을 두 배로 만들기에 집중하여 프로그래밍을 한다.

이처럼 라이브러리나 프레임워크 등을 사용하여 비선언형적인 부분을 캡슐화함으로써 명령형 프로그래밍 언어로 선언형 프로그래밍을 할 수 있다.

명령형 프로그래밍

<ul id=”list”></ul>
<script>
var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");

for(var i = 0; i < arr.length; i ++) {
  var child = document.createElement("li");
  child.innerHTML = arr[i];
  elem.appendChild(child);
}
</script>

위의 예제는 자바스크립트를 사용하는 HTML에 새로운 리스트 아이템을 추가하는 코드. 위의 코드는 명령형 프로그래밍으로써 새로운 리스트를 표시할 ul 태그를 생성하고 자바스크립트의 querySelector를 사용하여 표시할 위치를 가져온 후, for 문을 사용하여 하나씩 리스트에 아이템을 추가하고 있다.

JSX를 사용한 선언형 프로그래밍

const arr = [1, 2, 3, 4, 5];
return (
  <ul>
    {arr.map((elem) => (
      <li>{elem}</li>
    ))}
  </ul>
);

리액트의 JSX 문법을 사용하면 위와 같이 HTML안에서 map 함수를 사용하여 리스트 아이템을 추가할 수 있다. 이렇게 JSX를 사용하면 자바스크립트뿐만 아니라 HTML에서도 선언형 프로그래밍을 할 수 있다.

참고자료

리액트 공식사이트
React 완벽정리 (react란? 장점, 단점 등)
[React] 1. React 시작하기(2) - React의 주요 특징
React란
[기술면접]기술면접을 위한 리액트 지식과 질문 답변 정리