diff options
| author | leegwae <leegwae@gmail.com> | 2021-09-23 02:41:52 +0900 |
|---|---|---|
| committer | hochan Lee <hochan049@gmail.com> | 2021-09-23 07:45:31 +0900 |
| commit | 088e435d52fbb018f289083578951b8299ecfbfa (patch) | |
| tree | 8c6d229c51469c33eb9e3df6cc4430d0a91454ec /files | |
| parent | afa51c2a30f63bf87511524ecc1a6001a0aba755 (diff) | |
| download | translated-content-088e435d52fbb018f289083578951b8299ecfbfa.tar.gz translated-content-088e435d52fbb018f289083578951b8299ecfbfa.tar.bz2 translated-content-088e435d52fbb018f289083578951b8299ecfbfa.zip | |
Translate React getting started
Diffstat (limited to 'files')
| -rw-r--r-- | files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md | 445 |
1 files changed, 243 insertions, 202 deletions
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index 403b6a6bb2..1d5720db28 100644 --- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -21,132 +21,144 @@ tags: <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">사전 요구 사항:</th> + <th scope="row">필요한 사전 지식:</th> <td> <p>코어 <a href="/ko/docs/Learn/HTML">HTML</a>, <a href="/ko/docs/Learn/CSS">CSS</a>, 및 <a href="/ko/docs/Learn/JavaScript">JavaScript</a> 언어에 익숙할 것. <a href="/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">터미널/커맨드라인</a>에 대한 지식.</p> - - <p>React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용합니다. HTML와 JavaScript에 익숙하다면 JSX를 배우는 것에 도움이 됩니다. 또한 애플리케이션에서 발생하는 버그가 JavaScript와 관련이 있는지 아니면 React의 구체적인 도메인과 관련이 있는지 수월하게 식별하는 것에 도움이 됩니다.</p> + <p>React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용합니다. HTML와 JavaScript에 익숙하다면 JSX를 배우는 것에 도움이 됩니다. 또한 애플리케이션에서 발생하는 버그가 JavaScript와 관련이 있는지 아니면 React의 구체적인 도메인과 관련이 있는지 수월하게 식별하는 것에 도움이 됩니다.</p> </td> </tr> <tr> - <th scope="row">목적:</th> + <th scope="row">목표:</th> <td>React 로컬 개발 환경을 구성하고 입문 앱을 만들어서 기본적인 동작 원리를 이해한다.</td> </tr> </tbody> </table> -<h2 id="Hello_React">Hello React</h2> +## Hello React -<p>공식 소개문구에 명시되어 있듯이, <a href="https://reactjs.org/">React</a>는 유저 인터페이스를 만드는데 사용되는 라이브러리입니다. React는 프레임워크가 아닐뿐더러, 웹 환경에만 국한된 도구도 아닙니다. 특정 환경에 렌더링되기 위해서는 다른 라이브러리들이 함께 사용되는데, 예를 들어 모바일 애플리케이션을 빌드하는데 사용되는 <a href="https://reactnative.dev/">React Native</a>, 가상현실 애플리케이션을 빌드하는데 사용되는 <a href="https://facebook.github.io/react-360/">React 360</a>가 있고, 그 외에도 다양한 환경에서 활용이 가능합니다.</p> +공식적인 태그라인에 따르면, [React](https://reactjs.org/)는 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 프레임워크가 아니고, 심지어 웹에만 사용할 수 있는 것도 아닙니다. React는 다른 라이브러리들과 함께 특정한 환경을 렌더링하는 데 사용됩니다. 가령, [React Native](https://reactnative.dev/)는 모바일 애플리케이션을 만드는 데 사용될 수 있고, [React 360](https://opensource.fb.com/)은 가상 현실 애플리케이션을 만드는 데 사용할 수 있습니다. 그 밖에도 많은 가능성이 존재합니다. -<p>To build for the web, developers use React in tandem with <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React and ReactDOM are often discussed in the same spaces as — and utilized to solve the same problems as — other true web development frameworks. When we refer to React as a "framework", we’re working with that colloquial understanding.</p> +웹을 만들기 위해서 사용자는 React를 [ReactDOM](https://reactjs.org/docs/react-dom.html)과 함께 사용해야 합니다. React와 ReactDOM은 다른 실제 웹 프레임워크들과 동일한 공간에서 논의되고 동일한 문제를 해결하기 위해 사용됩니다. React를 "프레임워크"로 지칭할 때는 통상적인 뜻으로 받아들이면 됩니다. -<p>React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.</p> +React의 주요한 목표는 개발자가 UI를 만들 때 일어나는 버그들을 최소화하는 것입니다. 이를 달성하기 위하여 React는 사용자 인터페이스의 일부를 나타내는 자족적이고, 논리적인 코드 조각인 컴포넌트들을 사용합니다. 이 컴포넌트들은 함께 전체 UI를 구성할 수 있고, React는 렌더링 작업의 대부분을 추상화하여 개발자가 UI 디자인에 집중할 수 있게 합니다. -<h2 id="Use_cases">Use cases</h2> +## Use cases -<p>Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface.</p> +이 모듈에서 다루고 있는 다른 프레임워크와 달리, React는 코드 컨벤션이나 파일 구조에 엄격한 규칙을 강제하지 않습니다. 이를 통해 팀은 그들에게 가장 적합한 컨벤션을 설정할 수 있고, 원하는 어떤 방식으로든 React를 쓸 수 있습니다. React는 하나의 버튼, 인터페이스의 일부분, 혹은 애플리케이션의 사용자 인터페이스 전체를 다룰 수 있습니다. -<p>While React <em>can</em> be used for <a href="https://reactjs.org/docs/add-react-to-a-website.html">small pieces of an interface</a>, it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.</p> +React는 [인터페이스의 일부분](https://reactjs.org/docs/add-react-to-a-website.html)을 위하여 사용할 수 있지만, jQuery와 같은 라이브러리 혹은 Vue와 같은 프레임워크처럼 애플리케이션 "안에 넣는" 것은 쉬운 일이 아닙니다. React는 애플리케이션 전체를 만들 때 사용하기가 보다 쉽습니다. -<p>In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learned.</p> +인터페이스를 JSX로 작성하는 것과 같이 React app의 많은 개발자-경험 혜택은 컴파일 과정이 필요합니다. Babel과 같은 컴파일러를 웹사이트에 추가하는 것은 코드를 느리게 만들기 때문에, 개발자들은 종종 빌드 과정에서 이러한 툴링을 설정합니다. React는 아주 무거운 툴링을 요구하지만 학습할 수 있습니다. -<p>This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own <a href="https://create-react-app.dev/">create-react-app</a> tool.</p> +이 기사는 애플리케이션의 사용자 인터페이스 전체를 렌더링하기 위해 React를 사용하는 예시에 초점을 맞출 겁니다. 이 예시는 Facebook의 [create-react-tool](https://create-react-app.dev/) 툴이 제공하는 툴링을 사용합니다. -<h2 id="How_does_React_use_JavaScript">How does React use JavaScript?</h2> +## React는 JavaScript를 어떻게 사용할까? -<p>React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:</p> +React는 많은 패턴에 모던 JavaScript의 특징을 이용합니다. JavaScript와 가장 다른 부분은 [JSX](https://reactjs.org/docs/introducing-jsx.html) 구문의 사용입니다. JSX는 JavaScript의 구문을 확장하여 HTML과 유사한 코드를 함께 사용할 수 있도록 합니다. 다음은 JSX 구문의 예시입니다. -<pre class="brush: js">const heading = <h1>Mozilla Developer Network</h1>;</pre> +```js +const heading = <h1>Mozilla Developer Network</h1>; +``` -<p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> tag in our app.</p> +이 heading 상수는 <b>JSX 표현식(JSX expression)</b> 으로 알려져 있습니다. React는 애플리케이션에 [`<h1>`](/en-US/docs/Web/HTML/Element/Heading_Elements) 태그를 렌더링할 때 이 표현식을 사용할 수 있습니다. -<p>Suppose we wanted to wrap our heading in a <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p> +[`<header>`](/en-US/docs/Web/HTML/Element/header) 태그로 heading을 감싸고 싶다고 가정해보겠습니다. JSX는 HTML에서 하던 것처럼 요소를 다른 요소 안에 중첩할 수 있습니다. -<pre class="brush: js">const header = ( - <header> - <h1>Mozilla Developer Network</h1> - </header> -);</pre> +```js +const header = ( + <header> + <h1>Mozilla Developer Network</h1> + </header> +); +``` <div class="notecard note"> -<p><strong>Note</strong>: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p> + <p><strong>참고</strong>: 위의 스니펫에 있는 괄호는 JSX에 유일하지도 않고, 여러분의 애플리케이션에 어떠한 영향을 주지도 않습니다. 이들은 여러 줄의 코드가 동일한 표현식의 부분이라는 것을 당신(과 컴퓨터)에게 알려줍니다. header 표현식은 다음과 같이도 쓸 수도 있습니다.</p> + + +```js +const header = <header> + <h1>Mozilla Developer Network</h1> +</header> +``` -<pre class="brush: js">const header = <header> - <h1>Mozilla Developer Network</h1> -</header></pre> +하지만, 표현식을 시작하는 [`<header>`](/en-US/docs/Web/HTML/Element/header) 태그가 클로징 태그와 상응하는 위치에 들여쓰기가 되어있지 않기 때문에 이 코드는 살짝 이상해 보입니다. -<p>However, this looks kind of awkward, because the <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag that starts the expression is not indented to the same position as its corresponding closing tag.</p> </div> -<p>Of course, your browser can't read JSX without help. When compiled (using a tool like <a href="https://babeljs.io/">Babel</a> or <a href="https://parceljs.org/">Parcel</a>), our header expression would look like this:</p> +브라우저는 도움 없이는 JSX를 읽을 수 없습니다. ([Babel](https://babeljs.io/)이나 [Parcel](https://parceljs.org/)과 같은 툴을 사용하여 컴파일할 때 header 표현식은 다음과 같이 보일 것입니다. -<pre class="brush: js">const header = React.createElement("header", null, +```js +const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") -);</pre> +); +``` -<p>It's <em>possible</em> to skip the compilation step and use <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes the JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.</p> +[`React.createElement()`](https://reactjs.org/docs/react-api.html#createelement) 를 사용하여 UI를 직접 작성해서 컴파일 단계를 생략할 수도 있습니다. 하지만, 이렇게 하면 JSX의 선언적인 장점을 잃을 것이고 코드는 읽기 더욱 어려워질 것입니다. 컴파일은 개발 과정에 있어 추가 과정이지만 React 커뮤니티의 많은 개발자는 JSX의 가독성이 그럴만한 가치가 있다고 생각합니다. 그리고 널리 사용되는 툴링은 JSX를 JavaScript로 컴파일하는 부분을 설정 과정의 일부로 만듭니다. 원하지 않는다면, 컴파일을 직접 구성하지 않아도 됩니다. -<p>Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance.</p> +JSX는 HTML과 JavaScript를 섞은 것이기 때문에 어떤 개발자들은 JSX를 직관적이라고 생각합니다. 다른 이들은 JSX의 혼합된 본성 때문에 혼란스럽다고 하기도 합니다. 하지만 한번 익숙해지면 사용자 인터페이스를 더 빠르고 직관적으로 만들 수 있고 다른 이들이 여러분의 코드베이스를 한눈에 더 잘 이해할 수 있게 합니다. -<p>To read more about JSX, check out the React team's <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a> article.</p> +JSX에 대해 더 알고 싶다면, React 팀의 [JSX in Depth](https://reactjs.org/docs/jsx-in-depth.html) 기사를 참고하세요. -<h2 id="Setting_up_your_first_React_app">Setting up your first React app</h2> +## 첫번째 React 앱 준비하기 -<p>There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.</p> +React를 사용하는 데에는 많은 방법이 있지만, 여기서는 커맨드-라인 인터페이스(command-line interface; CLI) 툴인 create-react-app을 사용할 겁니다. 이전에 말했듯이, 이 툴은 패키지를 설치하고 파일들을 생성하여 앞서 설명한 툴링들로 React 애플리케이션을 개발하는 과정을 신속히 처리합니다. -<p>It's possible to <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to a website without create-react-app</a> by copying some <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.</p> +[create-react-app 없이 웹 사이트에 React를 추가하는 것](https://reactjs.org/docs/add-react-to-a-website.html)은 HTML 파일에서 [`<script>`](/en-US/docs/Web/HTML/Element/script) 요소들을 복사해오는 것으로 가능하지만, create-react-app CLI는 React 애플리케이션을 만드는 가장 흔한 시작점입니다. 애플리케이션을 빌드하는 데에는 더 많은 시간이 걸리나 설정에 걸리는 시간은 줄일 수 있습니다. -<h3 id="Requirements">Requirements</h3> +### 요구되는 것들 -<p>In order to use create-react-app, you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).</p> +create-react-app을 사용하기 위해선 [Node.js](https://nodejs.org/en/)를 설치해야 합니다. LTS(오랜 기간 지원된; long-term support) 버전을 사용하는 것을 추천합니다. Node는 npm (the node package manager)와 npx (the node package runner)를 포함합니다. -<p>You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p> +Node 대신에 Yarn package manager를 사용할 수도 있습니다. 하지만 이 튜토리얼의 설정에서는 npm을 사용하는 것을 권고합니다. npm과 yarn에 대해 더 자세한 정보는 [Package management basics](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)를 참고하세요. -<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. <strong>Gitbash</strong> (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux</a></strong> (<strong>WSL</strong>) are both suitable. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p> +Windows를 이용하고 있다면 이 튜토리얼에서 언급되는 터미널 커맨드를 사용하기 위해, Unix/MacOS 터미널과 같은 기능을 제공하는 소프트웨어를 설치해야 합니다. **Gitbash** ([git for Windows toolset](https://gitforwindows.org/)의 일부) 혹은 **[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)** (**WSL**) 모두 적합합니다. 이 소프트웨어들이나 일반적인 터미널 커맨드에 대해서 더 자세히 알고 싶다면 [Command line carsh course](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)를 참고하세요. -<p>Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Microsoft Edge, Safari, or Chrome when working through these tutorials.</p> +그리고 React와 ReactDOM이 꽤 최신 브라우저들에서만 작동한다는 것을 명심하세요. IE9+는 몇몇 폴리필을 통하여 가능합니다. 튜토리얼에서는 Firefox, Microsoft Edge, Safari, 혹은 Chrome과 같은 최신 브라우저를 사용하기를 권장합니다. -<p>Also, see the following for more information:</p> +아래에서 더 자세한 정보를 찾아보세요. -<ul> - <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm" on nodejs.org</a></li> - <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx" on the npm blog</a></li> - <li><a href="https://create-react-app.dev/">The create-react-app documentation</a></li> -</ul> +- ["What is npm" on nodejs.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/) +- ["Introducing npx" on the npm blog](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) +- [The create-react-app documentation](https://create-react-app.dev/) -<h3 id="Initializing_your_app">Initializing your app</h3> +### 앱 초기화 -<p>create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you <code>cd</code> to the place you'd like your app to live on your hard drive, then run the following in your terminal:</p> +create-react-app은 애플리케이션의 이름을 인수로 가집니다. create-react-app은 이 이름을 새로운 디렉토리를 만들 때 사용한 후 그 안에 중요한 파일들을 생성합니다. `cd`로 하드 드라이브에 애플리케이션을 저장하고 싶은 장소까지 이동하고 다음 명령어를 터미널에 실행하세요. -<pre class="brush: bash">npx create-react-app moz-todo-react</pre> +```bash +npx create-react-app moz-todo-react +``` -<p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p> +이 명령어는 `moz-todo-react` 디렉토리를 만들고 다음과 같은 일들을 합니다. -<ul> - <li>Installs some npm packages essential to the functionality of the app.</li> - <li>Writes scripts for starting and serving the application.</li> - <li>Creates a structure of files and directories that define the basic app architecture.</li> - <li>Initializes the directory as a git repository, if you have git installed on your computer.</li> -</ul> +- 앱의 기능에 필수적인 npm 패키지들을 설치합니다. +- 애플리케이션을 시작하고 서비스하기 위한 스크립트를 작성합니다. +- 기본적인 앱 아키텍처를 정의하는 파일과 디렉토리의 구조를 만듭니다. +- 컴퓨터에 깃이 설치되어있다면, 디렉토리를 깃 레포지토리로 초기화합니다. <div class="notecard note"> -<p><strong>Note</strong>: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p> + <p><strong>참고</strong>: yarn package manager를 설치했다면, create-react-app은 그것을 npm 대신 기본으로 사용할 것입니다. 두 패키지 매니저가 모두 설치되어있고 NPM을 명시적으로 사용하길 원한다면, create-react-app을 실행할 때 플래그 <code>--use-npm</code>을 사용하면 됩니다.</p> + + +```bash +npx create-react-app moz-todo-react --use-npm +``` -<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre> </div> -<p>create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.</p> +create-react-app은 실행되는 동안 터미널에 메시지들을 출력할 것입니다. 이건 매우 정상적인 일입니다! 몇 분 정도 걸리니, 차 한 잔 만들기에 좋은 시간이에요. -<p>When the process is complete, <code>cd</code> into the <code>moz-todo-react</code> directory and run the command <code>npm start</code>. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:</p> +이 과정이 완료되면 `moz-todo-react` 디렉토리 안으로 `cd`를 실행한 후 `npm start` 커맨드를 실행하세요. create-react-app에 의해 설치된 스크립트는 localhost:3000에서 실행되고 있는 로컬 서버에서 실행을 시작할 것입니다. 새로운 브라우저 탭을 열고 앱을 열면, 브라우저는 다음과 같이 무언가를 표시하고 있을 겁니다. -<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="default-create-react-app.png" style="border-style: solid; border-width: 1px;"></p> + -<h3 id="Application_structure">Application structure</h3> +### 애플리케이션 구조 -<p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p> +create-react-app은 React 애플리케이션을 개발하기 위해 필요한 모든 것을 제공합니다. 초기 파일 구조는 다음과 같습니다: -<pre>moz-todo-react +``` +moz-todo-react ├── README.md ├── node_modules ├── package.json @@ -163,272 +175,301 @@ tags: ├── index.css ├── index.js ├── logo.svg - └── serviceWorker.js</pre> + └── serviceWorker.js +``` + +**`src`** 디렉토리는 애플리케이션의 소스 코드가 있는 곳으로서, 가장 많은 시간을 보낼 곳입니다. -<p>The <strong><code>src</code></strong> directory is where we'll spend most of our time, as it's where the source code for our application lives.</p> +**`public`** 디렉토리는 앱을 개발하는 동안 브라우저가 읽을 파일들을 가지고 있습니다; 이들 중 가장 중요한 것은 `index.html` 입니다. React는 코드를 이 html 파일에 주입하여 브라우저가 코드를 실행할 수 있게 합니다. create-react-app function에 도움이 되는 다른 마크업도 있기 때문에, 무엇을 하는지 모른다면 함부로 편집하지 않도록 주의하세요. 애플리케이션의 타이틀에 반영되도록 `index.html` 파일의 [`<title>`](/en-US/docs/Web/HTML/Element/title) 요소 안의 텍스트를 바꿔야 합니다. 정확한 페이지 타이틀은 접근성을 위해 중요하니까요! -<p>The <strong><code>public</code></strong> directory contains files that will be read by your browser while you're developing the app; the most important of these is <code>index.html</code>. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!</p> +`public` 디렉토리 또한 앱의 프로덕션 버전을 빌드하고 배포할 때 퍼블리시 됩니다. 이 튜토리얼에서는 배포에 대해 다루지 않지만, [Deploying our app](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) 튜토리얼에 기술된 것과 비슷한 해결책을 사용할 수 있을 겁니다. -<p>The <code>public</code> directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a> tutorial.</p> +`package.json` 파일은 Node.js/npm가 프로젝트를 조직하기 위해 사용하는, 프로젝트에 관련한 정보를 포함하고 있습니다. 이 파일은 React 애플리케이션에 유일하지 않은데요; create-react-app이 이 파일을 수정합니다. 튜토리얼을 완성하기 위해 이 파일을 이해할 필요는 전혀 없지만, 더 자세히 알고 싶다면 [What is the file `package.json`? on NodeJS.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/) 을 참고해주세요. [Package management basics](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) 에서도 다루고 있답니다. -<p>The <code>package.json</code> file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? on NodeJS.org</a>; we also talk about it in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> tutorial.</p> -<h2 id="Exploring_our_first_React_component_—_<App>">Exploring our first React component — <code><App/></code></h2> -<p>In React, a <strong>component</strong> is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.</p> +## 첫번째 React 컴포넌트 `</App>` 탐색하기 -<p>Let's open <code>src/App.js</code>, since our browser is prompting us to edit it. This file contains our first component, <code>App</code>, and a few other lines of code:</p> +React에서, <b>컴포넌트(component)</b>는 앱의 일부를 렌더링하는 재사용가능한 모듈입니다. 이 부분들은 클 수도 작을 수도 있지만, 대개 정확하게 정의됩니다; 이들은 단일하고 명확한 목적만을 위해 일합니다. -<pre class="brush: js">import React from 'react'; +`src/App.js`를 열어봅시다. 이 파일은 첫번째 컴포넌트 `App`과 몇 줄의 코드를 포함하고 있습니다. + +```js +import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" - > + > Learn React - </a> - </header> - </div> + </a> + </header> + </div> ); } -export default App;</pre> +export default App; +``` -<p>The <code>App.js</code> file consists of three main parts: some <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements at the top, the <code>App</code> component in the middle, and an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> statement at the bottom. Most React components follow this pattern.</p> +`App.js` 파일은 세 개의 부분으로 나눌 수 있습니다: 상단의 [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) 문들, 중앙의 `App` 컴포넌트, 그리고 하단의 [`export`](/en-US/docs/Web/JavaScript/Reference/Statements/export) 문들. 많은 React 컴포넌트들이 이 패턴을 따르고 있습니다. -<h3 id="Import_statements">Import statements</h3> +### Import 문 -<p>The <code>import</code> statements at the top of the file allow <code>App.js</code> to use code that has been defined elsewhere. Let's look at these statements more closely.</p> +상단의 `import` 문은 `App.js`가 다른 곳에 정의된 코드들을 사용할 수 있게 해줍니다. 이 명령문들을 자세히 들여다봅시다. -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import logo from './logo.svg'; -import './App.css';</pre> +import './App.css'; +``` + +첫 번째 명령문은 React 라이브러리를 불러옵니다. React가 우리가 작성한 JSX를 `React.createElement()`로 변환하기 때문에, 모든 React 컴포넌트들은 반드시 `React` 모듈을 불러와야 합니다. 이 단계를 건너뛰면 애플리케이션은 오류를 발생시킬 겁니다. + +두 번째 명령문은 `./logo.svg`로부터 로고를 불러옵니다. `./`를 경로의 시작에, `.svg` 익스텐션을 마지막에 사용한다는 것은 해당 파일이 로컬에 위치하며 JavaScript 파일이 아니라는 것을 뜻합니다. 실제로, `logo.svg` 파일은 소스 디렉토리 안에 있습니다. -<p>The first statement imports the React library itself. Because React turns the JSX we write into <code>React.createElement()</code>, all React components must import the <code>React</code> module. If you skip this step, your application will produce an error.</p> +`React` 모듈을 불러올 때는 경로나 익스텐션을 쓰지 않습니다. 이것들은 로컬 파일이 아니라, `package.json`의 의존성 목록에 포함되어 있습니다. 로컬과 이들의 구분을 꼭 주의하세요! -<p>The second statement imports a logo from <code>'./logo.svg'</code>. Note the use of <code>./</code> at the beginning of the path, and the <code>.svg</code> extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the <code>logo.svg</code> file lives in our source directory.</p> +세 번째 명령문은 `App` 컴포넌트에 관련된 CSS를 불러옵니다. 어떤 변수 이름이나 `from` 지시가 없다는 것을 주목해주세요. 이 특별한 import 구문은 JavaScript 모듈 구문이 아니라 웹팩(Webpack)으로부터 온 것입니다. 웹팩은 create-react-app이 우리의 모든 JavaScript 파일을 함께 번들하고 브라우저에 제공하기 위해 사용하는 도구입니다. -<p>We don't write a path or extension when importing the <code>React</code> module — this is not a local file; instead, it is listed as a dependency in our <code>package.json</code> file. Be careful of this distinction as you work through this lesson!</p> -<p>The third statement imports the CSS related to our App component. Note that there is no variable name and no <code>from</code> directive. This particular import syntax is not native to JavaScript module syntax — it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.</p> -<h3 id="The_App_component">The <code>App</code> component</h3> +### `App` 컴포넌트 -<p>After the imports, we have a function named <code>App</code>. Whereas most of the JavaScript community prefers camel-case names like <code>helloWorld</code>, React components use pascal-case variable names, like <code>HelloWorld</code>, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the <code>App</code> function to <code>app</code>, your browser would show you an error.</p> +`import`문들 이후, `App`이라고 이름 지어진 함수가 있습니다. 많은 JavaScript 커뮤니티가 `helloWorld`와 같은 카멜-케이스(camel-case) 이름을 선호하는 반면에, React 컴포넌트는 파스칼-케이스(pascal-case) 변수 이름을 사용합니다. 이는 JSX 요소가 React 컴포넌트이지, 정규 HTML 태그가 아니라는 것을 분명히 하기 위해서입니다. `App` 함수를 `app`으로 이름 짓는다면 브라우저는 오류를 발생시킬 겁니다. -<p>Let's look at <code>App</code> more closely.</p> +이제 `App`을 자세히 들여다보겠습니다. -<pre class="brush: js">function App() { +```js +function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" - > + > Learn React - </a> - </header> - </div> + </a> + </header> + </div> ); -}</pre> +} +``` -<p>The <code>App</code> function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.</p> +`App` 함수는 JSX 표현식을 반환합니다. 이 표현식은 브라우저가 궁극적으로 DOM에 렌더링할 것을 정의하고 있습니다. -<p>Some elements in the expression have attributes, which are written just like in HTML, following a pattern of <code>attribute="value"</code>. On line 3, the opening <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> tag has a <code>className</code> attribute. This is the same as the <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> attribute in HTML, but because JSX is JavaScript, we can't use the word <code>class</code> — it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.</p> +표현식의 어떤 요소들은 HTML에 쓰인 것과 같이 속성들을 가지고 `attribute="value"`와 같은 패턴을 따르고 있습니다. 세 번째 줄에서, 여는 [`div`](/en-US/docs/Web/HTML/Element/div) 태그는 `className` 속성을 가지고 있습니다. 이건 HTML의 [`class`](/en-US/docs/Web/HTML/Global_attributes/class) 속성과 같지만, JSX는 JavaScript이므로 `class` 라는 단어를 쓸 수 없습니다. 거꾸로 말하자면, JavaScript는 이미 이 단어를 특별한 목적을 위해 사용하고 있어 코드 안에서 사용한다면 문제를 발생시킬 것입니다. 같은 이유로 몇 개의 다른 HTML 속성들이 HTML에서 그랬던 것과는 다르게 JSX에서 쓰이고 있습니다. -<p>Take a moment to change the <code><a href="/en-US/docs/Web/HTML/Element/p"><p></a></code> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at <code>http://localhost:3000</code> in your browser. Now delete the <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> tag and save; the "Learn React" link will be gone.</p> +여섯 번째 줄의 [`<p>`](/en-US/docs/Web/HTML/Element/p) 태그 안의 텍스트를 "Hello, world!"로 바꾸고, 파일을 저장하세요. 브라우저에서 `http://localhost:3000`에 실행되고 있는 개발 서버에 즉시 변화가 렌더링 되는 것을 볼 수 있을 겁니다. 이제 [`<a>`](/en-US/docs/Web/HTML/Element/a) 태그를 지우고 저장해보세요. "Learn React" 링크가 사라질 겁니다. -<p>Your <code>App</code> component should now look like this:</p> +이제 `App` 컴포넌트는 아래와 같을 겁니다. -<pre class="brush: js">function App() { +```js +function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, World! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<h3 id="Export_statements">Export statements</h3> +### Export 문 -<p>At the very bottom of the <code>App.js</code> file, the statement <code>export default App</code> makes our <code>App</code> component available to other modules.</p> +`App.js` 파일의 최하단에 있는 `export default App`라는 명령문은 `App` 컴포넌트들을 다른 모듈에서 사용할 수 있게 합니다. -<h2 id="Interrogating_the_index">Interrogating the index</h2> +## Interrogating the index -<p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p> +`src/index.js`를 열어봅시다. `App` 컴포넌트가 사용된 곳이기 때문입니다. 이 파일은 앱의 진입점이고, 초기에는 이렇게 생겼습니다. -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( - <React.StrictMode> - <App /> - </React.StrictMode>, + <React.StrictMode> + <App /> + </React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister();</pre> +serviceWorker.unregister(); +``` -<p>As with <code>App.js</code>, the file starts by importing all the JS modules and other assets it needs to run. <code>src/index.css</code> holds global styles that are applied to our whole app. We can also see our <code>App</code> component imported here; it is made available for import thanks to the <code>export</code> statement at the bottom of <code>App.js</code>.</p> +`App.js`와 같이, 파일은 자신을 실행하기 위해 필요한 JS 모듈이나 다른 에셋들을 모두 임포트하며 시작합니다. `src/index.css`는 전체 앱에 적용되는 전역 스타일을 나타냅니다. `App` 컴포넌트가 임포트된 것도 볼 수 있는데요, 이것은 `App.js`의 하단에 있는 `export` 문 덕분에 가능한 것입니다. -<p>Line 7 calls React’s <code>ReactDOM.render()</code> function with two arguments:</p> +일곱 번째 줄은 React의 `ReactDOM.render()` 함수를 호출하고 있습니다. 두 개의 인수는 다음과 같습니다: -<ul> - <li>The component we want to render, <code><App /></code> in this case.</li> - <li>The DOM element inside which we want the component to be rendered, in this case the element with an ID of <code>root</code>. If you look inside <code>public/index.html</code>, you'll see that this is a <code><div></code> element just inside the <code><body></code>.</li> -</ul> +- 렌더링하기 원하는 컴포넌트. 여기서는 `<App />`입니다. +- 렌더링 되길 원하는 컴포넌트들이 포함된 DOM 요소. 여기서는 `root`라는 ID를 가진 요소입니다. `public/index.html`을 본다면, 이것이 `<body>` 내부에 있는 `<div>` 요소라는 것을 알 수 있습니다. -<p>All of this tells React that we want to render our React application with the <code>App</code> component as the root, or first component.</p> +이 모든 것이 React에게 우리가 루트로서, 혹은 첫 번째 컴포넌트로서 `App` 컴포넌트를 렌더링하길 원한다고 알려줍니다. <div class="notecard note"> -<p><strong>Note</strong>: In JSX, React components and HTML elements must have closing slashes. Writing just <code><App></code> or just <code><img></code> will cause an error.</p> + <p><strong>참고</strong>: JSX에서, React 컴포넌트와 HTML 요소는 반드시 닫는 태그가 있어야 합니다. <code><App></code> 혹은 <code><img></code>라고만 쓰는 것은 오류를 발생시킬 것입니다.</p> </div> -<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as most of the code below it.</p> +[Service workers](/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)는 앱 성능에 도움이 되고 오프라인에서 일할 수 있는 웹 애플리케이션의 기능을 제공하는 특별한 코드들이지만, 이 기사에서 다루는 범위는 아닙니다. 다섯 번째 줄과 코드 가장 아래에 있는 것은 지울 수 있습니다. -<p>Your final <code>index.js</code> file should look like this:</p> +최종적인 `index.js`는 다음과 같을 것입니다: -<pre class="brush: js">import React from 'react'; +```js +import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -ReactDOM.render(<App />, document.getElementById('root'));</pre> +ReactDOM.render(<App />, document.getElementById('root')); +``` -<h2 id="Variables_and_props">Variables and props</h2> +## 변수와 props -<p>Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).</p> +다음으로, React에서 컴포넌트들을 편집하고 데이터와 작업하는 것을 조금 더 편하게 해주는 JavaScript 스킬들을 사용해보겠습니다. 변수가 어떻게 JSX 안에서 사용되는지에 대해, 그리고 props에 대해 소개합니다. props는 컴포넌트에 데이터를 전달하는 방법이며, 전달된 후에는 변수를 통하여 접근할 수 있습니다. -<h3 id="Variables_in_JSX">Variables in JSX</h3> +### JSX 안의 변수들 -<p>Back in <code>App.js</code>, let’s focus on line 9:</p> +`App.js`으로 돌아가서, 아홉 번째 줄을 주목해봅시다: -<pre class="brush: js"><img src={logo} className="App-logo" alt="logo" /></pre> +```js +<img src={logo} className="App-logo" alt="logo" /> +``` -<p>Here, the <code><img /></code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p> +여기, `<img />` 태그의 `src` 속성값은 중괄호 안에 들어가 있습니다. 이것이 JSX가 변수를 인식하는 방법입니다. React는 `{logo}`를 보고 앱의 두번째 줄에 임포트된 로고를 가리키고 있음을 깨닫습니다. 그리고 로고 파일을 얻어와 그것을 렌더링합니다. -<p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p> +우리만의 변수를 만들어보도록 합시다. `App`의 반환문 이전에 `const subject = 'React';`를 추가합니다. `App` 컴포넌트는 이제 이런 모습을 가지게 됩니다: -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, World! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> +여덞 번째 줄의 단어 "world" 대신 우리가 만든 `subject` 변수를 사용해보도록 하겠습니다. 다음과 같습니다. -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> Hello, {subject}! - </p> - </header> - </div> + </p> + </header> + </div> ); -}</pre> +} +``` -<p>When you save, your browser should display "Hello, React!" instead of "Hello, world!"</p> +이제 저장하면 브라우저는 "Hello, world!" 대신에 "Hello, React!"를 표시할 것입니다. -<p>Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.</p> +변수는 편리하지만 방금 설정한 변수가 React의 기능들을 잘 활용한 것은 아닙니다. 이 변수는 나중에 props가 들어올 곳입니다. -<h3 id="Component_props">Component props</h3> +### 컴포넌트 props -<p>A <strong>prop</strong> is any data passed into a React component. React props are comparable to HTML attributes. Where HTML elements have attributes, React components have props. Props are written inside component calls, and use the same syntax as HTML attributes — <code>prop="value"</code>. In React, dataflow is unidirectional: props can only be passed from Parent components down to Child components; and props are read-only. </p> +<b>prop</b>는 React 컴포넌트에 전달되는 모든 데이터를 뜻합니다. React props는 HTML 속성과 비교할 수 있습니다. HTML 요소는 속성을 가지고 있고 React 컴포넌트는 props를 가지고 있습니다. props는 컴포넌트 호출 안에 쓰이며 `prop="value"`와 같이 HTML 속성과 동일한 구문을 씁니다. React에서, 데이터의 흐름은 단방향(unidirectional)입니다: props는 오직 부모 컴포넌트에서 자식 컴포넌트로 내려갑니다. 그리고 props는 오로지 읽기 전용입니다. -<p>Let’s open <code>index.js</code> and give our <code><App/></code> call its first prop.</p> +`index.js`를 열고 `<App />` 호출에 첫 번째 prop를 전달해봅시다. -<p>Add a prop of <code>subject</code> to the <code><App/></code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p> +`<App />` 컴포넌트 호출에 `subject`의 prop를 `Clarice`라는 값으로 추가해봅시다. 이제 코드는 다음과 같을 것입니다: -<pre class="brush: js">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> +```js +ReactDOM.render(<App subject="Clarice" />, document.getElementById('root')); +``` -<p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p> +`App.js`로 돌아가서, App 함수를 다시 들여다봅시다. 간결함을 위해 `return` 문으로 요약하면 다음과 같이 읽어볼 수 있습니다: -<pre class="brush: js">function App() { +```js +function App() { const subject = "React"; return ( // return statement ); -}</pre> +} +``` -<p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter, and delete the <code>subject</code> const. Just like any other function parameter, you can put <code>props</code> in a <code>console.log()</code> to print it to your browser's console. Go ahead and do that before the <code>return</code> statement, like so:</p> +`App` 함수의 시그네처(signature)를 바꾸어, `props`를 파라미터로 써 봅시다. 그리고 `subject` 상수를 지워 봅시다. 다른 함수 파라미터처럼, `props`를 브라우저 콘솔에 출력하도록 `console.log()`에 전달할 수 있습니다. `return` 문 이전에 다음과 같이 한 번 적어보세요. -<pre class="brush: js">function App(props) { +```js +function App(props) { console.log(props); return ( // return statement ); -}</pre> +} +``` -<p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> +파일을 저장하고 브라우저의 JavaScript 콘솔을 검사해봅시다. 다음과 같이 출력된 것을 볼 수 있을 겁니다: -<pre class="brush: js">Object { subject: "Clarice" }</pre> +```js +Object { subject: "Clarice" } +``` -<p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code><App /></code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p> +객체 속성 `subject`는 `<App />` 컴포넌트 호출에 추가한 `subject` prop에 상응합니다. 그리고 문자열 `Clarice`는 prop의 값에 상응합니다. React에서 컴포넌트 props는 항상 이러한 방식으로 객체에 포함됩니다. -<p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p> +이제 `subject`가 props 중 하나이니, `App.js`에서 사용해봅시다. `subject` 상수를 바꾸어 문자열 `React`를 정의하는 대신에 `props.subject`의 값을 읽도록 합시다. 원한다면 `console.log()`를 지워도 좋습니다. -<pre class="brush: js">function App(props) { +```js +function App(props) { const subject = props.subject; return ( // return statement ); -}</pre> +} +``` -<p>When you save, the app should now greet you with "Hello, Clarice!". If you return to <code>index.js</code>, edit the value of <code>subject</code>, and save, your text will change.</p> +저장한다면 앱은 "Hello, Clarice!"로 당신을 환영해줄 것입니다. `index.js`로 돌아가 `subject`의 값을 수정하고, 저장한다면 텍스트 또한 바뀔 것입니다. -<h2 id="Summary">Summary</h2> +## 요약 -<p>This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article, we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p> +이것으로 로컬에 React를 설치하는 방법과 입문 앱을 생성하는 방법, 그리고 기본적으로 어떻게 작동하는지를 포함하여 React에 대한 첫 탐색이 끝났습니다. 다음 기사에서는 첫 번째 애플리케이션으로 적절한 투두 리스트 만들기를 시작해 볼 것입니다. 하지만 그전에 우리가 배운 것들을 상기해봅시다. -<p>In React:</p> +React에서는: -<ul> - <li>Components can import modules they need and must export themselves at the bottom of their files.</li> - <li>Component functions are named with <code>PascalCase</code>.</li> - <li>You can read JSX variables by putting them between curly braces, like <code>{so}</code>.</li> - <li>Some JSX attributes are different than HTML attributes so that they don't conflict with JavaScript reserved words. For example, <code>class</code> in HTML translates to <code>className</code> in JSX. Note that multi-word attributes are camel-cased.</li> - <li>Props are written just like attributes inside component calls and are passed into components.</li> -</ul> +- 컴포넌트는 필요한 모듈을 불러오고 그들 자신을 파일의 하단에서 내보낼 수 있습니다. +- 컴포넌트 함수는 `PascalCase`로 명명합니다. +- JSX 변수는 `{so}`와 같이 중괄호 사이에 넣어 읽을 수 있습니다. +- JSX 속성은 HTML 속성과 다르기 때문에 JavaScript의 예약어와 충돌하지 않습니다. 예를 들어 HTML의 `class`는 JSX에서는 `className`입니다. 여러 개의 단어로 된 속성을 `camelCase`로 명명한다는 것을 기억해주세요. +- props는 컴포넌트 호출에 속성처럼 쓰이고, 컴포넌트로 전달됩니다. <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> |