[React] 리액트란? 리액트의 4가지 특성

"A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES”

"리액트는 유저 인터페이스를 만드는 자바스크립트 라이브러리이다."

 

 나는 문득 리액트가 라이브러리라는 점이 의아했다. 나는 리액트가 자바스크립트의 프레임워크라고 생각했고 꽤 많은 문서에서 리액트를 프레임워크라고 칭하고 있었다. 

 

프레임워크 --(호출)--> 내코드

 

 프레임워크는 뼈대나 구조기반과 같다고 볼 수 있다. 특정 개념을 추상화하는 클래스와 컴포넌트들로 구성되어있으며 해당 클래스나 컴포넌트는 문제를 해결하기 위한 방법을 제공한다. 개발자는 프레임워크에서 정의된 흐름과 규칙에 따라 코드를 작성해야한다. 즉 코드의 흐름에 대한 제어를 프레임워크가 가지고 있는 것이다. 프레임워크를 사용하면 코드의 일관성, 통합성을 유지할 수 있다.

 

내 코드 --(호출)--> 라이브러리

 

 반면 라이브러리는 특정 기능을 구현하기 위한 도구(함수)들의 집합니다. 라이브러리를 사용하는 경우에는 개발자가 코드의 흐름을 직접 만들고 필요에 따라 라이브러리를 가져다 쓰는 것이므로 코드의 흐름에 대한 제어가 개발자에게 있다. 

---

<리액트의 세 가지 특성>

 

1. 선언적

쉽게 말하면 우리는 리액트의 선언적인 특성을 통해 코드를 쉽게 짤 수 있게 된다.

 

즉, 구현하려는 동작의 의미에 맞게 코드를 작성할 수 있다는 것이다. 이를 통해 동적이고 복잡한 UI를 구현해야할 때 코드의 가독성이 높아지고 디버깅이 쉬워진다. 

 

코드를 쉽게 짤 수 있는 이유는 JSX문법을 사용하기 때문이다.(jsx에 대한 설명은 3번 특징 참고)

function Welcome(state) {
  if ({state.age} > 20) {
    return <h1>Hi, adult</h1>;
  }
  
  return <h1>Hi, Kid</h1>;
}

Welcome이라는 함수형 컴포넌트를 작성했다. 이 컴포넌트는 props.age의 값에 따라 다른 리액트 엘리먼트를 반환하고 있다.

 

Welcome함수의 내부는 javascript언어와 html언어가 별다른 코드 없이 어우러져 사용되고 있다.(←JSX문법)

 

즉, document.getElement로 요소를 지정하거나 데이터의 변경사항을 체크하거나 하는 알고리즘을 따로 구현할 필요가 없다. (JSX문법으로 작성한 이 코드를 BABEL이라는 컴파일러가 알아서 변환을 해준다!)

 

이러한 선언적 특성으로 개발자는 웹 또는 앱의 화면 설계에 초점을 맞추어 개발을 할 수 있게 되어 다른 부분에 대한 생산성을 높일 수 있다.

 

2. 컴포넌트 

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말하며 리액트에서 중요한 개념 중 하나이다.

 

우리가 컴포넌트를 통해 얻을 수 있는 큰 이점은 재사용성이다.

 

컴포넌트는 html/css UI를 반환하는 하나의 모듈이기 때문에 다른 화면이나 프로젝트에서 재사용할 수 있다.

 

컴포넌트가 반환하는 UI는 <Component />명령으로 불러올 수 있다.

 

컴포넌트는 서로 데이터를 주고받을 수 있고 그 데이터는 캡슐화(Capsulation)되어 데이터를 넘겨준 컴포넌트의 하위 컴포넌트에서만 그 데이터를 받을 수 있다.

 

컴포넌트는 이렇게 넘겨주거나 넘겨받은 데이터(props 또는 state)로 JSX언어를 사용해 조합하여 UI를 구성한다.

 

3. JSX(JavaScript XML)

jsx는 javscript에서 확장된 문법으로 마크업 언어를 javascript 안에서 더 편리하게 다루기 위해 만들어진 독특하고 편리한 언어이다.

const element = <h1>Hello, world!</h1>;

위 코드는 아주 간단한 JSX의 예시이다. 변수 안에 html태그를  따옴표("")나 템플릿 기호(``)도 없이 그대로 넣었다.

 

JSX를 사용하면 javascript와 마크업 언어를 특별한 선언이나 지정 없이 자연스럽게 하나의 언어처럼 사용할 수 있다. 

 

물론 그 안에서 일정한 규칙이 존재한다. 몇 가지의 예를 들어보자면

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

- 우선 한 줄을 넘어가는 코드는 ( ... )내부에 작성한다.

- 마크업 문법 안에 javscript 표현식을 사용할 때는 { ... }내부에 작성한다.

const element = <img src={user.avatarUrl} />;

- 태그 내부가 비어있다면 /로 닫아준다.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

- JSX 내부의 { ... } 내부에 정의된 javscript 표현식을 렌더링되어 사용자 화면에 나타나기 전까지 실행되지 않는다. 즉 위 코드에서 사용자의 입력을 받기 전까지 title은 단순히 문자열로 변환되어 저장되어있다.
이를 통해 XSS(cross site sciprting)공격을 피할 수 있다.

 

 

- BABEL이란?

BABEL은 JSX코드를 브라우저가 읽을 수 있는 코드로 변환해주는 컴파일 도구이다.

 

즉, 우리가 간편하게 작성한 JSX코드를 리액트 엘리먼트로 변환해주는 역할을 한다.

 

BABEL로 JSX문법을 변환해주지 않으면 브라우저는 해당 코드를 해석하지 못한다. 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

↓ 우리가 위와같이 작성한 코드는 React.createElement메소드를 통해 리액트 엘리먼트로 생성된다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

↓ 실제로 React.createElement()를 통해 만들어진 리액트 엘리먼트는 아래와 같은 모양이다.

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

즉 리액트 엘리먼트는 화면에 보여질 것들에 대한 설명을 담은 객체이고 리액트는 이 객체를 읽고 그 정보들을 통해 웹 화면의 DOM을 구성하고 업데이트한다.

 

4. VirtualDOM

가상돔에 대한 이해는 웹 브라우저가 렌더링되는 과정에 대해 알고있으면 도움이 된다.

https://d2.naver.com/helloworld/59361

가상 돔은 실제 돔에 접근하여 조작하는 것이 아니라 이것을 추상화시킨 자바스크립트 객체를 이용하는 것이다.

 

동적인 웹 페이지를 구현할 때, 예를 들어 버튼 클릭에 대한 이벤트를 추가하여 사용자가 버튼을 클릭할 때마다 어떤 값이 변경된다고 가정해보자.

 

가상돔을 사용하지 않는다면 웹 브라우저는 클릭이벤트가 발생할 때마다 전체 DOM 트리가 변경되어 브라우저 렌더링 과정(HTML 파싱, 렌더 트리 구축, 렌더 트리 배치, 렌더 트리 그리기 등의 과정)이 매번 일어나서 웹 브라우저의 동작에 많은 리소스가 들어가게 된다.

 

가상돔을 사용하면 클릭 이벤트가 일어나 데이터가 변경되면 새로운 가상 돔을 만들어 이전의 가상 돔와 비교하여(얕은 비교) 서로 다른 부분만 업데이트한다. 

 

 

---

↓참고자료

https://reactjs.org/docs/introducing-jsx.html

Introducing JSX – React

https://medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01-react-js%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-ad8ba252ee28

[React] 리액트를 처음부터 배워보자. —01. React.js란 무엇인가?

https://medium.com/@hongseongho/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%99%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%9D%98-%EC%B0%A8%EC%9D%B4-2f5bf35140ca

프레임워크와 라이브러리의 차이