From 088e435d52fbb018f289083578951b8299ecfbfa Mon Sep 17 00:00:00 2001 From: leegwae Date: Thu, 23 Sep 2021 02:41:52 +0900 Subject: Translate React getting started --- .../react_getting_started/index.md | 445 +++++++++++---------- 1 file changed, 243 insertions(+), 202 deletions(-) (limited to 'files') 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: - + - +
사전 요구 사항:필요한 사전 지식:

코어 HTML, CSS, 및 JavaScript 언어에 익숙할 것. 터미널/커맨드라인에 대한 지식.

- -

React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용합니다. HTML와 JavaScript에 익숙하다면 JSX를 배우는 것에 도움이 됩니다. 또한 애플리케이션에서 발생하는 버그가 JavaScript와 관련이 있는지 아니면 React의 구체적인 도메인과 관련이 있는지 수월하게 식별하는 것에 도움이 됩니다.

+

React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용합니다. HTML와 JavaScript에 익숙하다면 JSX를 배우는 것에 도움이 됩니다. 또한 애플리케이션에서 발생하는 버그가 JavaScript와 관련이 있는지 아니면 React의 구체적인 도메인과 관련이 있는지 수월하게 식별하는 것에 도움이 됩니다.
목적:목표: React 로컬 개발 환경을 구성하고 입문 앱을 만들어서 기본적인 동작 원리를 이해한다.
-

Hello React

+## Hello React -

공식 소개문구에 명시되어 있듯이, React는 유저 인터페이스를 만드는데 사용되는 라이브러리입니다. React는 프레임워크가 아닐뿐더러, 웹 환경에만 국한된 도구도 아닙니다. 특정 환경에 렌더링되기 위해서는 다른 라이브러리들이 함께 사용되는데, 예를 들어 모바일 애플리케이션을 빌드하는데 사용되는 React Native, 가상현실 애플리케이션을 빌드하는데 사용되는 React 360가 있고, 그 외에도 다양한 환경에서 활용이 가능합니다.

+공식적인 태그라인에 따르면, [React](https://reactjs.org/)는 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 프레임워크가 아니고, 심지어 웹에만 사용할 수 있는 것도 아닙니다. React는 다른 라이브러리들과 함께 특정한 환경을 렌더링하는 데 사용됩니다. 가령, [React Native](https://reactnative.dev/)는 모바일 애플리케이션을 만드는 데 사용될 수 있고, [React 360](https://opensource.fb.com/)은 가상 현실 애플리케이션을 만드는 데 사용할 수 있습니다. 그 밖에도 많은 가능성이 존재합니다. -

To build for the web, developers use React in tandem with ReactDOM. 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.

+웹을 만들기 위해서 사용자는 React를 [ReactDOM](https://reactjs.org/docs/react-dom.html)과 함께 사용해야 합니다. React와 ReactDOM은 다른 실제 웹 프레임워크들과 동일한 공간에서 논의되고 동일한 문제를 해결하기 위해 사용됩니다. React를 "프레임워크"로 지칭할 때는 통상적인 뜻으로 받아들이면 됩니다. -

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.

+React의 주요한 목표는 개발자가 UI를 만들 때 일어나는 버그들을 최소화하는 것입니다. 이를 달성하기 위하여 React는 사용자 인터페이스의 일부를 나타내는 자족적이고, 논리적인 코드 조각인 컴포넌트들을 사용합니다. 이 컴포넌트들은 함께 전체 UI를 구성할 수 있고, React는 렌더링 작업의 대부분을 추상화하여 개발자가 UI 디자인에 집중할 수 있게 합니다. -

Use cases

+## Use cases -

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.

+이 모듈에서 다루고 있는 다른 프레임워크와 달리, React는 코드 컨벤션이나 파일 구조에 엄격한 규칙을 강제하지 않습니다. 이를 통해 팀은 그들에게 가장 적합한 컨벤션을 설정할 수 있고, 원하는 어떤 방식으로든 React를 쓸 수 있습니다. React는 하나의 버튼, 인터페이스의 일부분, 혹은 애플리케이션의 사용자 인터페이스 전체를 다룰 수 있습니다. -

While React can be used for small pieces of an interface, 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.

+React는 [인터페이스의 일부분](https://reactjs.org/docs/add-react-to-a-website.html)을 위하여 사용할 수 있지만, jQuery와 같은 라이브러리 혹은 Vue와 같은 프레임워크처럼 애플리케이션 "안에 넣는" 것은 쉬운 일이 아닙니다. React는 애플리케이션 전체를 만들 때 사용하기가 보다 쉽습니다. -

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.

+인터페이스를 JSX로 작성하는 것과 같이 React app의 많은 개발자-경험 혜택은 컴파일 과정이 필요합니다. Babel과 같은 컴파일러를 웹사이트에 추가하는 것은 코드를 느리게 만들기 때문에, 개발자들은 종종 빌드 과정에서 이러한 툴링을 설정합니다. React는 아주 무거운 툴링을 요구하지만 학습할 수 있습니다. -

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 create-react-app tool.

+이 기사는 애플리케이션의 사용자 인터페이스 전체를 렌더링하기 위해 React를 사용하는 예시에 초점을 맞출 겁니다. 이 예시는 Facebook의 [create-react-tool](https://create-react-app.dev/) 툴이 제공하는 툴링을 사용합니다. -

How does React use JavaScript?

+## React는 JavaScript를 어떻게 사용할까? -

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

+React는 많은 패턴에 모던 JavaScript의 특징을 이용합니다. JavaScript와 가장 다른 부분은 [JSX](https://reactjs.org/docs/introducing-jsx.html) 구문의 사용입니다. JSX는 JavaScript의 구문을 확장하여 HTML과 유사한 코드를 함께 사용할 수 있도록 합니다. 다음은 JSX 구문의 예시입니다. -
const heading = <h1>Mozilla Developer Network</h1>;
+```js +const heading =

Mozilla Developer Network

; +``` -

This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.

+이 heading 상수는 JSX 표현식(JSX expression) 으로 알려져 있습니다. React는 애플리케이션에 [`

`](/en-US/docs/Web/HTML/Element/Heading_Elements) 태그를 렌더링할 때 이 표현식을 사용할 수 있습니다. -

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

+[`
`](/en-US/docs/Web/HTML/Element/header) 태그로 heading을 감싸고 싶다고 가정해보겠습니다. JSX는 HTML에서 하던 것처럼 요소를 다른 요소 안에 중첩할 수 있습니다. -
const header = (
-  <header>
-    <h1>Mozilla Developer Network</h1>
-  </header>
-);
+```js +const header = ( +
+

Mozilla Developer Network

+
+); +```
-

Note: 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:

+

참고: 위의 스니펫에 있는 괄호는 JSX에 유일하지도 않고, 여러분의 애플리케이션에 어떠한 영향을 주지도 않습니다. 이들은 여러 줄의 코드가 동일한 표현식의 부분이라는 것을 당신(과 컴퓨터)에게 알려줍니다. header 표현식은 다음과 같이도 쓸 수도 있습니다.

+ + +```js +const header =
+

Mozilla Developer Network

+
+``` -
const header = <header>
-    <h1>Mozilla Developer Network</h1>
-</header>
+하지만, 표현식을 시작하는 [`
`](/en-US/docs/Web/HTML/Element/header) 태그가 클로징 태그와 상응하는 위치에 들여쓰기가 되어있지 않기 때문에 이 코드는 살짝 이상해 보입니다. -

However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.

-

Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

+브라우저는 도움 없이는 JSX를 읽을 수 없습니다. ([Babel](https://babeljs.io/)이나 [Parcel](https://parceljs.org/)과 같은 툴을 사용하여 컴파일할 때 header 표현식은 다음과 같이 보일 것입니다. -
const header = React.createElement("header", null,
+```js
+const header = React.createElement("header", null,
   React.createElement("h1", null, "Mozilla Developer Network")
-);
+); +``` -

It's possible to skip the compilation step and use React.createElement() 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.

+[`React.createElement()`](https://reactjs.org/docs/react-api.html#createelement) 를 사용하여 UI를 직접 작성해서 컴파일 단계를 생략할 수도 있습니다. 하지만, 이렇게 하면 JSX의 선언적인 장점을 잃을 것이고 코드는 읽기 더욱 어려워질 것입니다. 컴파일은 개발 과정에 있어 추가 과정이지만 React 커뮤니티의 많은 개발자는 JSX의 가독성이 그럴만한 가치가 있다고 생각합니다. 그리고 널리 사용되는 툴링은 JSX를 JavaScript로 컴파일하는 부분을 설정 과정의 일부로 만듭니다. 원하지 않는다면, 컴파일을 직접 구성하지 않아도 됩니다. -

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.

+JSX는 HTML과 JavaScript를 섞은 것이기 때문에 어떤 개발자들은 JSX를 직관적이라고 생각합니다. 다른 이들은 JSX의 혼합된 본성 때문에 혼란스럽다고 하기도 합니다. 하지만 한번 익숙해지면 사용자 인터페이스를 더 빠르고 직관적으로 만들 수 있고 다른 이들이 여러분의 코드베이스를 한눈에 더 잘 이해할 수 있게 합니다. -

To read more about JSX, check out the React team's JSX In Depth article.

+JSX에 대해 더 알고 싶다면, React 팀의 [JSX in Depth](https://reactjs.org/docs/jsx-in-depth.html) 기사를 참고하세요. -

Setting up your first React app

+## 첫번째 React 앱 준비하기 -

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.

+React를 사용하는 데에는 많은 방법이 있지만, 여기서는 커맨드-라인 인터페이스(command-line interface; CLI) 툴인 create-react-app을 사용할 겁니다. 이전에 말했듯이, 이 툴은 패키지를 설치하고 파일들을 생성하여 앞서 설명한 툴링들로 React 애플리케이션을 개발하는 과정을 신속히 처리합니다. -

It's possible to add React to a website without create-react-app by copying some <script> 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.

+[create-react-app 없이 웹 사이트에 React를 추가하는 것](https://reactjs.org/docs/add-react-to-a-website.html)은 HTML 파일에서 [`