[한입 크기로 잘라 먹는 리액트]

728x90

강의 - Section 4 : React.js 개론

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 :

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

이정환 Winterlood | 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로

www.inflearn.com

React.js 개론

1. React.js 소개

* React의 특징

1. 컴포넌트를 기반으로 UI를 표현한다

: 리액트는 컴포넌트 기반 아키텍쳐를 사용한다. 이는 애플리케이션이 작은(또는 재사용 가능한) 컴포넌트들로 나누어서 개발할 수 있음을 의미한다. 각 컴포넌트는 독립적이며, 자신만의 상태와 로직을 가질 수 있다.

2. 화면 업데이트 구현이 쉽다

: 리액트는 선언형 프로그래밍으로 동작한다. 개발자는 UI가 특정 상태에서 어떻게 보여야 하는지만 선언하면, React가 상태 변화에 따라 UI를 자동으로 업데이트 해준다.

(선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 ↔ 명령형 프로그래밍 : 목적을 이루기 위한 모든 과정을 설명 )

3. 화면 업데이트가 빠르게 처리된다

: 리액트는 가상 DOM(Virtual DOM) 기술을 사용하여 빠른 화면 업데이트를 제공한다. 실제 DOM 조작은 성능적으로 비용이 많이 드는 직업이지만, React는 변경 사항을 가상 DOM에 먼저 반영하고, 그 차이점을 실제 DOM에 최소한의 변경으로 반영한다.

React.js 개론

2. React App 생성하기

* Vite로 리액트 앱 생성

(Vite? 프론트엔드 개발을 위한 최신 빌드 도구, 개발 툴. 기본 설정이 적용된 React App 생성 가능)

1. 폴더 확인 후 터미널에 아래 코드 실행

npm create vite@latest

2. create-vite 생성 확인 : y 입력

3. 프로젝트 이름 설정

4. 프레임워크 선택 : React → JavaScript

5. 생성완료

확인해보면 node_modules와 package-lock.json이 설치가 안된 것을 볼 수 있다.

앞 시간에 배웠던 것처럼 터미널에 아래와 같이 입력해준다.

npm i

6. 인스톨 완료

* 생성된 폴더, 파일 설명

1. public : 정적 파일을 저장하는 폴더. 여기에 있는 파일을 별도의 처리 없이 그대로 빌드 결과에 포함된다. 예를들어 이미지나 pavicon등이 들어갈 수 있다

2. src : 애플리케이션 소스 코드가 포함된 폴더. React 앱의 컴포넌트, 스타일, 로직 등을 작성하는 메인 폴더

(여기 안에도 svg파일이 있는데, 여기에 들어간 이미지는 소스코드 내에서 import로 불러와 모듈처럼 가져올 수 있으며 public에 들어가있는 이미지는 URL을 통해 접근하며 브라우저가 직접 로드할 수 있다는 차이점이 있다)

3. eslint.config : ESLint의 설정 파일로, 코드 품질과 스타일을 검사하기 위한 규칙들을 정의하는 파일

4. gitignore : Git에 포함되지 않아야 할 파일이나 폴더를 명시하는 파일

5. index.html : 리액트 앱의 기본 틀 역할을 하는 HTML 파일. main.js 파일이 이곳에 삽입되어 React가 랜더링 된다

6. vite.config : Vite의 설정 파일

* React App 실행(개발 모드로 실행)

npm run dev

* 그 외 Vite 명령어

r + enter : 현재 실행중인 Vite 서버를 재시작 함
u + enter : 현재 실행중인 Vite 서버의 URL을 콘솔에 표시함
o + enter : 현재 실행중인 Vite 웹 애플리케이션을 브라우저에서 열어줌
c + enter : 콘솔 창 클리어
q + enter : 현재 실행중인 Vite 서버 종료

React.js 개론

3. React App 구동원리 살펴보기

* React App 실행하면 아래와 같은 화면이 나온다. 구동원리를 살펴보자

1. HTML 로드 (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

브라우저는 애플리케이션의 index.html 파일을 불러온다. 이 index.html 파일은 리액트 앱의 뼈대를 제공한다.

<body>안에는 <div id = "root"></div>라는 단순한 태그가 있는데 이 태그는 리액트가 UI를 그릴 공간을 만들어 준다.

이외에 <script>태그는 리액트가 동작할 JS 파일을 불러온다.

2. JavaScript 모듈 로드 (main.jsx)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

index.html안 <script> 태그로 불러온 불러온 main.jsx 파일이 리액트 앱의 시작점이다.

여기서 createRoot라는 함수가 id가 root라는 요소를 찾아서 App 컴포넌트를 렌더링한다.

* <StrictMode> 는 간단하게 말해서 개발 중 문제를 미리 확인할 수 있는 개발 도구이다.

결과적으로! 동적인 화면 생성

리액트가 JS로 필요한 HTML을 만들어서 넣어주기 때문에 동적인 웹페이지를 만들 수 있다.

저작자표시 비영리 변경금지

'IT > React' 카테고리의 다른 글

[한입 크기로 잘라 먹는 리액트] - Node.js 기초 (5)	2024.11.01
[React] ReactJS로 영화 웹 서비스 만들기 (STATE #1) (0)	2024.02.22
[React] ReactJS로 영화 웹 서비스 만들기 (The BASICS OF REACT) (0)	2024.02.21

YeonBu's Archive 💜

[한입 크기로 잘라 먹는 리액트] - React.js 개론

1. React.js 소개

2. React App 생성하기

3. React App 구동원리 살펴보기

'IT > React' 카테고리의 다른 글

티스토리툴바

[한입 크기로 잘라 먹는 리액트] - React.js 개론

1. React.js 소개

2. React App 생성하기

3. React App 구동원리 살펴보기

'IT > React' 카테고리의 다른 글

관련글

티스토리툴바