[번역] React 설치

Hant·2023년 1월 24일

React Docs Beta

목록 보기

1/8

원문: React Docs Beta > Learn > Installation

리엑트는 점진적으로 적용할 수 있도록 설계됐습니다. 필요한 만큼 적당히 리엑트를 사용할 수 있습니다. 리엑트의 맛만 보고 싶거나, HTML에 상호작용을 추가하고 싶거나, 리앱트 기반의 복잡한 앱을 시작하고 싶다면, 이 섹션은 당신의 시작에 도움이 될 겁니다.

이 챕터에서

HTML에 React를 추가하는 방법을 배웁니다.

독립적인 React 프로젝트를 시작하는 방법을 배웁니다.

에디터를 설정하는 방법을 배웁니다.

리엑트 개발자 도구를 설치하는 방법을 배웁니다.

새로운 프로젝트 시작하기

새로운 프로젝트를 시작한다면, Toolcahin이나 Framework을 추천합니다. 이 도구들은 개발하기 용이한 환경을 제공하지만 로컬에 Node.js 설치가 필요합니다.

자신만의 모험을 선택하세요

React 라이브러리를 사용하면 UI 코드를 component라는 조각으로 분해하여 조합할 수 있습니다. React는 라우팅이나 데이터 관리에 관여하지 않습니다. 이는 리엑트 프로젝트를 시작하는 방법이 여러가지라는 것을 의미합니다.

HTML 파일과 스크립트 태그로 시작합니다. Node.js 설정이 핗요하지 않지만 제한된 기능만 사용할 수 있습니다.
최소한의 툴체인으로 시작하고, 프로젝트를 진행하면서 기능을 더 추가합니다. (학습하기 좋습니다!)
데이터 패칭과 라우팅과 같은 일반적인 기능이 내장된 opinionated framework로 시작합니다.

최소한의 툴 체인으로 시작하기

만약 React를 배우고 있다면, Create React App을 추천합니다. React를 사용해 보고 클라이언트 사이드 싱글 페이지 애플리케이션 구축하는 가장 유명한 방법입니다. React로 만들어졌지만 라우팅 혹은 데이터 패칭에 자유롭습니다.

첫번째로, Node.js를 설피하세요. 그런 다음 터미널을 열고 다음 명령어를 실행시켜 프로젝트를 생성하세요.

npx create-react-app my-app

이제 다음 명령어로 앱을 실행시킬 수 있습니다.

cd my-app
npm start

더 많은 정보를 원한다면, 공식 문서를 참고하세요.

Create React Apps는 백엔드 로직 혹은 데이터 베이스를 다루지 않으며, 모든 백엔드와 함께 사용할 수 있습니다. 프로젝트를 빌드하면, 정적 HTML, CSS, 그리고 JS가 들어있는 폴더가 생성됩니다. Create React App은 서버를 이용할 수 없기 떄문에, 최상의 성능을 제공하지 못합니다. 라우팅과 서버 사이드 로직과 같은 내장 기능과 더욱 빠른 로딩을 원한다면 Create React Apps 대신에 다른 Framework 사용을 추천합니다.

만능 Framework로 구축하기

프로덕션이 준비된 프로젝트를 시작하고 싶다면, Next.js는 시작하는 것이 좋습니다. Next.js는 React 기반의 정적 혹은 서버에서 랜더되는 애플리케이션을 만든는 인기있고 가벼운 Framework입니다. 라우팅, 스타일링, 그리고 서버 사이드 렌더링과 같은 기능이 미리 패키징 되어있어 프로젝트를 빠르게 시작하고 실행할 수 있습니다.

Next.js Foundations React와 Next.js로 빌드하는 방법을 훌륭하게 설명해줍니다.

커스텀 툴 체인

자시만의 툴체인을 만들고 설정하는 것을 선호할 수 있습니다. 툴 체인은 구성은 일반적으로 다음과 같습니다.

패키지 메니저(package manager)를 사용하면 서드 파티 패키지를 설치, 업데이트, 그리고 관리할 수 있습니다. 인기있는 패키지 매니저로 npm(Node.js 내장), Yarn, pnpm이 있습니다.
컴파일러(compiler)를 사용하면 최신 언어 기능과 JSX 혹은 타입 선언 같은 추가적인 문법을 브라우저에서 사용할 수 있습니다. 인기있는 컴파일러로 Babel, TypeScript, swc가 있습니다.
번들러(bundler)를 사용하면 모듈식 코드를 작성하고 작은 패키지로 번들링하여 로드 시간을 최적화 할 수 있습니다. 인기있는 번들러로 webpack, Parcel, [esbuild](https://esbuild.github.io/, swc가 있습니다.
minifier를 사용하면 코드를 더욱 압축시켜 빠르게 로드할 수 있습니다. 인기있는 minifier로 Terser, swc가 있습니다.
서버(server)는 서버 요청을 처리하여 컴포넌트들을 HTML로 렌더할 수 있습니다. 인기있는 서버로 Express가 있습니다.
linter는 코드의 일반적인 실수를 체크합니다. 인기있는 linter로 ESLint가 있습니다.
테스트 러너(test runner)를 사용하면 코드를 테스트할 수 있습니다. 인기있는 테스트 러너로 Jest가 있습니다.

나만의 Javascript 툴 체인을 처음부터 설정하고 싶다먄, Create React Appd의 일부 기능을 다시 만드는 문서를 참고하세요. Framwork는 일반적으로 라우팅과 데이터 패칭 방법 또한 제공합니다. 거대한 프로젝트의 경우, Nx 혹은 Turborepo로 하나의 레파지토리에 다수의 패키지를 관리하고 싶을 수 있습니다.

웹 사이트에 React 추가하기

웹 사이트를 전부 React로 구축할 필요는 없습니다. HTML에 React를 추가하는 것은 설치가 필요 없고, 1분정도 걸리며, 인터랙티브 컴포넌트를 바로 작성할 수 있습니다.

React 1분 안에 추가하기

React는 처음부터 점직적인 적용을 위해 설계됐습니다. 대부분의 웹 사이트들은 전체가 React로 구축되지 않았습니다(그럴 필요가 없습니다). 이 가이드는 기존의 HTMl에 "상호 작용를 끼얹기(sprinkles of interactivity)"를 추가하는지 보여줍니다.

자신의 웹사이트 혹은 빈 HTML 파일에 시도해 보세요. 인터넷 연결과 Notepad나 VSCode 같은 텍스트 에디터만 있으면 됩니다.

Step 1: 루트 HTML 태그 추가하기

첫번째로, 수정하고자 하는 HTML 페이지를 여세요. React로 출력할 지점을 표시하기 위해 빈 <div> 태그를 추가하세요. 이 <div>의 속성 값으로 유니크한 아이드를 부여하세요. 예를 들어:

<!-- ... existing HTML ... -->

<div id="like-button-root"></div>

<!-- ... existing HTML ... -->

이 <div>는 React 트리가 시작될 위치이므로 "루트(root)"라 불립니다. 루트 HTML 태그는 <body> 태그 내부 어디에든 위치할 수 있습니다. React가 React Component로 내부 내용을 바꿀 예정이므로 내부는 비워두세요.

루트 HTML 태그는 한 페이지에 원하는 만큼 넣을 수 있습니다.

Step 2: 스크립트 태그 추가하기

HTML 페이지 내부의 </body>가 닫히는 바로 직후에 다음 파일들을 위해 3개의 <script> 태그를 추가합니다.

react.development.js를 사용하여 React 컴포넌트를 정의할 수 있습니다.
react-dom.development.js를 사용하여 React가 DOM에 Element를 렌더할 수 있습니다.
like-button.js는 다음 스탭에서 컴포넌트를 작성할 곳 입니다.

HTML은 이제 다음과 같이 끝납니다.

    <!-- end of the page -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

주의사항

실제 웹 사이트를 배포하기 전에 development.js를 production.min.js 변경해야 합니다! React의 개발환경 빌드는 더욱 구체적인 에러 메시지를 제공하지만, 웹 사이트를 매우 느리게 만듭니다.

Step 3: Ract 컴포넌트 생성하기

HTML 페이지 옆에 like-button.js 파일을 생성하고, 밑에 코드 조각을 추가한 다음 저장세요. 이 코드는 LikeButton React 컴포넌트를 정의합니다.

"use strict";

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return "You liked this!";
  }

  return React.createElement(
    "button",
    {
      onClick: () => setLiked(true),
    },
    "Like"
  );
}

Step 4: 페이지에 React 컴포넌트를 추가하기

마지막으로 like-button.js 하단에 세 줄을 추가합니다. 이 세줄의 코드는 첫번째 스탭에서 추가했던 <div>를 찾고, React root를 생성하여, "Like" 버튼 React 컴포넌트를 내부에 출력합니다.

const rootNode = document.getElementById("like-button-root");
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

축하합니다! 방금 첫 React 컴포넌트를 웹 사이트에 랜더했습니다!

컴포넌트를 재사용할 수 있습니다!

React 컴포넌트를 같은 HTML 페이지의 여러 장소에 출력하고 싶을 수 있습니다. 페이지의 React 기반 영역이 서로 분리돼 있을 경우 매우 유용합니다. 복수개의 루트 태그를 HTML에 넣고 각각의 내부에 React 컴포넌트를 ReactDOM.createRoot()로 랜더하면 됩니다. 예를 들어:

index.html에 추가적인 컨테이너로 <div id="another-root"></div>를 추가합니다.
like-button.js 마지막에 3줄을 너 추가합니다.

const anotherRootNode = document.getElementById("another-root");
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

많은 곳에 같은 컴포넌트를 랜더할 필요가 있다면, 각 루트에 id 대신에 class를 사용해 CSS를 할당할 수 있으며, 모든 루트를 한번에 찾을 수 있습니다. 여기 세개의 "Like" 버튼을 출력하고 각각에 데이터를 넘겨주는 예시가 있습니다.

Step 5: 프로덕션을 위해 Javascript Minify 하기

Minify를 하지 않으면 Javascript는 유저의 페이지 로드 타임을 현저하게 느리게 만듭니다. 프로덕션을 위해 웹 사이트를 배포하기 전에, script를 작게 만들 필요가 있습니다.

script를 작게 만드는 단계가 없는 경우, 이를 진행하는 한가지 방법이 있슴니다.
이미 애플리케이션 스크립트를 작게 만들었고, 배포된 HTML에서 로드하는 React 버전이 production.min.js 끝난는 것을 확인했다면 웹 사이트가 프로던셕에 나갈 준비는 끝났습니다.

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

JSX로 React 시도하기

위의 예시들은 브라우저에서 제한적으로 제공하는 기능에 의존합니다. 이것이 like-button.js이 React에 무엇이 출력될지 요청하는 과정에서 Javascript 함수 호출을 사용한 이유입니다.

return React.createElement("button", { onClick: () => setLiked(true) }, "Like");

그러나, React는 HTML과 유사한 Javascript 문법인 [JSX]를 사용하는 옵션 또한 제공합니다.

return <button onClick={() => setLiked(true)}>Like</button>;

위 두개의 코드 조각은 서로 같슴니다. JSX는 Javascript에서 마크업을 묘사하는데 인기있는 문법입니다. 많은 사람들이 React 혹은 다른 라이브러리들을 사용하여 UI 코드를 작성할 떄 친숙하고 유용하다고 느낍니다.

이 온라인 컨버터를 사용하면 HTML 마크업을 JSX 변환할 수 있습니다.

JSX 사용해보기

JSX 사용해보기 가장 빠른 방법은 Babel 컴파일러를 <script> 태그로 페이지에 추가하는 겁니다. like-button.js 이전에 삽입하고, type="text/babel" 속성을 like-button.js의 <script> 태그에 추가합니다.

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="like-button.js" type="text/babel"></script>
</body>

이제 like-button.js를 열고 다음 코드를

return React.createElement(
  "button",
  {
    onClick: () => setLiked(true),
  },
  "Like"
);

같은 기능의 JSX 코드로 변경합니다.

return <button onClick={() => setLiked(true)}>Like</button>;

처음에는 JS와 마크업을 섞는 것이 다소 이상하게 느껴질 수 있지만, 점점 익숙해질 겁니다. 여기 다운받아 가지고 놀 수 있는 JSX로 된 예시 HTML파일이 있습니다.

주의사항

Babel <script> 컴파일러는 학습하거나 간단한 데모를 만들기에는 좋습니다. 그러나, 웹 사이트를 느리게 만들고 프로덕션과는 맞지 않습니다. 출시할 준비가 되었다면, 이 단계에서 추가한 Babel <script> 태그와 type="text/babel" 속성을 지워야 합니다. 대신에, 다음 섹션에서 JSX 혹은 JS 기반의 모든 <script>를 변경하는 JSX 전처리기 설정합니다.

프로젝트에 JSX 추가하기

프로젝트에 JSX를 추가할 때 번들러와 복잡한 개발 서버와 같은 도구들은 필요하지 않습니다. JSX 전처리기 추가는 CSS 전처리기를 추가하는 것과 비슷합니다.

터미널에서 프로젝트 폴더로 돌아가서, 다음 두가지 명령어를 붙여넣습니다. (Node.js가 설치돼있는지 홗인하세요!)

npm init -y (만약 실패한다면, 여기 수정하는 방법이 있습니다)
npm install babel-cli@6 babel-preset-react-app@3

JSX 전처리기를 설치할 떄는 npm만 있으면 됩니다. 다른건 필요 없습니다. Reactd와 애플리케이션 코드 변함없이 <script>를 유지할 수 있습니다.

축하합니다! 방금 프로젝트에 프로젝트 준비를 위한 JSX 설정을 추가했습니다.

JSX 전처리기 실행하기

JSX를 포함한 파일을 저장할 때 마다 변환이 재실행 되어 JSX 파일을 브라우저가 이해할 수 있는 평벙함 Javascript로 새롭게 바꿀 수 있도록 JSX를 전처리할 수 있습니다. 설정하는 방법은 다음과 같습니다.

src 폴더를 만듭니다.
터미널에 다음 명령어를 입력합니다: npx babel --watch src --out-dir . --presets react-app/prod (완료될 때 까지 기다리지 마세요! 이 명령어는 src 내부의 JSX를 자동으로 감시하고 수정하기 시작합니다.)
JSX로 작성된 like-button.js(이렇게 작성돼야 합니다!)를 새 src 폴더로 이동합니다.

Watcher는 브라우저에 적합한 일반 Javascript로 전처리된 like-button.js를 만들겁니다.

주의사항

"You have mistakenly installed the babel package"과 같은 에러 메시지가 보인다면, 이전 스탭을 완료하지 않았을 겁니다. 동일한 폴더에서 수행후, 다시 시도하시기 바랍니다.

사용한 툴의 이름은 Babel이며, 이 문서에서 더 자세히 배울 수 있습니다. JSX를 추가하면, 오래된 브라우저에서도 JavaScript 최신 문법 기능을 걱정 없이 사용할 수 있습니다.

Hant

끊임없이 도전하는 프론트 개발자가 되고자 노력합니다.

다음 포스트

[번역] React 설치

React Docs Beta

새로운 프로젝트 시작하기

자신만의 모험을 선택하세요

최소한의 툴 체인으로 시작하기

인기있는 대안

만능 Framework로 구축하기

인기있는 대안

커스텀 툴 체인

웹 사이트에 React 추가하기

React 1분 안에 추가하기

Step 1: 루트 HTML 태그 추가하기

Step 2: 스크립트 태그 추가하기

주의사항

Step 3: Ract 컴포넌트 생성하기

Step 4: 페이지에 React 컴포넌트를 추가하기

컴포넌트를 재사용할 수 있습니다!

Step 5: 프로덕션을 위해 Javascript Minify 하기

JSX로 React 시도하기

JSX 사용해보기

주의사항

프로젝트에 JSX 추가하기

JSX 전처리기 실행하기

주의사항

[번역] React에서 사고하기

0개의 댓글