웹사이트에 React 추가

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

React는 필요한 만큼만 사용하면 됩니다. 적게든 많게든 말이죠.

React는 처음부터 점진적으로 도입할 수 있게 설계되었습니다. 그래서 React는 필요한 만큼만 사용하면 됩니다. 아마 기존 페이지에 “상호작용”이라는 조미료를 첨가하기만 하고 싶을 수도 있습니다. 이럴 때 React 컴포넌트를 쓰면 좋습니다.

오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없습니다. 빌드 도구 없이 몇 줄의 코드만으로 웹사이트의 작은 부분에 먼저 React를 도입해보세요. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있습니다.

React 1분 내로 추가하기
선택사항: JSX로 React 해보기 (번들러가 필요없습니다!)

1분 내로 React 추가하기

이 글에서는 기존 페이지에 React를 추가하는 법에 대해서 다룹니다. 기존의 웹사이트에서 시도 해보셔도 좋고, 연습삼아 새로운 HTML 파일에서 시도해보셔도 좋습니다.

복잡한 도구를 쓰거나 뭔가를 따로 설치해야 할 필요도 없습니다. 약간의 시간과 함께 인터넷만 연결 되어 있다면 이 문서에서 다루는 것을 모두 해볼 수 있습니다.

선택사항: 예시의 전체 소스코드 다운로드 (2KB로 압축됨)

1단계: HTML 파일에 DOM 컨테이너 설치

먼저, 편집할 HTML 파일을 엽니다. 그 다음 비어있는 <div> 태그를 추가해줍니다. 이 태그가 바로 React를 통해 원하는 내용을 표시할 수 있는 위치가 됩니다. 다음과 같이 말이죠.

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

<div id="like_button_container"></div>
<!-- ... existing HTML ... -->

이 <div> 태그에 유일한 HTML 속성인 id를 부여해줍니다. 이를 통해 JavaScript가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있게됩니다.

팁

컨테이너 <div> 태그는 이 처럼 <body> 태그 안 쪽 어디서든 추가할 수 있습니다. 한 페이지에서도 독립적인 DOM 컨테이너를 원하는 만큼 추가할 수 있습니다. 보통 이 태그는 비어있습니다. React가 DOM 컨테이너 안에 내용을 추가해줍니다.

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

그 다음, <script> 태그 3개를 닫는 태그인 </body> 앞에 추가해줍니다.

  <!-- ... 다른 HTML ... -->

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <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>
  <!-- 만든 React 컴포넌트를 실행. -->
  <script src="like_button.js"></script>
</body>

처음 두 태그는 React를 실행시키고 3번 째 코드는 만든 컴포넌트를 실행시킵니다.

3단계: React 컴포넌트 만들기

like_button.js 라는 이름으로 HTML 페이지 옆에 새 파일을 만듭니다.

이 스타터 코드 를 열고 코드를 방금 만든 파일에 복사해줍니다.

팁

이 코드는 LikeButton 이라는 React 컴포넌트를 정의해줍니다. 지금 당장 이해가 안 되어도 걱정 마세요. React에 대한 개념을 쌓아 나가는 것은 나중에 자습서와 주요 개념 가이드에서 다룰 겁니다. 그러니 지금 당장은, 컴포넌트를 화면에 띄우는 데 집중해봅시다!

like_button.js의 맨 뒷 줄, 그러니까 아까 붙여넣은 스타터 코드 뒤에 다음 코드 세 줄을 추가해줍니다.

// ... 복사했던 스타터 코드 ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

이 세 줄의 코드는 첫 단계에서 HTML 페이지에 추가했던 <div> 태그를 찾아주고, 해당 태그에 React 앱을 만들어주고, 그 안에 “좋아요” 버튼 React 컴포넌트를 추가해줍니다.

다 끝났습니다!

다음 단계는 없습니다. 방금 웹사이트에 처음으로 React 컴포넌트를 추가했습니다.

다음 차례들에 React를 기존 프로젝트에 결합하는데 도움이 될만한 정보들이 더 있습니다.

예시 전체 소스 코드 보기

예시 전체 다운로드 (2KB로 압축됨)

팁: 컴포넌트 재사용

보통은 하나의 웹페이지에 여러 React 컴포넌트를 설치하게 됩니다. 다음 예시는 “좋아요” 버튼 3개를 만들고 그 컴포넌트들에 데이터를 넘겨주는 코드입니다.

예시 전체 소스 코드 보기

예시 전체 다운로드 (2KB로 압축됨)

주의

이 방법은 대개 페이지에서 React로 만들어진 부분들이 서로 격리 되어있을 때 유용합니다. React 코드 내에서는 컴포넌트 합성을 사용하는 편이 더 쉽습니다.

팁: 프로덕션을 위한 JavaScript의 압축

프로덕션을 위해 웹사이트를 배포하기 전에 JavaScript 파일을 압축하지 않는다면 웹사이트를 사용할 때 눈에 띄는 성능 저하가 일어날 겁니다.

애플리케이션 스크립트를 이미 압축했을 경우 배포된 HTML 파일이 production.min.js로 끝나는 React 파일을 확실히 실행하기만 하면 사이트는 프로덕션 준비가 완료된 겁니다.

<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 해보기

지금까지 다뤘던 예시들은 브라우저가 기본적으로 지원하는 요소들만을 사용했습니다. 때문에 React가 어떤 것을 표시할지 결정 해주는 JavaScript의 함수들을 사용했습니다.

const e = React.createElement;

// "좋아요" <button>을 표시
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

하지만, React에서는 JSX라는 또 다른 선택지가 있습니다.

//  "좋아요" <button>을 표시
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

위 두 코드들은 같은 기능을 수행합니다. JSX는 필수가 아닌 선택사항이지만 사람들은 UI 코드를 짤 때 JSX를 쓰는 것이 더 편리하다고 생각합니다. React와 다른 라이브러리들에서도 말이죠.

이 온라인 변화기를 통해서 JSX로 여러 가지 작업을 해볼 수 있습니다.

JSX 빠르게 시도해보기

기존 프로젝트에서 JSX 태그를 써보는 제일 빠른 방법은 이 <script> 태그를 집어넣는 겁니다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

이제 어떤 <script> 태그에서든 type="text/babel"성질을 추가하면 JSX를 사용할 수 있습니다. 이 JSX를 사용한 예시 HTML 파일로 여러 가지 작업들을 해보세요.

이런 식의 접근 방법은 공부 목적이나 간단한 데모 사이트를 만들기 위함이라면 괜찮습니다. 그러나, 이 방법은 사이트를 느리게 만들고 프로덕션에서는 맞지 않습니다. 한 단계 앞으로 나아갈 준비가 되었다면 새로 추가한 <script> 태그와 type="text/babel" 어트리뷰트를 제거해보세요. 다음 차례에서는 <script> 태그를 자동으로 변환시켜줄 JSX 전처리기를 만들 겁니다.

프로젝트에 JSX 추가하기

JSX를 프로젝트에 추가하는 데에는 복잡한 번들러나 개발 서버가 필요하지 않습니다. 핵심은, JSX를 추가하는 건 마치 CSS 전처리기를 추가하는 것과 같다는 겁니다. 오직 필요한 건 컴퓨터에 Node.js를 설치하는 겁니다.

터미널에서 프로젝트 파일에 접근하고 다음 두 명령어를 붙여넣기 하세요.

1단계: npm init -y 를 실행하세요. (실패한다면 여기서 해결할 수 있습니다.)
2단계: npm install babel-cli@6 babel-preset-react-app@3를 실행하세요.

팁

JSX 전처리기를 설치할 때 npm은 여기서만 쓰면 됩니다. 다른 단계에서는 npm이 쓰일 일이 없습니다. React와 애플리케이션 코드는 둘다 똑같이 <script> 태그로 유지할 수 있습니다.

축하합니다! 프로젝트에 프로덕션 준비가 된 JSX 설정을 끝마쳤습니다.

JSX 전처리기 실행하기

src 폴더를 만들고 다음 터미널 명령어를 실행하세요.

npx babel --watch src --out-dir . --presets react-app/prod

주의

npx는 오타가 아닙니다. — npm 5.2버전 이상에 내장된 패키지 실행 도구입니다.

”babel 패키지 설치가 잘못 수행되었습니다.”라는 에러 메시지를 보았다면, 그 전 단계들에서 몇 가지 놓쳤을 수도 있습니다. 동일한 폴더에서 이를 실행하고 다시 시도해보세요.

끝날 때 까지 기다릴 필요가 없습니다. 이 명령어는 자동화 된 JSX 감시기를 실행합니다.

JSX 스타터 코드를 통해 src/like_button.js라는 파일을 만들어주면, 감시기가 전처리 되어 브라우저와 호환되는 순수 JavaScript로 구성된 like_button.js를 생성합니다. JSX를 포함한 소스 파일을 편집하면 이 과정이 자동으로 다시 실행됩니다.

덤으로 이 감시기는 구형 브라우저와의 호환성 문제를 걱정할 필요 없이 클래스와 같은 모던 JavaScript 문법을 쓸 수 있게 해줍니다. 아까 사용했던 도구는 Babel이라고 부릅니다. Babel에 대한 자세한 정보는 공식 문서에서 볼 수 있습니다.

이런 빌드 도구들에 익숙해지고 더 많은 것을 해보고 싶어진다고 느끼기 시작한다면, 다음 문서 에서 가장 널리 쓰이고 접근성이 좋은 툴체인들을 소개하고 있으니 확인해보세요. 그렇지 않아도 괜찮다면, 이 스크립트 태그만으로도 충분합니다!

Is this page useful?Edit this page