FrontEndReact.js

[React] 배경지식

FrontEnd, React.js

React.js 배경지식

1. 번들링(Bundling)

웹페이지에 포함된 js, css 파일들이 많다. 그런데 웹브라우저가 웹페이지를 표시할 때, 웹페이지에 포함된 js, css 파일들도 서버에서 다운로드 해야한다.

서버에서 여러 파일들을 다운로드 할 때, 한 번에 파일 하나씩 다운로드 하는 것 보다 파일들을 묶어서 한 번에 다운로드 하는 것이 효율적이다.

웹페이지에 포함된 js, css 파일들을 웹브라우저가 한 번에 다운로드 할 수 있도록 묶어주는 기능을 번들링(Bundling)이라고 한다.


2. JSX 문법

html 태그를 생성하는 자바스크립트 소스코드를 간결하게 입력할 수 있도록 자바스크립트 문법이 확장된 것을 jsx 문법이라고 한다. jsx 문법으로 구현한 표현식에는 반드시 루트 태그가 한 개 있어야 한다. 루트 태그 없이 태그를 여러 개 나열하면 에러가 발생한다.

아래의 예제를 보면 img태그와 h3태그를 div태그로 감쌌다.

JSX 예제

1
2
3
4
var profile = <div>
    <img src="avatar.png" className="profile" />
    <h3>{[uuser.firstName, user.lastName].join(' ')}</h3>
</div>;

위 JSX 예제를 JavaScript 소스코드로 변환한 결과

1
2
3
4
var profile = React.createElement("div", null,
    React.createElement("img", { src: "avatar.png", className: "profile"}),
    React.createElement("h3", null, [user.firstName, user.lastName].join(' '))
)

원래 아래의 형태로 구현해야 하지만 소스코드가 너무 지저분하니까 간단한 JSX 형태로 구현한다. 프로젝트를 빌드할 때, 빌드 도구가 JSX 형태의 소스코드를 JavaScript 소스코드로 자동 변환해준다.

확장자
JSX 문법을 포함하는 자바스크립트 파일의 확장자가 옛날에는 .jsx였지만 최근에는 그냥 .js이다.


3. DOM (Document Object Model)

DOM 객체

웹 브라우저 내부에 구현된 html 태그 객체를 DOM 객체라고 한다. 웹브라우저가 웹페이지의 내용을 화면에 그릴 때, 그 웹페이지의 내용에 해당하는 DOM 객체들이 웹브라우저 내부에 생성된다. 웹브라우저 내부의 DOM 객체들을 수정하면 화면에 그려진 웹페이지 내용도 수정된다.

VirtualDOM 객체

자바스크립트 코드에 의해서 생성된 html 태그 객체이다. 이 객체는 웹브라우저 내부의 DOM 객체와 다르다. jsx 문법에 의해 생성되는 html 태그 객체는 VirtualDOM 객체이다.

React and the Virtual DOM 설명 영상


4. let 키워드

자바스크립트 지역 변수를 선언하기 위한 키워드가 var였다. 그러나 ES6 문법에서는 var대신 let키워드를 사용하는 것이 바람직하다.

var 지역변수 선언 방식의 문제점

1
2
3
var a = 3;
var a = 4;
document.write(a); //출력 결과 > 4

지역 변수 a를 재선언해도 에러가 발생하지 않는다. 이름이 같은 지역변수를 실수로 여러 번 생성할 수 있는 문제가 있다.

let 지역변수

1
2
3
let a = 3;
let a = 4; //에러 발생
document.write(a);

Duplicate declaration "a"에러 발생 => 실수를 발견할 수 있다.

이 두 키워드에 대해 자세히 알아보려면 여기를 클릭하자.


5. 확장 태그

1
2
3
4
5
6
7
class Main extends React.Component { //확장 태그 클래스(React Component)
    render() { //render 메소드
        return ( //리턴값은 jsx 확장 문법으로 구현
            <div>Hello World!</div>
        );
    }
}

확장 태그 구현

React.Component 클래스를 상속하여 확장 태그 클래스를 구현한다. 확장 태그 클래스를 React Component라고 부른다.

render 메소드

확장 태그 클래스에서 render메소드를 구현해야 한다. render메소드에서 확장 태그의 구체적인 형태를 구현해야 하는데 확장 태그의 내용은 html태그나 다른 확장 태그들로 구성되어야 한다.

render 메소드의 리턴값

확장 태그의 내용에 해당하는 태그 객체를 생성해서 리턴해야 한다. jsx확장 문법으로 구현한다.

확장 태그가 웹브라우저 창에 그려질 때(rendering)

확장 태그의 render메소드가 리턴하는 태그 객체로 치환되어서 그려진다. 치환된 태그에도 확장 태그가 포함되어 있다면 그 확장 태그도 치환된다. (render메소드 재귀 호출)


6. 프레임워크 vs 라이브러리

1) 프레임워크

  • 필요한 기능이 이미 대부분 만들어져 있고, 틀(frame) 안에 우리가 내용을 채워 넣어 완성시키는 것
  • 틀을 벗어나기 힘든 것이 단점
  • 보통 단 한 가지의 프레임워크를 사용함
  • 가끔 다른 프레임워크나 라이브러리와 함께 이용할 때, 충돌하는 경우도 있어서 따로 고쳐줘야 함
  • 우리가 아예 사용하지 않을 기능도 구현되어 있기 때문에 상황에 따라서 조금 무겁게 느껴지기도 함

2) 라이브러리

  • 필요한 부분에만 가져다 쓰면 되는 개념
  • 다른 라이브러리와 충돌할 일이 없음


7. React.js는 프레임워크가 아닌 라이브러리

React는 user interface를 만들기 위한 라이브러리다.

ReactJS가 AngularJS를 대체할 수 있을까?

NO!!! Angular는 프레임워크다.

React와 Angular는 완전히 다른 것이기 때문에 사과와 오렌지를 비교하는 것과 같은 느낌.
(참고. react-native : 모바일 네이티브 앱을 리액트로 만들 수 있게 해주는 프레임워크)


8. React의 장/단점

장점

  • Virtual DOM을 사용
  • 배우기 간단함
  • 컴포넌트 단 하나만을 사용함
  • 뛰어난 garbage collection, 메모리관리, 성능
  • 서버 렌더링 & 클라이언트 렌더링 둘 다 지원
  • 매우 간편한 UI 수정 및 재사용 (UI를 컴포넌트화 하여 재사용함)
  • 페이스북이 밀어줌
  • 다른 프레임워크나 라이브러리와 혼용 가능

단점

  • VIEW ONLY : 리엑트는 보여지는 부분만 관리함
  • 자바스크립트 배경지식이 부족하면 처음에 구현하는 것이 조금 힘들 수 있음
  • IE8 이하 버전은 지원 안함
Share