자습서: 초보자를 위한 Windows 기반 React

아티클
03/19/2024

React를 처음 사용하는 경우 이 가이드가 몇 가지 기본 사항을 시작하는 데 도움이 됩니다.

몇 가지 기본 용어 및 개념
Visual Studio Code에서 React 사용해 보기
API와 함께 React 사용해 보기

필수 조건

Windows에 React 설치
Linux용 Windows 하위 시스템에 React 설치
VS Code를 설치합니다. Windows 또는 WSL에서 React 사용 여부와 관계 없이 Windows에 VS Code를 설치하는 것이 좋습니다.

몇 가지 기본 용어 및 개념

React는 사용자 인터페이스를 빌드할 수 있는 JavaScript 라이브러리입니다.

오픈 소스입니다. 즉, 문제 또는 끌어오기 요청을 작성하여 기여할 수 있습니다. (예시 문서)
선언적입니다. 즉, 사용자가 원하는 코드를 작성하면 React가 선언된 코드를 받아들인 후 모든 JavaScript/DOM 단계를 수행하여 원하는 결과를 얻을 수 있습니다.
구성 요소를 기반으로 합니다. 즉, 사전 제작되고 재사용 가능한 독립 코드 모듈을 사용하여 애플리케이션이 생성됩니다. 이러한 코드 모듈은 자체 상태를 관리하고 React 프레임워크를 통해 통합 가능하므로 DOM 상태를 벗어난 채로 앱을 통해 데이터를 전달할 수 있습니다.
React 모토는 "한 번 배우고 어디서든 작성합니다."입니다. 이는 코드를 재사용하는 한편 다른 기술과 함께 React UI를 사용하는 방식에 대한 가정을 하지 않되 기존 코드를 다시 작성할 필요 없이 구성 요소를 다시 사용할 수 있도록 하기 위함입니다.
JSX는 HTML처럼 보이지만 실제로는 컴파일하거나 일반 JavaScript로 변환을 거쳐야 하는 JavaScript 파일이면서 React와 함께 사용하기 위해 작성된 JavaScript의 구문 확장입니다.
가상 DOM: DOM은 문서 개체 모델(Document Object Model)의 약자이며 앱의 UI를 나타냅니다. 앱 UI 상태가 변경될 때마다 DOM이 변경 내용을 나타내도록 업데이트됩니다. DOM이 자주 업데이트되면 성능이 저하됩니다. 가상 DOM은 DOM을 시각적으로 표현한 것에 불과합니다. 따라서 앱 상태가 변경되면 실제 DOM이 아닌 가상 DOM이 업데이트되어 성능 비용이 줄어듭니다. 간단한 복사본과 같은 DOM 개체의 표현입니다.
뷰: 브라우저에서 렌더링된 사용자에게 표시되는 내용입니다. React에서 뷰는 사용자 화면에 표시할 렌더링 요소 개념과 관련이 있습니다.
상태: 다양한 뷰에 저장된 데이터를 참조합니다. 상태는 일반적으로 사용자가 누구인지 그리고 사용자가 어떠한 작업을 수행하는지에 따라 달라집니다. 예를 들어 웹사이트에 로그인하면 사용자 이름(상태)과 함께 사용자 프로필(뷰)이 표시될 수 있습니다. 상태 데이터는 사용자에 따라 변경되지만 뷰는 동일하게 유지됩니다. 상태는 애플리케이션과의 대부분의 사용자 대화형 작업을 달성하는 데 사용됩니다.
구성 요소 속성: 부모 구성 요소가 일부 정보를 값 또는 데이터(개체, 배열 및 함수 포함)로 자식 구성 요소에 전달하는 방법입니다. Props는 읽기 전용이며 자식 구성 요소에서 업데이트할 수 없습니다.

Visual Studio Code에서 React 사용해 보기

React를 사용하는 애플리케이션을 만드는 방법에는 여러 가지가 있습니다(React의 개요에 나와 있는 예 참조). 이 자습서에서는 vite를 사용하여 작동하는 React 앱에 대한 설정을 빠른 전달 방법을 안내하여 실행 중인 것을 확인하고 아직 빌드 도구와 관련이 없는 코드를 실험하는 데 집중할 수 있도록 합니다.

Windows 또는 WSL에서 vite를 사용하여(위의 필수 구성 요소 참조) 새 프로젝트를 만듭니다.npm create vite@latest hello-world -- --template react
새 앱 cd hello-world의 폴더 내에 있도록 디렉터리를 변경합니다. 종속성을 npm install 설치한 다음 로컬 개발 서버를 시작합니다. npm run dev

새 React 헬로 월드 앱은 기본 웹 브라우저를 컴파일하고 열어 실행 중http://localhost:5173임을 표시합니다.
React 앱 실행을 중지하고(Ctrl+c 키) code .를 입력하여 VS Code에서 코드 파일을 엽니다.
src/App.jsx 파일을 찾고 다음을 읽는 헤더 섹션을 찾습니다.
```
<p>Edit <code>src/App.jsx</code> and save to test HMR</p>
```
다음 내용으로 변경합니다.
```
<p>Hello World! This is my first React app.</p>
```
터미널 창을 열고 로컬 개발 서버를 npm run dev 시작합니다. 또는 통합 VS Code 터미널(Ctrl + ')을 사용하고 여기에서 개발 서버를 시작할 수 있습니다.

React 앱을 개발하는 동안 로컬 개발 서버를 계속 실행하면 모든 변경 내용이 브라우저에서 http://localhost:5173 즉시 렌더링됩니다.

애플리케이션 파일 구조

intial 파일 구조는 다음과 같습니다.

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

우선 이러한 파일은 알아야 할 중요한 파일 및 폴더입니다.

index.html 은 Vite가 브라우저를 실행하기 위해 폴더의 src 코드를 삽입하는 파일입니다. React 애플리케이션의 제목을 변경하는 것 외에는 이 파일을 편집하면 안 됩니다.

이 src 폴더는 React 애플리케이션의 소스 코드가 있는 위치입니다. 애플리케이션을 빌드하는 데 필요한 사용자 지정 구성 요소, CSS 파일 및 기타 코드 파일을 만드는 위치입니다. 이러한 파일은 Vite의 빌드 도구에서 처리되어 구문 분석하고 빌드하여 최종 React 프로젝트를 만듭니다.

폴더에는 public 브라우저에 직접 제공될 모든 정적 파일이 포함됩니다. 이러한 파일은 Vite에서 처리되지 않습니다.

API와 함께 React 사용해 보기

React로 빌드하고 Visual Studio Code로 업데이트한 동일한 Hello World! 앱을 사용하여 일부 데이터를 표시하는 API 호출을 추가해 보겠습니다.

새로 시작해 줍니다. Vite에서 제공하는 거의 모든 상용구 코드를 제거하고 이전 단계의 코드만 유지합니다.

이제 App.jsx 파일은 다음과 같이 표시됩니다.
```
import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```
다음으로 API의 데이터를 저장할 수 있는 로컬 상태를 설정하겠습니다. 상태는 뷰에서 사용할 데이터를 저장할 수 있는 위치입니다.

로컬 상태를 추가하려면 먼저 구성 요소에 상태 변수를 추가할 수 있는 useState React Hook를 가져와야 합니다.

또한 로컬 상태를 초기화해야 합니다. 현재 useState 상태와 함수라는 두 값의 배열을 set 반환합니다. 현재 상태를 함수를 사용하여 나중에 API에서 사후 데이터로 채울 수 있는 빈 배열로 posts 초기화됨 setPosts 으로 호출합니다.

이제 App.jsx 파일은 다음과 같이 표시됩니다.
```
import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```

React 앱에서 사용할 데이터로 API를 호출하려면 .fetch JavaScript 메서드를 사용합니다. 호출하는 API는 JSON 형식으로 가짜 자리 표시자 데이터를 제공하는 테스트 및 프로토타입 생성용 무료 API인 JSONPlaceholder입니다.

useEffect React Hook를 사용하여 set 함수 를 posts 사용하여 상태를 업데이트합니다.

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

API가 posts 상태에 저장하는 데이터의 종류를 살펴보겠습니다. 다음은 가짜 JSON API 파일의 일부 내용입니다. "albumId", "id", "title", "url" 및 "thumbnailUrl" 범주를 사용하여 데이터가 나열된 형식을 확인할 수 있습니다.

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

API 데이터를 표시하려면 이제 렌더링된 return() 문 내에 약간의 JSX 코드를 추가해야 합니다. 키로 저장한 posts 개체의 데이터를 표시하기 위해 map() 메서드를 사용합니다. 각 게시물에는 "ID #"이 있는 헤더가 표시되고 JSON 데이터의 post.id 키 값 + post.title 키 값이 표시됩니다. 그 뒤에 thumbnailUrl 키 값을 기반으로 이미지를 표시하는 본문이 표시됩니다.
```
// rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;
```

추가 리소스

React 공식 문서에서는 React에 대한 모든 최신 정보를 제공합니다.
React 개발자 도구용 Microsoft Edge 추가 기능: React 개발에 도움이 되는 Microsoft Edge 개발 도구에 구성 요소 및 프로파일러라는 두 개의 탭을 추가합니다.
React 학습 경로에는 기본 사항을 시작하는 데 도움이 되는 온라인 과정 모듈이 포함되어 있습니다.

Share via

자습서: 초보자를 위한 Windows 기반 React

필수 조건

몇 가지 기본 용어 및 개념

Visual Studio Code에서 React 사용해 보기

애플리케이션 파일 구조

API와 함께 React 사용해 보기

추가 리소스

피드백

추가 리소스