React 개요

	day01	day01_vite
프로젝트 생성	npx create-react-app day01	npm create vite@latest day01_vite
서버 켜기	cd day01 npm start	cd day01_vite npm install npm run dev

 

---

 

React

1. 개념

• 사용자 인터페이스(UI)를 구축하기 위해 메타(페이스북)에서 개발한 Javascript 기반의 라이브러리
• SPA(Single Page Application) 개발에 가장 적합한 라이브러리
• 화면상에 데이터가 변경되는 경우 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 렌더링 할 수
• 있다.
• 웹 앱(Web App) 또는 네이티브 앱(Native App)
• 유지보수를 쉽게, DOM 관리
• 성능 최적화 쉽게
• 컴포넌트 단위로 구성하여 코드 재사용성이 높으며, 독립적인 유지보수 가능
• 대부분 공식 라이브러리가 없음 (높은 자유도)
• 자바스크립트 친화적 ES6 기반로 배우기가 쉽다
• 리엑트는 순수 자바스크립트가 아니다
  • 베이스가 자바스크립트일 뿐이다

• 함수 뒤에 ()를 붙여서 호출하면 새로고침 하자마자 무조건 실행된다
  • 해결하려면 함수로 한먼 묶어준다
  • 값을 넘길때는 함수 사용

ex)

() => 함수(값)

 

 

 

2. 개발 환경 및 도구

설치 : // IDE\VSCode\[VSCode] Downloads & Settings

• Nodejs
  • https://nodejs.org/ko/
  • 자바스크립트 런타임 환경
  • 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데 사용된다
  • npm : 자바스크립트 프로그래밍 언어를 위한 패키지 관리자

 

• Yarn
  • https://classic.yarnpkg.com/en/docs/install#windows-stable
  • 자바스크립트 패키지를 관리하기 위해서 사용된다
  • yarn : npm동작 방식과 비슷하지만 npm의 단점을 보완해 성능과 속도를 개선한 패키지 관리도구
  • Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠르다

 

npm VS yarn

npm	yarn
여러 패키지를 설치할 경우 패키지가 완전히 설치될 때까지 기다렸다가 다른 패키지로 이동한다 작업이 패키지별로 순차적으로 실행	여러 패키지를 설치할 경우  이 작업들을 병렬로 설치하기 때문에 성능과 속도가 향상된다

 

 

• VS Code ( 에디터 )
  • https://code.visualstudio.com/
  • VS Code 확장설치 (부가기능설치)
  • 기본 브라우저는 Chrome 설정해야 한다.
  • 톱니바퀴 → Settings → browser 검색 → 아래로 내려오면 Custom Browser : Chrome 선택
  • 톱니바퀴 → Settings → local 검색 → Extensions(왼쪽) → 아래로 내려오면 Use local IP as host 체크

 

---

 

Component

리액트 컴포넌트

• 컴포넌트는 UI 를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용된다
• React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다

 

함수형 컴포넌트

• React 컴포넌트는 개념상 JavaScript 함수와 유사하다
• 컴포넌트 외부로부터 속성(props)을 전달 받아 어떻게 UI를 구성해야 할지 설정하여 React 요소(JSX를 Babel이 변환 처리)로 반환한다
• 이러한 문법 구문을 사용하는 컴포넌트를 React는 '함수형(functional)'으로 분류한다

 

---

 

JSX 규칙

JavaScript + XML

 

1. 개념

• JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법이다
• JSX는 리액트에서 사용하는 파일로 JavaScript 코드 안에 HTML과 유사한 코드를 작성할 수 있게 해
• 준다
• JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법이다
• 브라우저에서 직접 실행되지 않으며, Babel과 같은 변환기를 통해 Javascript로 변환 후 실행한다
• JSX가 하는 일은 React 요소(Element)를 만드는 것이다
• 얼핏 보면 JSX는 JavaScript 문법 확장(JavaScript eXtension) 으로 구문이 HTML과 유사하다
• 하지만 React 요소는 실제 DOM 요소가 아니라, JavaScript 객체이다
• 리액트 자체 빌드 도구 덕분에 *.js, *.jsx로 작성해도 아무런 문제 없이 실행은 가능하나 jsx파일로 컴
• 포넌트 만들 것을 권장한다

 

 

2. 규칙

• 태그는 반드시 닫아줘야 한다.
• 최상단에서는 반드시 div로 감싸주어야 한다. ( Fragment 사용, <> 상황에 따라 )
• JSX안에서 자바스크립트 값을 사용하고 싶을 때는 { }를 사용한다.
• 변수 값 출력 예시 참고 -> { name }
• 조건부 렌더링을 하고 싶으면 && 연산자나 삼항 연산자를 사용한다.
• 인라인 스타일링은 항상 객체형식으로 작성한다
• 스타일 작성 시 – 빼고 첫 글자는 대문자로 작성 한다
• 별도의 스타일파일을 만들었으면 class 대신 className을 사용한다. ( 권장사항 )
• 주석은 {/* */}을 사용해 작성한다.

 

⭐ <></> Fragment

• 브라우저 상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화를 해준다
• 그룹화를 하는 이유는 실행될 때 JSX에 작성한 내용은 하나의 JavaScript 객체로 변환되는데 하나의
• 태그로 감싸지지 않으면 변환이 되지 않는다

 

---

 

리액트 프로젝트 생성

1. 터미널 열기

Ctrl + backtick(`) - 터미널 열기

 

2. 프로젝트 생성

npx create-react-app day01

 

※ npx create-react-app day01 명령으로 프로젝트 생성 에러

[에러]

npm ERR! code ENOENT

npm ERR! syscall lstat

npm ERR! path C:\Users\bitcamp\AppData\Roaming\npm

npm ERR! errno -4058

npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\bitcamp\AppData\Roaming\npm'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

 

[ 해결 방법 - 첫 번째 또는 두 번째 방법으로 해결해본다 ]

 

첫 번째 방법

C:\Program Files\nodejs\node_modules 안의 npm 폴더를 C:\Users\bitcamp\AppData\Roaming\에 복사한다

나는 C:\Users\p3cha\AppData\Roaming 

 

해결

 

두 번째 방법

Node를 제거하고 다시 설치해본다

※ Nodejs 삭제

1. 제어판 - 프로그램 삭제
2. 아래의 경로를 찾아서 모두 삭제
   1. C:\Program Files (x86)\Nodejs
   2. C:\Program Files\Nodejs
   3. C:\Users\User\AppData\Roaming\npm
   4. C:\Users\User\AppData\Roaming\npm-cache

 

 

cd day01
yarn start OR npm start

 

 

공용 뭐시기 허용

 

 

---

 

vite 활용 리액트 프로젝트 생성

Vite 활용 방식

기존 방식은 세팅에 시간이 오래 걸리고 다소 무겁다는 특징이 있다

• Vite를 이용하면 세팅도 빠르고 개발 단계에서도 수정사항을 빠르게 반영하여 실행 화면을 업데이트 해주기 때문에 매우 유용하다
• Vite 사용을 위해선 Node.js가 설치되어 있어야 한다

 

Vite

Frontend 개발을 위해 설계된 빌드도구

빠른 개발 환경을 제공하며, React, Vue, Svelte 등 다양한 프레임워크를 지원

 

1. 터미널 열기

Ctrl + backtick(`) - 터미널 열기

 

2. 프로젝트 생성

npm create vite@latest day01_vite

React 선택

JavaScript 선택

cd day01_vite
npm install
npm run dev

 

local 주소 크롬 주소창에 입력

 

---

 

리액트 파일

*.js 파일에서 rsc 입력 후 엔터를 치면 자동으로 틀이 만들어진다.

 

• public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">화면에 보이는 영역</div>
  </body>
</html>

 

 

• src/index.js : 중간 다리 역할

ReactDOM 모듈의 렌더 함수를 사용해 #root (public/index.html) 요소 내부에 동적으로 App 컴포넌트(React Element)를 렌더링 한다

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

 

 

• App.js

import React from 'react' //React 모듈 코드
import logo from './logo.svg' //로고 이미지 로드
import './App.css' //App 스타일 로드
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';
import Test04 from './components/Test04';
import Test05 from './components/Test05';
  
//함수형 컴포넌트(Functional Component)
function App() {
  
	//JSX (JavaScript 문법 확장) 반환
	return (
    <>
      {/* <Test01 /> */}
      {/* <Test02 /> */}
      {/* <Test03 /> */}
      {/* <Test04 /> */}
      <Test05 />
    </>
	)
}
  
export default App; //App 컴포넌트 모듈 내보내기

 

 

---

 

Props

1. 개념

• properties의 약자로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터(객체, 배열 등)나 함수
• 컴포넌트 간의 데이터를 전달하기 위해 사용되는 리액트 객체

 

 

2. 보내는 방법

• import 한 컴포넌트 태그 내에 속성이름=값 형태로 작성하여 전달
• 여러 개의 값 전달할 때는 중괄호 안에 전달받는 속성 이름을 콤마(,)로 구분하여 나열
• 숫자를 보내는 경우 {} 안에 작성
• JavaScript Object로 전달하는 데이터는 {{ }} 중괄호 2개를 사용하여 내부에 이름과 값을 작성

 

 

3. 받는 방법

• 부모로부터 전달받은 props를 직접 받으려면 { } 안에 속성 이름 작성한다.
• 함수의 매개변수를 props로 작성한 다음 props.속성이름 형태로 값을 사용할 수 있다

 

 

4. 예제

// day01/src/components
Dog.jsx
Test01.jsx
Test02.jsx
Test03.jsx Test03.css
Test04.jsx Cat.jsx Lion.jsx	props
Test05.jsx Test05Sub.jsx

 

 

 

---

이벤트

1. 개념

on + 첫글자 대문자

 

함수 참조 전달

화살표 함수로 전달

 

 

 

2. 예제

// day02_vite/src/components
Test01.jsx	event

 

배열과 객체 배열의 map 반복문

1. 개념

map 을 사용할 떄는 반드시 key 속성을 주어야 한다

 

 

2. 예제

// day02_vite/src/components
Test02.jsx	map