상세 컨텐츠

본문 제목

[리액트 스타터2] 4장. 리액트 시작하기

23-24/React.js 2

by 롱롱😋 2023. 10. 13. 12:08

본문

728x90

1. 리액트의 특징

 

 

< 리액트의 탄생 >

  • 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리이다.
  • 프론트 엔드 기술 중 가장 많은 프로그래머가 사용하는 기술이다.
  • 페이스북 개발 팀이 만들어낸 기술이다.

 

[ 컴포넌트 기반 유연성 ]

  • 새로운 기능 추가 및 업그레이드 시 코드 수정이 많이 필요하지 않다.

 

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

  • 중복 코드: 동일한 내용을 여러 번 작성해야 하는 코드이다.
  • 코드의 중복 -> 유연성을 크게 해친다.

 

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

  • 리액트는 모듈화를 이용하여 중복 코드를 제거한다.
  • 공통 사용되는 코드를 컴포넌트 단위의 모듈로 만든 후 호출로 사용한다.

 

<쉽고 간단한 업데이트 >

  • 업데이트: 웹 페이지의 정보를 교체하는 일이다.
  • 문서 객체 모델을 조작하여 업데이트를 한다.

문서 객체 모델 (DOM): HTML 코드를 렌더링 하기 위해 만드는 것

간단한 돔 예시

돔 API로 돔에 접근하여 요소를 수정할 수 있다.

API: 특정 대상을 제어하는 목적으로 사용하는 도구이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script>
      function onClickButton() {
        const h1Elm = document.getElementById("h1");
        h1Elm.innerText = "반가워요!";
      }
    </script>
  </head>
  <body>
    <h1 id="h1">안녕하세요!</h1>
    <button onclick="onClickButton()">인사말 바꾸기</button>
  </body>
</html>
  • 버튼을 클릭하여 자바스크립트 함수가 실행되어 돔을 실행한다.

자바스크립트로 돔을 조작하는 예시

 

 

[ 빠른 업데이트 ]

  • 웹 서비스의 성능을 결정하는 중요한 요소이다.
  • 리액트는 빠른 업데이트를 지원한다.

 

<브라우저는 어떻게 페이지를 표시할까? >

  1. HTML 코드를 해석하여 돔으로 변환한다.
  2. 돔과 스타일 규칙을 합쳐서 렌더 트리를 생성한다.
  3. 레이아웃: 요소의 위치를 픽셀 단위로 계산한다.
  4. 페인팅: 실제로 페이지에 정보를 입힌다.
  • 돔이 변경될 경우 브라우저는 해당 과정을 반복한다.
  • 브라우저의 성능이 낮을 경우 랙 현상이 일어난다.
  • 랙: 웹에서 페이지의 응답이 느려지는 현상이다.

 

<버추얼 돔을 이용한 효율적인 업데이트 >

  • 버추얼 돔: 가상의 돔, 한 번에 업데이트를 진행하는 도구이다.
  • 버추얼 돔을 여러 번 변경한 후 변경 사항을 모아서 실제 돔을 업데이트한다.

버추얼 돔 및 실제 돔 업데이트

 

2. 리액트 앱 만들기

 

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

  • Create React App: 복잡한 설정 없이 리액트 앱을 만드는 라이브러리이다.
  1. 루트 폴더인 'chapter4' 폴더를 생성한다.
  2. 터미널에서 다음 명령어를 입력한다.
npx create-react-app . //점(.)은 현재 폴더를 의미한다.

npx: 노드 패키지 실행의 명령어이다.

 

 

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

  • Node.js 패키지 구성 파일이 존재한다.
  • 루트 폴더 아래에 존재하는 파일과 폴더를 템플릿이라고 한다.
  • public 폴더는 리액트에서 사용되는 폰트, 이미지 파일 등을 저장하는 폴더이다.
  • src 폴더는 소스 폴더로, 프로그래밍 소스를 저장하는 폴더이다.

 

< 리액트 앱 실행하기 >

npm run start
  • 위 명령어를 입력하여 리액트 앱을 실행한다.
  •  http://localhost:3000에 자동으로 접속된다.
  • <Ctrl>+<C>를 이용하여 리액트 앱을 종료할 수 있다.

 

3. 리액트 앱의 동작 원리

 

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

  • 리액트 앱에는 웹 서버가 내장되어 있다.
  • 웹 서버: 브라우저의 요청에 따라 필요한 웹 페이지를 보내주는 컴퓨터이다.
  • localhost: 내 컴퓨터의 주소이다.
  • 로컬호스트 뒤 [:3000]는 포트 번호이다.
  • 포트 번호: 서버를 구분하는 번호이다.
  • 특정 서버에 맞는 적절한 포트 번호를 입력해야 정상적으로 접속할 수 있다.

 

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

  1. 사용자가 localhost:3000에 접속하면 서버는 public 폴더의 index.html을 반환한다.
  2. index.html 안에는 index.js와 자바 스크립트 파일이 들어있는 bundle.js이 들어있다.
  3. bundle.js가 실행됨과 동시에 index.js에 작성된 코드가 실행된다.
  4. index.js는 ReactDOM.createRoot 메서드이며, 리액트 앱의 루트가 될 요소를 정한다.
  5. render 메서드를 이용하여 돔의 루트 아래에 자식 컴포넌트를 추가한다.
  6. App 컴포넌트가 렌더링 된다.

 

QUIZ

1. src 폴더 안에는 리액트에 사용되는 폰트, 이미지 파일이 들어있다. ( O / X )

2. 리액트는 ( )를 기반으로 유연한 구조를 이룬다.

3. 리액트는 변경 사항을 모아서 한 번에 업데이트할 수 있도록 도와주는 ( )을 사용한다.

4.  HTML 코드를 렌더링 하기 위해 만드는 것은 ( )이다.

 

1. X

2. 컴포넌트

3. 버추얼 돔

4. 문서 객체 모델 (DOM)

이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023), 4장.

 

Editor: 숨숨

728x90

'23-24 > React.js 2' 카테고리의 다른 글

[리액트 스타터2] 5장. 리액트의 기본 기능 다루기(2)  (0) 2023.11.10
[리액트 스타터2] 5장. 리액트의 기본 기능 다루기(1)  (1) 2023.11.03
[리액트 스타터2] 3장. Node.js  (0) 2023.10.13
[리액트 스타터2] 2장. 자바스크립트 실전  (1) 2023.10.06
[리액트 스타터2] 1장. 자바스크립트 기초  (0) 2023.09.29

관련글 더보기

티스토리툴바