[React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가?

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다.

리액트란 무엇인가

node.js 기반의 자바스크립트 ui 라이브러리이다. 바닐라 자바스크립트로 구현하기 복잡한 여러 UI를 보다 쉽게 개발할 수 있도록 돕는 컴포넌트 기반의 라이브러리이다.

리액트를 사용해야하는 3가지 이유

1. 컴포넌트 기반의 UI 라이브러리

만약 엄청나게 많은 html 페이지가 존재하고, 공통적으로 들어가는 부분이 있다면 중복되는 코드가 엄청 많을 것이다. 여기에 한가지 변경사항이라도 생기게 된다면, 그 수 많은 html들을 일일이 수정해주어야 하는 문제점이 발생하고, 이렇게 하나씩 변경해주는 것을 산탄총 수술이라고 부른다. 산탄총이 엄청나게 많은 총알로 군데군데 박살내는 것에서 영감을 얻은 비유인 듯. 

리액트는 컴포넌트 기반의 라이브러리로, 공통되는 부분의 html 요소들을 컴포넌트로 제작해 각 html에서 불러와서 사용하고, 변경사항이 생길때는 그 메인 컴포넌트만 수정하면 되기 때문에 작업이 훨씬 수월하다.

2. 선언형 프로그래밍 방식

하나의 작업을 진행할 때, 각 절차를 나열하여 하나씩 해결하는 것을 명령형 프로그래밍이라고 한다.

프론트엔드 ui를 제작하는데 있어서 이런 명령형 방식은 지나치게 많은 절차가 있어 엄청 복잡하게 느껴지는데, 반면 리액트는 선언형 프로그래밍 방식 즉, 해야하는 목적을 바로 말하는 방식을 사용하기 때문에 작업이 용이하다. 

3. Virtual Dom (가상 돔)

HTML 요소를 화면에 렌더링 하기 위해서 파싱하여 DOM 생성, 렌더링 트리 생성, 레이아웃과 페인팅, 컴포지팅 등 여러 절차를 거치게 되는데, 잦은 UI 업데이트가 있을 경우 이 과정을 계속해서 반복하기 때문에 불필요한 연산이 많아지고 이는 성능 저하로 연결된다. 

리액트는 Virtual Dom 가상 돔을 사용하기 때문에, js가 html 요소를 추가하여 업데이트 작업이 이 가상 돔에 먼저 이루어지고 실제 반영되는 횟수는 적기 때문에 렌더링 성능을 최적화시킬 수 있다.

리액트를 시작하는 방법

리액트는 node 기반의 자바스크립트 ui 라이브러리다. 따라서  npx로 리액트의 보일러 플레이트인 create-react-app을 설치할 수 있다. 

npx create-react-app <프로젝트 이름>

위 코드대로 실행하면 프로젝트 이름을 딴 폴더를 하나 생성해주는데, 이 폴더에 들어가있는 내용은 그림과 같다.

이런 형식은 npm 으로 모듈을 설치했을 때 볼 수 있는 구조인데, 리액트 보일러 플레이트인 create-react-app도 앞서 말했듯 node 기반 모듈이기 때문에 그렇다. 

npm start 
# or
yarn start

터미널에 위 코드를 입력해 방금 받은 리액트 프로젝트를 실행시킬 수 있다. 이 명령어는 package.json 내에 scripts 항목을 보면 명시가 되어 있다.

나는 처음에 npm 으로 실행을 시켰는데, 리액트를 실행시키는 시간이 길어도 너무 길어서 npm으로 yarn을 받아 이를 이용해서 실행시켰다. 

리액트 프로젝트를 처음 시작했을 때! 무슨 일이 벌어지고 있나?

1. src 디렉토리 내의 index.js 가 실행된다.
2. index.js 내에는 document(public 디렉토리 내의 index.html)에서 id 가 root 에 해당하는 요소를 찾아, 그 자식요소로 App.js가 리턴하는 값을 렌더링 하고 있다.
3. App.js는 JSX 로 작성된 HTML 요소를 리턴하고 있다. 

index.js와 App.js의 처음 구조

public 디렉토리 내의 index.html 전체 디렉토리를 통틀어 html이라곤 이것 하나밖에 없는데 안이 텅텅 비어있다.

이런 방식이 엄청 생소해보이는데, App.js 에 작성된 코드는 JSX 문법을 이용하여 작성되었다. JSX로 작성된 HTML 요소를 리턴하여 index.js에서 화면에 렌더링 해주고 있는 것이다. JSX 문법을 이용하면 자바스크립트 파일 내에서 선언된 값, 변수들을 HTML 요소 안에 바로 넣어 컴포넌트를 만들 수 있어서 편리하다. 

App.js 하당의 export default App 은 이 App()을 export 내보내기 하고 있다는 의미이고, index.js 상단에 import App from './App'을 보면 이렇게 export 된 App을, App 이라는 이름으로 index.js 파일에서 import 하고 있다는 것이다. 

 

일단 강의를 듣고 아는대로 작성해 보았는데, 딱 보기에도 바닐라 자바스크립트로 dom을 가져와 하나씩 하나씩 절차별로 코드를 짜 주던 것을 컴포넌트로 만들어 엄청 편리하게 쓸 수 있는 것 같다. JSX 라는 문법이 일단 너무 편리해 보여서 얼른 더 배우고 싶다. +_+