본문 바로가기
책곡책곡/리액트를 다루는 기술

1장. 리액트 시작

by 몌으니 2025. 1. 31.

1.1 왜 리액트인가?

  • 데이터가 변할 때 마다 어떤 변화를 줄 지 고민하는게 아니라 기존 뷰를 날리고 새로 렌더링 하기 때문에 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다.
  • 리액트는 기존의 라이브러리나 프레임워크와 달리 MVC 패턴이 아닌 그 중에서도 View에만 집중한 라이브러리이다.

1.1.1 초기 렌더링

render(){...}

컴포넌트가 어떻게 생겼는지를 정의한다.

html 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보가 담긴 객체 반환

렌더링이 끝나면 HTML 마크업 만들고 DOM안에 내용 넣기

1.1.2 조화과정(Reconciliation)

  • 컴포넌트에 데이터 변화가 일어나면
  • 새로운 데이터를 가지고 render 함수 다시 호출
  • 그 데이터를 지닌 뷰를 생성
  • 이때, 바로 DOM에 반영하지 않고 이전 render 함수가 만든 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 자바스크립트를 이용하여 최소한의 연산으로 비교 후 DOM 트리 업데이트

즉, 전체 컴포넌트가 다시 렌더링 하는 것 처럼 보이지만 실제는 최소한의 업데이트를 한다.

1.2 리액트의 특징

1.2.1 Virtual DOM

DOM이란?

: Document Object Model

  • 객체로 문서 구조를 표현하는 방법 (XML, HTML)
  • 트리형태로 특정 노드 조회, 수정, 제거, 생성 등이 가능
  • 정적이다.
  • Javascript를 이용해서 동적으로 만들 수 있다.

DOM 자체는 빠르지만, 요소의 개수가 늘어날 경우 허비되는 시간이 많아져 느려진다.

 

DOM은 변화할 때

  • CSS의 재연산
  • 레이아웃 구성
  • 페이지 리페인트

과정을 거치며 잦은 업데이트가 일어날 경우 성능 저하가 일어날 수 있다.

따라서, 속도 이슈의 해결책은 DOM을 최소한으로 조작하는 것 이다.

React에서는 이러한 문제점을 해결하기 위해 DOM의 업데이트를 추상화하여 처리횟수를 초기화한다 (Virtual DOM)

 

Virtual DOM

실제 DOM을 조작하는 게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다.

실제 DOM의 사본 정도의 개념으로 이해하면 쉽다. (render 함수가 Virtual DOM 객체를 반환하는 역할을 한다.)

 

Virtual DOM의 동작원리

  • 업데이트한 전체 UI를 Virtual DOM에 리렌더링
  • 실제 DOM과 생성된 Virtual DOM을 비교
  • 바뀐 부분만 실제 DOM에 적용

위와 같은 과정을 거친다.

따라서, 지속적으로 데이터가 변화하는 대규모 어플리케이션에 효율적이다.

 

Virtual DOM 동작방식

1.2.2 기타 특징

리액트는 프레임워크가 아니라 라이브러리이다. 그것도 ‘뷰’만 신경쓰는 라이브러리므로 기타 기능은 직접 구현하여 사용해야 한다.

그러나 다른 개발자들이 만든 라이브러리( 라우팅 : react-router, Ajax : axios or fetch, 상태관리 : redux or MobX 등)를 사용하여 빈 자리를 채우면 된다.

또 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다.

ex. Backbone.js, AngularJS 등의 프레임워크와 함께 사용이 가능

1.3 작업 환경 설정

1.3.1. Node.js와 npm, yarn

Node.js는 자바스크립트 런타임 = 웹브라우저 환경이 아닌 곳에서도 자바스크립트 사용 가능.

npm은 node.js 패키지(재사용 가능한 코드) 매니지 도구

yarn은 npm 대체 패키지 관리자 도구로 npm보다 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능 제공.
Node.js, npm, yarn 설치방법

1.3.2. VS Code 확장 프로그램

  • ESLint : 자바스크립트 문법 및 코드 스타일 검사 도구
  • Reactjs code snippets : 리액트 코드 스니펫 모음
  • Prettier - Code formatter : 코드 자동 정리 도구
  • Korean Language Pack for Visual Studio Code : 한국어
  • vs code에서 F1 / Configure Display Language / ko 설정 후 재시작하면 에디터 한글 적용

1.3.3. Git 설치

1.3.4. create-react-app으로 프로젝트 생성하기

create-react-app은 리액트 프로젝트를 생성할 떄 피리요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다.

터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행하세요.

yarn create react-app project-name

리액트 프로젝트를 만들 때는 이렇게 yarn create react-app <프로젝트 이름> 명령어를 사용합니다.

저는 프로젝트명을 react-study로 했습니다.

이렇게 명령어를 입력하고 나면 다음과 같은 결과가 터미널에 나타납니다.

C:\Users\user>yarn create react-app react-study
yarn create v1.22.17
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@5.0.0" with binaries:
      - create-react-app
[####################################################################] 68/68
Creating a new React app in C:\Users\user\react-study.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
[2/4] Fetching packages...
[3/4] Linking dependencies...
{중략..}
success Uninstalled packages.
Done in 6.37s.

Success! Created react-study at C:\Users\user\react-study
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-study
  yarn start

Happy hacking!
Done in 59.85s.

yarn을 사용하지 않는 경우
다음 명령어를 사용하여 리액트 프로젝트를 생성할 수 있습니다.
npm init react-app project-name

프로젝트 생성이 완료되었다면 다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동해 보세요.

cd hello-react // 프로젝트 디렉터리로 경로 이동
yarn start // 또는 npm start

이렇게 명령어를 입력하고 나면 터미널에는 다음과 같은 결과가 나타납니다.

Starting the development server...
Compiled successfully!

You can now view react-study in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.35.17:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

그리고 브라우저에서 자동으로 리액트 페이지가 띄워질 것입니다. 만약 페이지가 자동으로 열리지 않았다면 브라우저 주소창에 다음 링크를 직접 입력하여 열어보세요.

티스토리툴바