React.js에 대하여

블로그에 글을 쓸 땐 에디터 툴을 이용하여 작성된 글을 업로드하거나 GitHub에 직접 파일을 생성하여 글을 작성한다. 수정할 내용이 있을 경우도 같은 방법으로 글을 수정한다. 타 플랫폼처럼 글을 작성하거나 내용을 수정할 때 웹페이지에서 가능하다면 얼마나 편리할까? 라는 생각에 구글링을 하기 시작했다.

개발에 핵심 요소중 하나는 에디터의 구현이라 생각했다. 에디터는 Markdown으로 글을 작성하면 동시에 결과를 보여준다. 작성과 동시에 결과 확인이 가능하기 때문에 내용에 더욱 집중하며 글을 작성할 수 있다.

그러나 Jekyll로 개발된 이 블로그는 정적 웹사이트이기 때문에 동적으로 데이터를 표현하는 에디터를 구현할 수 없었다. 그래서 정적 웹사이트에서 동적 페이지를 구현할 순 없는지 다시 구글링을 시작했다.

그리고 찾은 답은 React.js였다.

React.js

리엑트.제이에스(React.js)는 자바스크립트(Javascript) 라이브러리의 하나로서 사용자 인터페이스¹(User Interface:UI)를 만들기 위해 사용된다. React.js의 특징으로 선언형 프로그래밍²(Declarative Programming)을 제공하여 복잡한 UI를 만들 때 생기는 어려움을 줄여준다. 또한 싱글 페이지 애플리케이션(Single Page Application:SPA)이나 모바일 애플리케이션 개발에 사용된다. 다중 페이지를 개발하고자 할 때는 추가 라이브러리인 React Router를 활용하여 사용이 가능하다. React.js의 동작 방식은 다음과 같이 효율적으로 데이터 갱신(Refresh) 및 컴포넌트 렌더링(Rendering)을 수행한다.

1. JSX(Javascript eXtension)와 CSS(Cascading Style Sheets)로 애플리케이션의 각 상태에 대한 뷰 설계.
2. 가상 DOM(Virtual Document Object Model:Virtual DOM)을 업데이트하고 프레임워크에서 이전 Virtual DOM과 현재 Virtual DOM 간의 데이터가 변경되는 부분 검출.
3. 실제 DOM(Document Object Model)에서 최종 업데이트.

JSX

React.js는 Javascript와 JSX를 지원한다. HTML을 Javascript 문법으로 표현이 가능하지만 React.js에서는 Javascript 확장 문법인 JSX를 권장한다. 아래의 두 코드를 비교하여 JSX의 장점을 확인할 수 있다.

// Javascript
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div", null,
      React.createElement("span", null, "Hello"),
      React.createElement("span", null, this.props.name)
    );
  }}

ReactDOM.render(
  React.createElement(HelloMessage, { name: "Guest" }),
  document.getElementById('hello-example')
);

// JSX
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <span>Hello</span>
        <span>{this.props.name}</span>
      </div>
    );
  }}

ReactDOM.render(
  <HelloMessage name="Guest" />,
  document.getElementById('hello-example')
);

위 코드의 결과는 동일하게 아래와 같이 출력된다.

HelloGuest

JSX 코드를 보면 HTML 문법과 같이 <div></div>와 <span></span> 태그를 이용하여 구조를 만들고 구조 안에 텍스트나 {}로 감싼 변수를 입력한다. 하지만 Javascript 코드는 태그를 이용하기 위해 React.createElement를 반복으로 사용하여 한눈에 구조가 보이지 않는다. Javascript 코드를 HTML 처럼 표현할 수 있기 때문에 용이한 개발이 가능히다. HTML과 흡사하지만, Javascript 내부에서 사용하기 때문에 다음과 같이 HTML과 다른 차이점이 있다.

• HTML 요소에 class 값을 정의할 때, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 className으로 대체한다.
• 마찬가지 이유로 루프문 예약어와 겹치는 for는 htmlFor로 대체한다.
• 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick 처럼 카멜표기법으로 표기한다.
• 기존의 HTML에서 주석은 <!-- code -->로 사용하나 /* code */로 대체한다.
• HTML Custom-Element는 <my_element>와 같이 사용하나 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 명시적으로 /> 표기한다.
• JSX 내부에서도 JS를 사용할 수 있다. {console.log('ok')}와 같이 표기한다.

JSX를 빌드할 때 자바스크립트 컴파일러(Javascript Compiler)인 바벨(Babel)에서 코드 변환 처리를 수행하여 Javascript로 변환된다.

Tips JSX를 컴파일한 Javascript 코드를 확인하려면 여기를 클릭한다.

준비 사항

• NPM(Node Package Manager)³(Include Node.JS)
• Babel Compiler(Include Node.JS)
• Node.JS
• Visual Studio Code⁴

설치 및 실행

1. Node.JS 와 VS Code를 설치한다.
2. window + R 키를 누르고 cmd를 입력하여 명령 프롬프트를 실행한다.
3. 원하는 경로에서 npx create-react-app 폴더명을 입력한뒤 Enter 키를 누른다.
4. 다운로드가 완료되면 위와 같이 폴더명 내 React 관련 데이터를 확인할 수 있다.
5. VS Code를 실행한 뒤 폴더 열기를 눌러 입력한 폴더(ex: react_projects)를 선택한다.
6. ctrl + ` 키를 눌러 터미널을 활성화하고 npm start를 입력한다.
7. 위와 같이 브라우저에 React 로고가 보이면 React를 사용하기 위한 환경 구성이 완료된다.

참조