4장 리액트 시작하기

리액트의 특징

　리액트의 탄생 배경과 그 특징에 대해 들여다 본다.

컴포넌트 기반의 유연성

　리액트는 유연성이 있기 때문에 새로운 기능을 추가하거나 기능을 업그레이드할 때 코드를 많이 수정하지 않아도 된다.

중복 코드와 유연하지 못한 구조

　동일한 내용을 여러 번 작성해야 하는 코드를 흔히 중복코드라고 한다. 코드의 중복은 유연성을 크게 해친다.

컴포넌트 기반의 유연한 구조

　리액트는 모듈화를 이용해 중복 코드를 제거한다. 즉, 여러 페이지에서 공통으로 사용하는 코드를 ‘컴포넌트’단위의 모듈로 만들어 놓고 필요할 때 호출해 사용한다. 컴포넌트는 리액트를 대표하는 중요 개념 중 하나인데, 이 개념에는 ‘페이지를 구성하는 요소’라는 의미가 포함되어 있다.
　리액트의 컴포넌트는 어떤 페이지에서도 불러올 수 있다. 예를 들어 A 페이지에서 헤더 컴포넌트가 필요하면 해당 페이지로 불러오면 되고, B 페이지에서 필요하면 똑같은 방식으로 불러와 사용하면 된다. 필요가 없어지면 삭제하면 그만이다. 이렇듯 리액트에서는 컴포넌트를 마치 조립용 레고 블록처럼 다룰 수 있어 매우 유연하게 페이지를 구성한다.

쉽고 간단한 업데이트

　업데이트한 웹 페이지릐 정보를 교체하는 일이다. 웹에서 페이지를 업데이트하려면 문서 객체 모델(Document Object Model, DOM)을 조작해야 한다. 돔은 HTML 코드를 트리 형태로 변환한 구성물이다. 돔은 웹 브라우저가 직접 생성하며, HTML 코드를 렌더링하기위해 만든다. 렌더링(Rendering)이란 브라우저가 웹의 3가지 언어 HTML, CSS, 자바스크립트를 해석해 페이지의 요소를 실제로 그려내는 과정이다.

빠른 업데이트

　리액트는 빠른 업데이트를 제공한다.

리액트 앱 만들기

　리액트 웹이 아닌 앱으로 부르는 까닭은 리액트로 만든 웹 서비스는 마치 애플리케이션처럼 다양하게 상호작용할 수 있는 기능을 제공하기 때문이다.

Create React App으로 리액트 앱 만들기

　Create React App은 복잡한 설정 없이 리액트 앱을 만들어 주는 라이브러리이다. 다음 코드를 비주얼 스튜디어 코드의 터미널에 입력한다.

npx create-react-app .

리액트 앱의 구성요소 살펴보기

　package.json, package-lock.jsom, node_modules 같은 Node.js 패키지 구성파일이 존재한다.

리액트 앱 실행하기

　다음 명령을 입력해 start 스크립트를 실행한다.

npm run start

리액트 앱의 동작 원리

　리액트 앱이 어떻게 동작하는지 그 원리를 좀 더 자세히 살펴본다.

리액트 앱에는 어떻게 접속하는 걸까?

　Create React App으로 만든 리액트 앱에는 웹 서버가 내장되어 있다. 즉, npm run start 명령을 실행하면 브라우저가 리액트 앱에 접속하도록 앱에 내장된 웹 서버가 동작한다. 결국 내장된 앱 서버 주소로 브라우저가 자동으로 접속한다.

리액트 앱의 동작 원리 상세 보기

　리액트 앱의 동작 방식을 정리하면 다음과 같다.

• localhost:3000으로 접속을 요청하면 public 폴더의 index.html을 반환한다.
• index.html은 src 폴더의 index.js와 해당 파일이 가져오는 자바스크립트 파일을 한데 묶어 놓은 bundle.js를 불러온다.
• bundle.js가 실행되어 index.js에서 작성한 코드가 실행된다.
• index.js는 ReactDOM.createRoot 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정한다.
• render 매서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가한다. 결과적으로 App 컴포넌트가 렌더링된다.