[React] DAY 1 - React 시작

💡 무엇을 배울까

1. 왜 React인가 ❓
2. React의 특징 
3. React 작업 환경 설정

 

 

---

📖 수업 내용

1️⃣ 왜 React인가 ❓

자바스크립트 기반 프레임워크

 

-> 순수 자바스크립트의 문제를 해결하기 위해 수많은 프레임워크들이 등장하게 되었다 !

 

이러한 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용함

 

MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 ❓

= 모델(Model)과 뷰(View)가 있다 ❗

모델(Model) : 애플리케이션에서 사용하는 데이터를 관리하는 영역

뷰(View) : 사용자에게 보이는 부분

 

MVC 아키텍처

프로그램이 사용자에게 어떤 작업(예: 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영

-> 이때 반영하는 과정에서 보통 뷰를 변형(mutate)함

 

BUT..!!

업데이트하는 항목에 따라 변형하는 작업은 간단하겠지만,

애플리케이션 규모가 크다면 상당히 복잡해지고 제대로 관리하지 않으면 성능도 떨어질 수 있다

 

그럼 어떡하지? 해결 방법 없나?

⬇

이러한 문제를 해결해 줄 수 있는 건 바로바로바로바로

React ❗❗❗❗❗

 

어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라

그냥 기존의 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식을 사용하면

애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도 많이 줄어들 것이다.

 

---

💡 이제 리액트에 대해 이해해보자 !

 

• 리액트란?

-> 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용함

-> 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리

-> 라이브러리이지만, React + Router + Redux 등 조합해서 쓰면 프레임워크처럼 쓸 수도 있음

 

여기서 잠깐 !

프레임워크랑 라이브러리의 차이가 뭐지?

=> 둘 다 개발을 도와주는 도구지만, 역할과 제어 방식에서 차이가 있음

 

🏗️  프레임워크(Framework)

전체 구조를 제공하고, 프레임워크가 내 코드를 호출함 (거꾸로 제어 -> Inversion of Control)

• 정해진 구조와 흐름에 따라 코드를 작성해야 함
• 프레임워크가 앱의 흐름을 주도(control)함
• 예 : Angular, Vue, Next.js, Spring, Django 등

---

🔧 라이브러리(Library)

개발자가 직접 호출해서 사용하는 도구 상자 같은 존재

• 필요한 기능이 있을 때 개발자가 직접 호출해서 사용함
• 예 : jQuery, Lodash, D3.js, React

---

쉽게 말해, 👉

라이브러리는 내가 요리할 때 필요한 재료나 도구를 꺼내 쓰는 것이고,

프레임워크는 요리사가 시키는 방식대로 내가 요리해야 하는 것이다.

 

	프레임워크	라이브러리
유연성	낮음 (정해진 방식대로 개발)	높음 (필요한 기능만 선택 가능)
학습 곡선	높음 (구조와 규칙을 익혀야 함)	낮음 (특정 기능만 익히면 사용 가능)
개발 속도	빠름 (기본 구조가 제공됨)	상대적으로 느림 (직접 구조 설계 필요)
일관성	높음 (코드 스타일링과 개발 방식 통일)	낮음 (여러 라이브러리를 조합하면 코드 스타일이 다를 수 있음)
확장성	높음 (표준화된 방식으로 유지보수 용이)	상황에 따라 다름 (구성에 따라 유지보수 난이도가 달라짐)
보안	상대적으로 강함 (내장된 보안 기능 포함)	직접 관리해야 함 (외부 라이브러리 보안 검토 필요)

 

---

 

• 컴포넌트(component)란?

-> 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체

-> 재사용이 가능한 API로 수많은 기능들을 내장함

-> 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함

 

---

 

• 초기 렌더링

초기 렌더링

-> 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 처음 어떻게 보일 지를 정함

-> 리액트에서는 이를 다루는 render() 함수를 사용함

render() { ... }

 

1. render() 함수를 통해 컴포넌트가 어떻게 생겼는지 정의하고,

뷰가 어떻게 생겼고 작동하는지에 대한 정보를 지닌 객체를 반환함

 

2. 렌더링 작업이 끝나면 지니고 있는 정보들을 HTML 마크업을 만들고,

 

3. 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입함

 

4. 최종적으로, 사용자 화면에 나타나게 됨

 

---

 

• 조화 과정 (업데이트)

-> 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문에 "조화 과정(reconciliation)을 거친다"라고 표현함

 

-> 컴포넌트는 데이터를 업데이트했을 때 새로운 데이터를 가지고 render() 함수를 다시 호출함

그럼 그 데이터를 지닌 뷰가 생성되는데,

이때 render() 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고,

이전에 render() 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교함

 

즉, JS를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후 DOM 트리를 업데이트하는 것

=> 전체 컴포넌트를 다시 렌더링 하는 것처럼 보이지만 최적의 자원을 사용하여 수행하는 것임

 

---

2️⃣ React의 특징

• Virtual DOM

-> 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것

 

여기서 잠깐 !

DOM이 뭔데?

HTML의 DOM 트리

• Document Object Model의 약어
• 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성함
• 트리 형태로 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능

 

DOM은 과연 느릴까 ?

일부 문서에서는 "요즘 자바스크립트 엔진은 매우 빠른 반면, DOM"은 느리다"라고 함

 

-> 사실 DOM 자체는 빠르다.

 

웹 브라우저 단에서 DOM에 변화가 일어나면

웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는데,

이 과정에서 시간이 허비되는 것이다 !

 

---

 

이제 다시 Virtual DOM으로 돌아가보자 !

-> Virtual DOM을 사용하면 실제 DOM을 추상화한 자바스크립트 객체를 구성하여 사용함.

마치 실제 DOM의 가벼운 사본과 비슷

 

✅ 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링함
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교함
3. 바뀐 부분만 실제 DOM에 적용함

두 DOM 비교

-> 앞서 봤던 조화 과정의 그림에서 오른쪽 '새로운 DOM 트리'가 바로 Virtual DOM !

---

3️⃣ React 작업 환경 설정

✅ 설치 순서

1. Node.js / npm or yarn 설치
2. 코드 에디터 설치 (VS Code 사용)
3. Git 설치
4. create-react-app으로 프로젝트 생성

---

1. Node.js와 npm

 

리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 함 !

 

💡 Node.js

-> 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이므로,

웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있음

 

-> 설치하면 패키지 매니저 도구인 npm이 설치됨

 

💡 npm

-> 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있음

 

https://nodejs.org/ko 에서 Node.js LTS 버전을 다운 받으면 됨 !

 

설치가 끝나면 터미널(또는 cmd창)에서 다음 명령어를 입력하여 제대로 설치됐는지 확인하면 끝 ! (내껀 v22.13.0)

node -v

 

※ 유레카에서 보내준 책에선 npm 대신 yarn이라는 패키지 관리자 도구를 설치하여 사용한다. (하라는 대로 해야지..)

💡 yarn 설치 방법

yarn은 npm의 글로벌 설치 기능을 통해 설치 가능

npm install --global yarn

 

설치가 끝나면 다음 명령어를 입력하여 제대로 설치됐는지 확인해보자 ! (내껀 1.22.22)

yarn --version

---

2. 코드 에디터 설치 (VS Code)

 

리액트 애플리케이션을 만들면서 코드를 수정할 때 사용할 코드 에디터를 설치해보자 !

 

💡 VS Code

https://code.visualstudio.com/ 에서 본인이 사용하는 운영체제에 맞는 버전을 설치하면 됨

 

설치가 끝나고 VS Code를 실행해 확장 프로그램까지 설치하면 끝

 

✅ 확장 프로그램 (책에 나와있는 그대로)

1. ESLint : 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구
2. Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음. (제작자 - charalampos karypidis)
3. Prettier-Code formatter : 코드 스타일을 자동으로 정리해 주는 도구 (요거 첨 사용해 봤는데 아주 유용한 듯 !)

---

3. Git 설치

 

Git은 형상 관리 도구로 프로젝트 버전을 관리하고 협업을 할 때 매우 핵심적인 역할을 한다.

 

마찬가지로 Git도 https://git-scm.com/ 에서 설치 파일을 내려받으면 됨 !

-> window에서는 bash 에뮬레이터도 함께 설치되는데 리액트 프로젝트에서 cmd창보단 bash를 더 사용함

---

4. create-react-app으로 프로젝트 생성

 

💡 create-react-app

-> 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다. (자유롭세 설정 변경도 가능)

 

터미널을 열고 다음 명령어를 실행하여 쉽게 사용 가능

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

 

※ yarn을 사용하지 않는 경우

npm init react-app <프로젝트 이름>

 

프로젝트 생성이 완료되었다면

다음 명령어를 입력하여 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동하면 모든 준비는 끝났다 !!!!!

cd <프로젝트 이름>
yarn start # yarn을 사용하지 않다면 npm start

-> 자동으로 리액트 페이지가 띄워짐 (열리지 않았다면 http://localhost:3000/ 으로 직접 열면 됨 !)

 

이렇게 !!!

 

---

📁 yarn 기반 리액트 프로젝트 파일 구조

 

📁 node_modules

외부 라이브러리들이 실제로 설치되는 공간

• React, axios 등 우리가 설치한 기능들이 여기에 모여 있음
• 이 폴더는 가장 무거운 폴더다 -> git에 올리지 않음

 

📁 public

정적 파일들이 모아져 있는 공간

• 여기에 있는 파일들은 브라우저가 직접 접근 가능
• 가장 중요한 건 `index.html` !

<div id="root"></div>

-> 여기 `#root`라는 곳에 리액트 앱이 끼워짐 (즉, 우리가 만드는 화면은 여기 안으로 들어감)

 

📁 src

우리가 실제로 개발하는 코드들이 들어있는 폴더

• `index.js` : 앱의 시작점! `App.js`를 HTML의 `root`에 넣어주는 역할

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

• `App.js` : 실제로 보이는 화면 구성! JSX 리액트 문법으로 작성

function App() {
  return (
    <div>
      <h1>안녕하세요 리액트!</h1>
    </div>
  );
}

export default App;

• `App.css`, `index.css` : 스타일 파일들. 일반 CSS와 동일하게 사용 가능

 

✅ .gitignore

Git을 사용할 때 버전 관리를 하지 않을 파일 목록을 적는 파일

 

✅ package.json

프로젝트 정보 + 어떤 라이브러리를 사용하는지 기록하는 파일

{
  "name": "my-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

• `dependencies` : 현재 프로젝트에서 사용 중인 라이브러리 목록
• `scripts` : `yarn start`, `yarn build` 같은 명령어 정의

 

✅ yarn.lock

yarn이 자동으로 만들어주는 파일

• 어떤 버전의 라이브러리를 사용 중인지 정확히 기록됨
• 팀원들과 프로젝트 공유 시 같은 환경을 유지하는 데 도움 줌
• 이 파일은 직접 수정할 필요 없음!

 

 

 

 

 

 

 

 

 

 

---

🔍 회고

원래 노션으로 데일리 스터디 노트를 작성했다가

공개적으로 내가 공부한 것을 누구나 이해하기 쉽게 정리하면서 공부하고 싶어서 처음으로 티스토리로 정리해 봤다

(-> 어젯밤에 티스토리 꾸미는 것 때문에 늦게 자서 하루 종일 하품만 했지만 나름 뿌듯✌🏻)

 

공개적이라 노션보다는 좀 더 열심히 작성하는 건 기분 탓,,? 이 아니라 맞다.

 

노션으로 정리할 땐 단축키를 잘 알고 있으니 수업 들으면서 정리하기 편했는데

티스토린 아직 익숙지 않아서 수업 다 끝나고 작성하기 시작했는데 끝나고도 다 작성하지 못했다.

 

리액트 배우는 첫날이라 이론부터 나가서 그런지 정리할 게 많기도 했지만..

 

내일부터는 진짜 제대로 된 실습 시작인 거 같아서 더 집중해서 수업 들을 거다

(오늘은 정리할 것도 많아서 헬스도 못 갔다...😥)

 

비록 컴공을 전공했지만 리액트는 아예 첨이라 설렘 반 걱정 반으로 공부 중이다.

(나만 따라가는 게 벅찰 거 같아서 걱정이 산더미)

 

그치만 !

난 할 수 있다~!~!