diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a97b44d45..616262939 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: 웹 사이트에 React 추가하기 permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,28 +8,28 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +크건 작건 필요한 만큼의 React를 사용해보세요. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React는 처음부터 점진적으로 채택되도록 디자인되었습니다. 그러므로 **크건 작건 필요한 만큼의 React를 사용할 수 있습니다.** 아마 기존페이지에 단지 약간의 "인터랙티브 UI 요소"를 원한다면 React 컴포넌트는 아주 좋은 선택입니다. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +대부분의 웹사이트는 단일페이지 애플리케이션이 아니며 그럴 필요도 없습니다. 당신의 웹사이트 일부분에서 **빌드 도구 없이 몇줄의 코드로** React를 실습해 볼 수 있고, 이 부분을 서서히 확장하거나 약간에 동적 위젯을 포함할 수 있습니다. --- + +- [1분 만에 React 추가하기](#add-react-in-one-minute) +- [Optional: JSX로 React 활용해보기](#optional-try-react-with-jsx) (bundler 없이!) -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +## 1분 만에 React 추가하기 {#add-react-in-one-minute} -## Add React in One Minute {#add-react-in-one-minute} +이 섹션에서 어떻게 React 컴포넌트를 기존에 HTML 페이지에 추가할 수 있는지 볼 것입니다. 자신의 웹사이트나 빈 HTML 파일을 만들어 연습할 수 있습니다. -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +어떠한 설치나 복잡한 도구 없이 **인터넷에 연결되어 있고 몇분의 시간만 있다면 이번 섹션을 완수할 수 있습니다.** -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +Optional: [모든 예제 다운받기 (2KB 압축됨)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +### Step 1: HTML에 DOM 컨테이너 추가하기 {#step-1-add-a-dom-container-to-the-html} -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} - -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +먼저 수정할 HTML page를 열어주세요. 그리고 빈 `
` 태그를 보여주고 싶은 곳에 다음의 예시처럼 만듭니다. ```html{3} @@ -39,91 +39,91 @@ First, open the HTML page you want to edit. Add an empty `
` tag to mark the ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +`
` HTML 태그에 유니크한 `id` 속성을 부여해 줄 수 있습니다. 부여한 `id`는 JavaScript를 이용해 이 태그를 찾게 해주고 그 태그 안에서 React 컴포넌트를 보여줄 수 있게 해줍니다. ->Tip +>팁 > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +> ``태그 안 **어디든** `
`컨테이너를 배치할 수 있다면 페이지에 어디든 필요한 만큼 독립적인 DOM 컨테이너를 가질 수 있습니다. 그것은 보통 비어있고 -- React는 어떠한 내용도 DOM 컨테이너 안에 채울 수 있습니다. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Step 2: Script 추가하기{#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +처음 두 태그는 React를 불러오고 세 번째 태그는 컴포넌트 코드를 불러옵니다. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Step 3: React 컴포넌트 생성하기 {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +HTML page가 있는 곳에 `like_button.js` 파일을 생성합니다 -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +**[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 이 링크를 열어 내용을 복사한 후 방금 생성한 파일에 붙여넣기를 합니다. ->Tip +>팁 > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>이 코드는 React 컴포넌트를 `LikeButton`이라고 정의합니다. 아직 이해하지 못하더라도 걱정 마세요 -- 나중에 [자습서 시작하기](/tutorial/tutorial.html)와 [주요 개념 안내](/docs/hello-world.html) 코스에서 React의 기본 요소를 다룰 것입니다. 지금은 화면에 그대로 따라하기만 하세요 -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +**[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 다음에 `like_button.js`의 아랫부분에 두줄을 추가해주세요 ```js{3,4} -// ... the starter code you pasted ... +// ... the starter code 붙여넣기 ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +이 두줄의 코드는 HTML에 처음에 추가한 `
` 태그를 찾습니다. 그 뒤에 React 컴포넌트 안 있는 "Like" 버튼을 보여줍니다. -### That's It! {#thats-it} +### 이게 답니다! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +네 번째 스텝은 없습니다. **당신은 방금 웹사이트에 첫 번째 React 컴포넌트를 추가했습니다** -Check out the next sections for more tips on integrating React. +다음 섹션을 확인하세요. React의 더 많은 팁이 모여있습니다. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[전체 예제코드 보기](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[전체 예제 다운받기 (2KB 압축됨)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### 팁: 컴포넌트 재사용하기 {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +보통 HTML page 여러 곳에 React 컴포넌트를 보여줄 수 있습니다. 여기 이 예제는 약간의 데이터를 전달하는 "Like" 버튼을 세 번 보여주는 예시이다. -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[전체 예제코드 보기](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[전체 예제 다운받기 (2KB 압축됨)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) >Note > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>이 전략은 React를 사용하는 부분이 서로 독립될 때 대게 유용합니다. 이 전략 말고도 React 코드 안에 [컴포넌트 합성](/docs/components-and-props.html#composing-components)이라는 다른 쉬운 방법도 있습니다. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### 팁: 제품을 위한 JavaScript 압축 {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +웹사이트의 프로덕션 배포 전 JavaScript의 압축을 하지 않는다면 현저히 느린 페이지를 서비스하게 될 것입니다. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +이미 애플리케이션 스크립트의 압축을 했다면 **당신의 사이트는 프로덕션 준비가 됐습니다.** HTML을 확실히 배포했다면 `production.min.js`의 끝부분에서 해당 버전의 React를 불러옵니다. ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +코드에 압축을 위한 어떠한 단계도 거치지 않았다면 [이 방법을 실행해보세요](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Optional: JSX로 React 활용해보기 {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +네이티브 브라우저에서 이 예제는 진행되었습니다. 이 사실은 왜 JavaScript를 사용하고 React로 무언가를 보여주기 위해 JavaScript function을 부르는지에 대한 이유입니다. ```js const e = React.createElement; @@ -136,7 +136,7 @@ return e( ); ``` -However, React also offers an option to use [JSX](/docs/introducing-jsx.html) instead: +한편 React는 [JSX](/docs/introducing-jsx.html)를 사용하기 위한 옵션을 제공합니다. ```js // Display a "Like"