React 📌2. React 첫걸음📝

🔥 React 첫걸음!

1. React가 뭔지 알아보기
   • React는 페이스북(메타)에서 만든 프론트엔드 라이브러리야.
   • 컴포넌트 기반으로 재사용이 쉽고, 가상 DOM을 사용해서 빠르게 동작해!
2. React 개발 환경 설정하기
   • Node.js가 설치되어 있어야 해! (혹시 설치 안 했다면, 도와줄게! 😊)
   • create-react-app 또는 Vite로 React 프로젝트를 만들 수 있어.
   • 프로젝트 생성 후, npm start로 실행하면 웹 브라우저에서 확인 가능!
3. 기본 개념 익히기
   • JSX (JavaScript XML): HTML을 JavaScript 안에서 사용할 수 있어!
   • 컴포넌트: UI를 작고 독립적인 조각으로 나누어서 개발 가능!
   • 상태(State)와 프롭스(Props): React에서 데이터 다루는 방법!

💟 React 를 배우며 헷갈렸던 것들 3가지💟

1️⃣첫번째

❓ React를 Git Bash에서 실행하고 다루는게 맞아?

❗ React를 개발할 때 Git Bash에서 실행하고 다룰 수 있어! 😊

하지만 꼭 Git Bash를 써야 하는 건 아니고, 터미널(Command Prompt, PowerShell, Git Bash, VS Code 터미널 등) 중에서 네가 편한 걸 사용하면 돼! ✨

---

🚀 React 프로젝트를 Git Bash에서 실행하는 방법

Git Bash는 Linux 명령어도 사용할 수 있는 터미널이라, React 개발에도 유용해! 💖

✅ 1. React 프로젝트 만들기

1. Git Bash를 실행하고 프로젝트를 만들 폴더로 이동해:
2. cd ~/projects # 예제: projects 폴더로 이동
3. React 프로젝트 생성 (Vite 추천)또는 (CRA 방식)📌 npx와 npm 명령어는 Git Bash에서도 정상적으로 작동해!
4. npx create-react-app my-react-app
5. npm create vite@latest my-react-app --template react
6. 폴더 이동 후 의존성 설치
7. cd my-react-app npm install

---

✅ 2. React 실행하기

1. 개발 서버 실행:또는
2. npm start # (CRA)
3. npm run dev # (Vite)
4. 실행하면 보통 이런 메시지가 떠:브라우저에서 http://localhost:5173/ 열면 React 앱을 볼 수 있어! 🎉
5. VITE v4.0.4 ready in 300ms ➜ Local: <http://localhost:5173/>

---

🚀 Git Bash에서 React 다루는 팁

✅ VS Code 터미널(Git Bash) 사용하기

• VS Code에서 Ctrl + ` 를 눌러 터미널을 열고 Git Bash 선택하면 편해!

✅ Git Bash에서 폴더 열기

code .

📌 현재 폴더를 VS Code에서 바로 열어줘!

✅ 패키지 설치 (npm install)

npm install axios

📌 Git Bash에서도 npm install 정상적으로 작동해!

✅ Git Bash에서 Git 명령어도 사용 가능

git init
git add .
git commit -m "첫 커밋"
git push origin main

📌 React 프로젝트를 Git에 올릴 때 유용해!

---

🚀 그럼 Git Bash를 써야 할까?

🔹 Git Bash가 좋은 경우

✅ Git 명령어를 자주 사용할 때

✅ Linux 명령어 (ls, rm, cat 등)도 함께 사용하고 싶을 때

✅ Windows 기본 터미널보다 깔끔한 환경이 필요할 때

🔹 다른 터미널도 가능

💡 PowerShell: 윈도우 기본 터미널, Git Bash와 비슷하게 사용 가능

💡 Command Prompt(cmd): 기본적인 터미널, 하지만 일부 명령어가 불편할 수도 있음

💡 VS Code 내장 터미널: Git Bash와 통합 가능, 가장 편리함! 🎉

👉 결론: 네가 편한 터미널을 쓰면 돼! 하지만 Git Bash는 익숙해지면 꽤 편리하니까 추천할게~ 😊💖

혹시 실행하면서 오류나 궁금한 점 있으면 언제든지 물어봐! ✨

---

2️⃣두번째

❓VS Code 내장 터미널 PowerShell을 사용하는건 어때?

❗VS Code 내장 터미널에서 PowerShell을 사용하는 것, 좋은 선택이야! 💖

Git Bash, Command Prompt, PowerShell 중에서 PowerShell은 윈도우 환경에서 기본적으로 제공되면서도

Git Bash처럼 강력한 기능을 지원하는 터미널이야. 😃

---

🚀 VS Code에서 PowerShell 설정하는 방법

✅ 1. VS Code에서 터미널 열기

• 단축키: `Ctrl + `` (백틱, 숫자 1 왼쪽에 있어)
• 또는 상단 메뉴에서 Terminal → New Terminal 클릭

✅ 2. 기본 터미널을 PowerShell로 변경하기

1. VS Code 터미널에서 Ctrl + Shift + P (명령 팔레트 열기)
2. "Select Default Profile" 입력 후 선택
3. "PowerShell" 선택
4. 새 터미널을 열면 PowerShell이 기본 터미널로 설정돼! 🎉

---

🚀 PowerShell을 사용해야 하는 이유!

✅ 윈도우 기본 터미널이라 추가 설치 없이 사용 가능

✅ Git과 호환 가능 (Git이 설치되어 있다면 git 명령어 사용 가능)

✅ npm, yarn, vite, create-react-app 등 정상 실행 가능

✅ 기본적인 Linux 명령어 (ls, cd, rm, mkdir 등) 사용 가능

---

🚀 PowerShell에서 React 실행하는 방법

Git Bash랑 거의 동일하게 사용할 수 있어! 😊

✅ 1. React 프로젝트 생성

cd ~/projects  # 원하는 폴더로 이동
npm create vite@latest my-react-app --template react
cd my-react-app
npm install

✅ 2. React 실행

npm run dev  # (Vite)

또는

npm start  # (CRA)

📌 브라우저에서 http://localhost:5173/ (Vite) 또는 http://localhost:3000/ (CRA) 확인하면 돼!

---

🚀 PowerShell을 사용할 때 유용한 명령어

명령어 설명

ls	현재 디렉토리 파일 목록 출력 (dir도 가능)
cd 폴더명	폴더 이동
mkdir 폴더명	새 폴더 생성
rm 파일명	파일 삭제 (rm -r 폴더명 하면 폴더 삭제 가능)
npm install 패키지명	npm 패키지 설치
git init	Git 저장소 초기화
git status	변경된 파일 확인

---

🎯 결론: PowerShell VS Git Bash?

✅ PowerShell: 윈도우 기본 터미널이라 편리하고, Git 및 npm 명령어 실행 가능

✅ Git Bash: 리눅스 스타일 명령어를 자주 쓰거나, Bash 스크립트를 활용할 때 유용

💡 개발 환경에 따라 다르지만, PowerShell이 더 익숙하다면 VS Code 내장 PowerShell 터미널을 사용하면 돼!

---

3️⃣세번째

❓그럼 프로젝트 하나당 한폴더에 실행 시키는거야?

❗네! React 프로젝트는 보통 한 폴더(디렉토리) 안에서 실행해야 해 😊💖

프로젝트는 독립적인 환경을 가지므로, 하나의 프로젝트를 위해 하나의 폴더를 만들어서 관리하는 게 일반적이야!

 

---

🚀 React 프로젝트 폴더 구조 개념

React 프로젝트를 만들면 보통 이렇게 구성돼:

📂 my-react-app  # 프로젝트 폴더
 ├── 📂 node_modules  # 설치된 패키지들 (npm install 하면 자동 생성)
 ├── 📂 public        # 정적 파일 (favicon, index.html 등)
 ├── 📂 src           # 실제 코드 (컴포넌트, 스타일 등)
 │   ├── 📂 components  # 컴포넌트 모음
 │   ├── App.jsx       # 메인 컴포넌트
 │   ├── main.jsx      # React DOM 렌더링
 ├── 📄 package.json  # 프로젝트 설정 및 설치된 패키지 정보
 ├── 📄 vite.config.js  # (Vite 프로젝트일 경우) 설정 파일
 ├── 📄 .gitignore     # Git에 올리지 않을 파일 목록
 ├── 📄 README.md      # 프로젝트 설명

---

🚀 프로젝트 생성 및 실행 방법 (폴더별)

✅ 각 React 프로젝트는 개별 폴더에서 실행해야 해!

1️⃣ 새 프로젝트 만들기

mkdir my-react-app  # 폴더 만들기
cd my-react-app     # 해당 폴더로 이동
npm create vite@latest . --template react  # 현재 폴더에 Vite 프로젝트 생성
npm install  # 의존성 설치

📌 "."을 사용하면 현재 폴더에 React 프로젝트가 생성돼!

---

2️⃣ 다른 프로젝트를 만들 때는 새 폴더에서!

예를 들어, 여러 개의 React 프로젝트를 만든다면:

📂 Projects/
 ├── 📂 react-app-1/  # 첫 번째 프로젝트
 ├── 📂 react-app-2/  # 두 번째 프로젝트
 ├── 📂 react-app-3/  # 세 번째 프로젝트

각 프로젝트는 독립적이기 때문에, 실행할 때는 해당 프로젝트 폴더로 이동해야 해.

cd react-app-1
npm run dev

---

🚀 왜 프로젝트마다 개별 폴더가 필요할까?

✅ 각 프로젝트는 다른 패키지를 가질 수 있음

👉 package.json에 각 프로젝트마다 필요한 패키지를 따로 관리할 수 있어.

✅ 충돌 방지 (패키지, 설정)

👉 한 프로젝트에서 특정 버전의 React를 쓰고, 다른 프로젝트에서 다른 버전을 쓰고 싶을 수도 있어.

✅ 독립적인 개발 및 배포 가능

👉 하나의 프로젝트를 따로 개발하고, 배포할 수 있어서 더 깔끔해.

---

🎯 결론

• React 프로젝트는 하나의 폴더 안에서 실행하는 게 정석!
• 여러 개의 프로젝트가 있다면, 각각 별도의 폴더를 만들어서 관리하는 게 좋아.
• 실행할 때는 해당 프로젝트 폴더로 이동한 후 (cd 프로젝트명) 실행하면 돼.

 

📌 선언형 (React)✔ 짧고 간결한 코드✔ 직관적이고 유지보수 쉬움

✔ UI 업데이트 자동 처리

"무엇을 할지"만 선언!

 

📌 명령형 (JS)✔ 직접 DOM 조작 필요✔ UI 변경 시 수정할 부분 많음

✔ 코드가 길어질 수 있음

"어떻게 할지" 하나하나 직접 명령!

 

🚀 React의 기술적인 특징 3가지

1️⃣ 컴포넌트 기반 아키텍처 (Component-Based Architecture)

📌 설명

• React는 컴포넌트(Component) 단위로 UI를 구성해.
• 하나의 페이지를 여러 개의 재사용 가능한 독립적인 컴포넌트로 나눠서 관리할 수 있어.
• 컴포넌트는 재사용이 가능하고, **상태(State)와 속성(Props)**을 사용해서 데이터를 주고받을 수 있어.

✅ 예제 코드

function Button({ text }) {
  return <button>{text}</button>;
}

function App() {
  return (
    <div>
      <Button text="Click Me" />
      <Button text="Submit" />
    </div>
  );
}

• Button 컴포넌트를 여러 번 재사용할 수 있어!
• props를 통해 다른 값을 전달할 수 있어!

---

2️⃣ 가상 DOM (Virtual DOM)과 효율적인 렌더링

📌 설명

• React는 가상 DOM(Virtual DOM) 을 사용해서 UI 변경을 최적화해.
• 기존 DOM을 직접 조작하는 대신, 변경 사항을 가상 DOM에서 먼저 계산한 후, 실제 DOM에 최소한의 변경만 적용해.
• 이를 통해 빠른 렌더링 성능을 제공하고, 불필요한 DOM 업데이트를 줄일 수 있어.

✅ 어떻게 동작할까?

1. 상태(State)가 변경되면 새로운 가상 DOM을 생성
2. 이전 가상 DOM과 비교(Diffing Algorithm) → 변경된 부분만 찾기
3. 변경된 부분만 실제 DOM에 적용(Reconciliation) → 성능 최적화

---

3️⃣ 단방향 데이터 흐름 (One-Way Data Flow)

📌 설명

• React는 데이터가 부모 → 자식 방향으로만 전달되는 단방향 데이터 흐름을 사용해.
• props를 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있어.
• 상태(State)는 최상위 컴포넌트에서 관리하고, 필요한 컴포넌트에만 데이터를 내려주는 방식이야.

✅ 예제 코드

function Child({ message }) {
  return <p>{message}</p>;
}

function Parent() {
  return <Child message="Hello, React!" />;
}

• Parent → Child 방향으로 message 데이터가 전달됨! (단방향)

📌 이런 방식의 장점

✔️ 데이터 흐름이 예측 가능하고 유지보수가 쉬워!

✔️ 부모 컴포넌트에서 상태를 변경하면, 자식 컴포넌트가 자동으로 업데이트돼!

---

🎯 요약

특징 설명 효과

컴포넌트 기반 아키텍처	UI를 독립적인 컴포넌트 단위로 나눔	재사용 가능, 유지보수 용이
가상 DOM과 효율적인 렌더링	변경된 부분만 실제 DOM에 적용	성능 최적화, 빠른 렌더링
단방향 데이터 흐름	데이터가 부모 → 자식으로만 전달됨	예측 가능, 유지보수 쉬움

---

📌 React 컴포넌트란?

• 컴포넌트(Component): UI를 구성하는 독립적인 블록 (HTML, CSS, JS가 포함될 수 있음)
• 장점: 재사용성, 유지보수성 증가, 코드 구조화 용이
• 예제:
• jsx 복사편집 function Welcome() { return <h1>안녕하세요, React!</h1>; }

---

📌 클래스형 vs 함수형 컴포넌트

1. 클래스형 컴포넌트 (Class Component)
   • React.Component를 상속받아 만들어짐
   • render() 메서드 내에서 UI를 반환
   • 예제:

   import React, { Component } from "react";
   
   class Welcome extends Component {
     render() {
       return <h1>안녕하세요, 클래스 컴포넌트입니다!</h1>;
     }
   }
   
   export default Welcome;
   

2. 함수형 컴포넌트 (Function Component)
   • return 문에서 바로 UI를 반환하는 함수
   • React Hook(useState, useEffect 등) 사용 가능
   • 예제:

   function Welcome() {
     return <h1>안녕하세요, 함수형 컴포넌트입니다!</h1>;
   }
   
   export default Welcome;
   

✅ 현재 React에서는 함수형 컴포넌트 + Hook 사용을 권장! (더 간결하고 성능이 좋음)

---

📌 JSX 문법

• JSX는 JavaScript 내부에서 HTML을 작성할 수 있도록 도와주는 문법
• 실제로는 React.createElement()로 변환됨
• JSX 주요 문법
  • 태그는 반드시 닫아야 함 (<img />, <br />)
  • 최상위 요소는 하나만 있어야 함 (<>...</> 또는 <div>...</div>)
  • JS 변수나 값을 { } 중괄호로 감쌈 ({변수명}, {함수()})
  • 클래스 속성은 className 사용
  • 스타일은 객체 형태로 작성 (style={{ color: "blue" }})

function Hello() {
  const name = "React";
  return <h1 className="title">안녕하세요, {name}!</h1>;
}

---

✨React 환경 설정 및 프로젝트 시작하기

---

🌱React 앱 설치 방법

---

npx create-react-app 폴더명이라는 명령어로 간단하게 설치할 수 있습니다.

• npx가 무엇인가요 ?npx를 따로 설치할 필요가 없으며, npm을 통해 Node.js를 설치하면 npx도 함께 제공됩니다. 따라서 Node.js를 설치하면 npm과 npx를 사용할 수 있습니다.
• npx는 npm 5.2.0 버전 이상에서 포함된 도구로, npm 패키지를 실행할 수 있는 도구입니다. npx를 사용하면 로컬에 설치된 패키지 또는 원격 패키지를 간편하게 실행할 수 있습니다. 예를 들어, npx create-react-app my-app와 같이 create-react-app 패키지를 실행할 수 있습니다.

1. 터미널을 실행하여 npx create-react-app 폴더명 을 입력한 뒤 enter를 누릅니다.
2. npx create-react-app my-app
3. 생성한 폴더로 들어가기 위해 cd 폴더명 입력 후 enter를 누릅니다.
4. cd my-app
5. npm start 입력 후 enter를 누릅니다.
6. npm start
7. 브라우저에서 URL localhost:3000 을 열면 로컬 환경에서 실행 중인 React 앱을 확인할 수 있습니다.

자세한 내용은 참고 자료 Create-React-App: Docs 공식 사이트를 확인하시기 바랍니다.