React 시작하기

React는 프론트엔드 개발자들이 가장 많이 쓰는 라이브러리 중 하나이다.
React를 본격적으로 시작하기 전에 React를 왜 사용하는지, 기본적인 작동방식과 구조는 어떤지 정리해보았다.

React를 사용하는 이유

3세대 웹

요즘 웹은 예전처럼 단순하지 않다.
다양한 기능, 사용자의 눈길을 사로잡는 디자인, 다양한 기기에 따른 반응형의 구현, 그리고 넘쳐나는 데이터들에 맞는 웹을 만들다 보니, 이전보다 훨씬 동적이고 복잡해졌다. 따라서 웹을 개발할 때 관리해야 할 파일들이 많아졌고, 하나의 페이지를 불러올 때 마다 서버에서 새로운 HTML, CSS, JS 파일들을 불러와야 했다.

SPA(Single Page Application)의 등장

하나의 HTML 파일에서 전체 웹사이트를 구현하는 방법이다. 최초 1회만 모든 파일들을 불러오고, 이후에는 자바스크립트로 필요한 데이터를 실시간으로 주고받는다. 페이지 이동 없이, 바뀌어야 하는 영역만 모듈을 로드해서 바꾸기 때문에 효율적이다. 이런 SPA 개발을 위해 다양한 라이브러리와 프레임워크가 나왔고, 대표적인 예가 React이다.

왜 React일까?

리액트는 UI 개발을 위한 라이브러리이다. 각각의 UI 요소들을 컴포넌트로 만들기 때문에 재사용성이 높고, 선언한 컴포넌트 하나만 수정하면 자동으로 업데이트하여, 다른 컴포넌트들도 한번에 수정할 수 있다. 따라서 UI를 업데이트 하는 횟수를 줄이면서 성능을 개선시킬 수 있고, 유지보수도 용이하다.

React 작동 원리

DOM(Document Object Model)

DOM은 자바스크립트에서 HTML에 접근할 수 있도록 요소들을 객체화해서 사용할 수 있도록 한다.

메모리에서 DOM Elements를 생성하는 것은 빠르지만, 그 요소들을 실제 DOM으로 렌더링 하는 과정에서 병목 현상이 발생한다. 그래서 동적 UI가 많은 웹페이지의 경우, 필요한 DOM 갱신 외에 불필요한 갱신이 많아져서 성능이 저하된다. 따라서 이 DOM 렌더링 문제를 해결하기 위한 방법을 제시했고,
이것이 리액트이다.

Virtual DOM

Reacts는 Virtual DOM을 가지고 있다. 가상DOM은 자바스크립트 메모리에만 존재한다. 이전의 UI를 메모리에 저장하고, 변경된 UI의 최소 집합을 계산했다가 마지막 한번에 실제DOM에 적용한다.

데이터를 변경하면 리액트는 실제DOM과 가상DOM을 비교하고, 변경된 부분을 찾아내서 수정이 필요한 부분만 실제DOM에 렌더링한다.

즉, 리액트는 반드시 필요한 부분만 갱신해서 내부 상태와 실제 상태를 같게 만든다. 데이터가 바뀔 때 마다 페이지 전체를 렌더링 하는 것보다 훨씬 효율적인 방법이다.

React 프로젝트 시작하기

CRA(Creat React App)

React 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구이다.

npx create-react-app 프로젝트명

해당 프로젝트를 만든 디렉토리로 가서 폴더를 열어보면 다음과 같다.
(필요없는 파일들은 삭제함)

public

프로젝트를 배포했을 때, 실제 서버에 배포되는 폴더가 public이다.
따라서 해당 사이트 url을 방문했을 때, 프로젝트의 index.html 파일이 보여지게 된다. 따라서 public에 파일을 만들어두면, 서버를 통해서 접근이 가능하다.

index.html 파일에는 <div id="root"></div>만 존재한다.
개발자가 만든 모든 컴포넌트들이 결국 #root 에 포함되어 있다.

src

index.js를 비롯한 컴포넌트 파일과 css 파일들이 들어있는 폴더이다.
index.js는 index.html에서 화면을 띄울 수 있게 하는 Entry Point 역할을 한다.
ReactDOM.render 메서드를 통해 컴포넌트를 불러온다.
첫 번째 인자로 화면에 보여주고자 하는 컴포넌트,
두 번째 인자로 보여주고 싶은 컴포넌트의 위치를 넣는다.

// index.js
ReactDOM.render(<App />, document.getElementById("root"));

node_modules

프로젝트를 구성하는 모든 node 패키지들이 모여있는 폴더

package.json _ dependencies

모든 패키지 리스트와 버전이 담겨있고, 실제 패키지는 node_modules에 있다. npm install을 했을 때, dependencies에 있는 모듈들을 알아서 설치하게 된다. 모든 모듈들이 다운받을 때 마다 dependencies에 저장되는 것은 아니므로, 저장을 원한다면 npm install 패키지명 --save 를 해주어야 한다.

.gitignore

github에 올리고 싶지 않은 폴더나 파일들을 작성할 수 있다.
.gitignore에 작성된 파일들은 깃에 올라가지 않는다.

Component

React에서 컴포넌트는 재사용 가능한 각각의 독립된 모듈이다.
컴포넌트 단위로 js 파일을 작성하고, 필요한 부분에 해당 컴포넌트를 불러와서 사용하는 방식이다.

import React from "react";

class Component extends React.Component {
  render() {
    return <h1>hello!</h1>;
  }
}

컴포넌트는 함수형, 클래스형 두가지 방법으로 선언할 수 있다.
위 예시처럼 클래스형으로 선언할 경우에는 React.Component를 extend 해야하고, 반드시 render()를 정의해주어야 한다.
또한, 반드시 보여줄 JSX를 리턴해야한다.

JSX(Javascript Syntax Extension)

HTML + JS의 형태를 띄고 있다. HTML과 JS 파일을 따로 관리할 필요 없이 함께 사용할 수 있다. JSX로 작성한 코드는 babel을 통해 렌더링 과정에서 일반 자바스크립트로 변환된다.

JSX의 특징

• js를 표현하려면 {} 안에 넣어줌
• 속성은 CamelCase로 표현
• class가 아니라 className으로 표시함
• Self Closing Tag가 가능함 (ex) <div></div> -> <div />
• 반드시 모든 자식 요소를 감싸는 최상위 요소가 있어야 함

<div>
  <button className="btnLogin" style={{color: "red"}} 
    onClick={this.goToMain}>로그인</button>  
  <h1>Hello, {props.name}</h1>  
</div>

위 코드는 h1인 자식 요소들을 하나의 div로 감싼 것이다.
이렇게 코드를 짜게 되면 불필요한 엘리먼트가 늘어나게 된다.
따라서 React Fragment (<> ... </>)를 사용한다.

마무리

React를 처음 접했을 때, 이걸 굳이 왜 쓰지? 라는 생각을 했었다.
지금 생각해보면 Vanila JS를 제대로 사용해보지 않아서 그런 생각을 했던 것 같다.
Vanila JS로 인스타그램 클론 코딩을 했을 때, 같은 형태를 가진 컴포넌트들을 계속 복사/붙여넣기 하면서 정말 비효율적이라는 생각을 했다.
React에서 컴포넌트를 재활용한다는데 왜 그렇게 하는지 이해할 수 있게 되었다.

그리고 처음에는 폴더 구조가 너무 복잡하게만 느껴졌는데, 각각 왜 필요하고 어떤 역할을 하는지 알고나니까 눈에 쏙 들어왔다. 이제 내가 해결해야할 가장 큰 과제는 state와 props의 속성을 잘 이해하는 것과, 컴포넌트를 잘 나눠서 웹사이트를 구현하는 것이다.