Vue3를 어느 정도 알고 있기 때문에 Vue3와 비교하여 리액트를 공부해보자

기본문법 4가지를 비교하여 정리하기 전 가장 큰 차이는 Vue는 '디렉티브(v-if, v-for)' 중심이고, 리액트는 '순수 자바스크립트' 중심이라는 점

1. 변수 바인딩 (Data Binding)

Vue에서는 데이터 바인딩을 위해 {{ }}를 쓰지만, 리액트는 중괄호 { } 하나만 사용
또한 리액트는 단방향 데이터 흐름을 가짐

• Vue3: <p>{{ message }}</p>
• React: <p>{message}</p>

function App() {
  const name = "React";
  return (
    <div className="container"> {/* class 대신 className 사용 */}
      <h1>Hello, {name}!</h1>
      <img src={logo} alt="logo" /> {/* 속성 바인딩도 { } 사용 */}
    </div>
  );
}

2. 조건부 렌더링 (Conditional Rendering)

리액트에는 v-if가 없음. 대신 자바스크립트의 논리 연산자(&&)나 삼항 연산자를 사용

• Vue3:환영합니다!
• React:
  {isLoggedIn &&환영합니다!} (간단한 조건)
  {isLoggedIn ?환영합니다!:로그인하세요.} (If-Else 상황)

3. 리스트 렌더링 (List Rendering / 반복문)

리액트에는 v-for가 없음. 자바스크립트 배열 메서드인 .map() 을 사용하여 배열을 HTML 요소로 변환

• Vue3:
• {{ item.text }}
• React:

const items = [{id: 1, text: '사과'}, {id: 2, text: '바나나'}];

function MyList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li> // key값은 필수!
      ))}
    </ul>
  );
}

4. 상태 관리(State)

Vue3의 ref()나 reactive() 대신, 리액트는 useState Hook 을 사용. 리액트의 상태는 불변성(Immutability) 을 지켜야 하므로 값을 직접 수정하지 않고 반드시 'setter 함수'를 써야 함.

• Vue3: const count = ref(0); count.value++;
• React:

  import { useState } from 'react';
  
  function Counter() {
  	const [count, setCount] = useState(0); // [현재값, 변경함수]
  
  	return (
  		<button onClick={() => setCount(count + 1)}>
  		클릭: {count}
  	);
  }

5. 정리

• 리액트는 "HTML처럼 보이는 자바스크립트(JSX)를 작성한다"고 생각하자
• JSX는 return( )안에 작성함

환경 설정

1. node.js 설치 https://nodejs.org/ko/download
2. VS Code 설치 https://code.visualstudio.com/docs/?dv=win64user

프로젝트 시작하기

프로젝트 시작할 폴더에서 터미널 열고 npx start-react-app [프로젝트명] 입력

프로젝트 구조

최상위 폴더

• node_modules: 프로젝트 실행을 위한 외부 라이브러리 저장 공간, 직접 수정하지 않고, 깃허브 올릴 때도 제외
• public: 브라우저가 직접 읽는 정적 파일들이 있음
  • index.html: 리액트 앱이 실행될 때, 이 파일의 특정 빈 공간(<div id="root"></div>)에 작성한 컴포넌트들이 끼어 맞춰져서 브라우저에 표시
• src: 실제 리액트 코드를 작성하는 폴더

src 폴더 내부

• App.js: 실제 화면에 그려지는 메인 컴포넌트
• App.css: App.js의 스타일을 정의하는 시트
• index.js: 리액트의 입구로 App.js에서 만든 컴포넌트를 가져와서 public/index.html에 연결해 주는 역할
• index.css: 전체 앱에 공통적으로 적용되는 스타일 파일
• logo.svg: 리액트 로고 이미지 파일
• App.test.js / setupTests.js: 코드가 잘 작동하는지 테스트하기 위한 파일들입니다. 초보 단계에서는 일단 무시해도 괜찮
• reportWebVitals.js: 앱의 성능(속도 등)을 측정할 때 사용하는 도구

설정 및 정보 파일 (The Metadata)

• package.json: 프로젝트의 이름, 버전, 그리고 어떤 라이브러리를 사용하는지 적혀 있는 명세서입니다. 나중에 새로운 라이브러리를 설치하면 여기에 기록됩니다.
• package-lock.json: 설치된 라이브러리들의 정확한 버전 정보를 담고 있어, 다른 사람과 협업할 때 환경을 똑같이 맞춰줍니다.
• .gitignore: Git(버전 관리)을 사용할 때, node_modules처럼 용량이 크거나 올릴 필요가 없는 파일을 제외하도록 설정하는 파일입니다.
• README.md: 이 프로젝트가 무엇인지 설명하는 문서입니다.

한 줄 요약

브라우저는 public/index.html을 열고, 그 안의 내용을 src/index.js가 src/App.js의 내용으로 채워 넣는다