React - 리액트 프로젝트 생성과 실행

리액트 프로젝트 만드는 방법은 여러가지가 있는데

그 중에서 이번에는 리액트 공식 사이트에서 소개하는 방식인

프로젝트 생성에 Vite라는 도구를 사용할 것이다.

---

우선 React_Study라는 이름의 파일 하나를 생성한다.

생성 후 VSCode 내에서 터미널을 열어주고 [Ctrl + `]

다음과 같이 두 가지 명령어를 입력해준다.

1. 프로젝트 생성 명령어

npm create vite@latest . -- --template react
npm install

위와 같이 설치할건지 물어보면 y를 눌러 다음으로 넘어고

그런다음 프로젝트 이름을 작성해준다. (본인 자유)

이어서 패키지 네임을 작성해주고

프레임워크를 React 로 설정해준다.

 

마지막으로 npm install을 입력해주면 설치가 진행된다.

설치가 끝나면 다음과 같이 프로젝트가 생성되며

자동으로 몇 가지 파일들이 새로 생긴 것을 확인할 수 있는데

이 상태에서 바로 프로젝트를 실행할 수 있다.

 

2. 프로젝트 실행 명령어

터미널에서 다음과 같이 명령어를 입력한다.

npm run dev

 

입력 하면 자동으로 위와 같이 브라우저가 열리게된다.

(열리지 않으면 터미널 창에 http://localhost:5173/ 를 주소창에 입력)

이제 직접 이 웹페이지를 수정해보자

 

src 폴더에 있는 App.js 파일을 열어준다.

그런데 여기서 의문점이 하나 있을 것이다.

분명 js파일이니까 자바스크립트 파일인데

막상 보면 HTML 코드가 있는 것을 확인할 수 있다.

 

리액트의 특징 중 하나이며 자바스크립트 코드 안에서 태그를 섞어 쓰는데

이런 문법을 JSX라고 부른다.

일단 간단하게 코드만 다음과 같이 수정해보자

return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>안녕하세요</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )

브라우저를 새로고침한 적이 없는데

코드로 추가한 인삿말이 바로 나타나는 것을 확인할 수 있다.

그 이유는 아까 터미널에서 npm run dev라는 명령어는

단순히 프로젝트만 실행하는 것이 아니라

어떤 파일을 수정하면 그걸 인식해서 바로 반영해 주는 기능도 있다.

그래서 이런걸 "개발 모드 실행" 했다고도 표현하니까 참고해 두자.

 

개발 모드를 실행했고 코드도 수정했으니 이제 개발 모드를 종료해보자

지금 위와 같이 나오는건 개발 모드가 계속 실행 중인 상태이기에

이걸 멈추기위해서는 터미널 창에서 Ctrl+C를 누르면 된다.

그러면 위와 같이 개발 모드가 종료된다.