From fc4b635561702c9a748c7aaaf87defdfb3450217 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 14:57:02 +0900 Subject: [PATCH 01/11] translate conditional rendering --- content/docs/conditional-rendering.md | 51 ++++++++++++++------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7df19bb98..9d47991dd 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: Conditional Rendering +title: 조건부 렌더링 permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. +리액트에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇개만을 렌더링 할 수 있습니다. -Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. +리액트에서 조건부 렌더링은 자바스크립트에서의 조건 처리와 같게 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 자바스크립트 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 리액트는 현재 상태에 맞게 UI를 업데이트합니다. -Consider these two components: +아래 두 컴포넌트가 있다고 가정해 봅시다: ```js function UserGreeting(props) { @@ -25,6 +25,7 @@ function GuestGreeting(props) { ``` We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: +사용자의 로그인 상태에 맞게 이들 컴포넌트를 보여주는 `Greeting`컴포넌트를 만듭니다: ```javascript{3-7,11,12} function Greeting(props) { @@ -44,13 +45,13 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -This example renders a different greeting depending on the value of `isLoggedIn` prop. +이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. -### Element Variables {#element-variables} +### 앨리먼트 변수들 #{element-variables} -You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change. +앨리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. -Consider these two new components representing Logout and Login buttons: +로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요: ```js function LoginButton(props) { @@ -70,9 +71,9 @@ function LogoutButton(props) { } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. +이하의 예제에서는, `LoginControl`라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예제에서의 ``도 함께 렌더링합니다: ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -118,11 +119,11 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. +변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만, 종종 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 이 조건들을 JSX 안에서 inline으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. -### Inline If with Logical && Operator {#inline-if-with-logical--operator} +### 논리 && 연산자로 If를 inline화 하기 {#inline-if-with-logical--operator} -You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 방법은 자바스크립트의 논리 `&&` 연산자를 포함합니다. 이 연산자를 사용하면 쉽게 앨리먼트를 조건부로 포함할 수 있습니다: ```js{6-10} function Mailbox(props) { @@ -148,15 +149,15 @@ ReactDOM.render( [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. +자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +따라서 `&&`뒤의 앨리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, 리액트는 무시하고 지나칠 것입니다. -### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} -Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). +앨리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다. -In the example below, we use it to conditionally render a small block of text. +아래의 예제에서는 짧은 구문을 조건부로 렌더할 것입니다. ```javascript{5} render() { @@ -169,7 +170,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: +가독성은 좀 떨어지지만, 더 큰 표현식에도 이 구문을 사용할 수 있습니다. ```js{5,7,9} render() { @@ -186,13 +187,13 @@ render() { } ``` -Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components). +자바스크립트에서처럼, 당신이나 당신의 팀이 가독성이 좋다고 생각하는 스타일을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. -### Preventing Component from Rendering {#preventing-component-from-rendering} +### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} -In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output. +가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 리턴하면 해결할 수 있습니다. -In the example below, the `` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render: +아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다: ```javascript{2-4,29} function WarningBanner(props) { @@ -238,6 +239,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**CodePen 에서 실행해보기**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called. +컴포넌트의 생명주기 메소드들이 호출되는 것은 `render`가 `null`을 리턴하는 것에 영향을 받지 않습니다. 그 예로 `comonentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file From 5a4aef248a75ac12c7ad313c0d2530c9cfaef07b Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 15:00:28 +0900 Subject: [PATCH 02/11] =?UTF-8?q?fixed=20grammar:=20=EC=95=A8=EB=A6=AC?= =?UTF-8?q?=EB=A8=BC=ED=8A=B8=20->=20=EC=97=98=EB=A6=AC=EB=A8=BC=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 9d47991dd..4d9766a1d 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -47,9 +47,9 @@ ReactDOM.render( 이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. -### 앨리먼트 변수들 #{element-variables} +### 엘리먼트 변수들 #{element-variables} -앨리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. +엘리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. 로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요: @@ -123,7 +123,7 @@ ReactDOM.render( ### 논리 && 연산자로 If를 inline화 하기 {#inline-if-with-logical--operator} -JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 방법은 자바스크립트의 논리 `&&` 연산자를 포함합니다. 이 연산자를 사용하면 쉽게 앨리먼트를 조건부로 포함할 수 있습니다: +JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 방법은 자바스크립트의 논리 `&&` 연산자를 포함합니다. 이 연산자를 사용하면 쉽게 엘리먼트를 조건부로 포함할 수 있습니다: ```js{6-10} function Mailbox(props) { @@ -151,11 +151,11 @@ ReactDOM.render( 자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. -따라서 `&&`뒤의 앨리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, 리액트는 무시하고 지나칠 것입니다. +따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, 리액트는 무시하고 지나칠 것입니다. ### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} -앨리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다. +엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다. 아래의 예제에서는 짧은 구문을 조건부로 렌더할 것입니다. From 19a0867383b555da54b51c959fe137cbf14b4d49 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 15:23:18 +0900 Subject: [PATCH 03/11] update translation --- content/docs/conditional-rendering.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 4d9766a1d..46785849e 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -24,8 +24,7 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: -사용자의 로그인 상태에 맞게 이들 컴포넌트를 보여주는 `Greeting`컴포넌트를 만듭니다: +이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 `Greeting` 컴포넌트를 만듭니다: ```javascript{3-7,11,12} function Greeting(props) { @@ -43,7 +42,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) 이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. @@ -117,7 +116,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) 변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만, 종종 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 이 조건들을 JSX 안에서 inline으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. @@ -147,7 +146,7 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) 자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. @@ -157,7 +156,7 @@ ReactDOM.render( 엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다. -아래의 예제에서는 짧은 구문을 조건부로 렌더할 것입니다. +아래의 예제에서는 짧은 구문을 조건부로 렌더링할 것입니다. ```javascript{5} render() { @@ -191,9 +190,9 @@ render() { ### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} -가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 리턴하면 해결할 수 있습니다. +가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 반환하면 해결할 수 있습니다. -아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다: +아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다: ```javascript{2-4,29} function WarningBanner(props) { @@ -239,6 +238,6 @@ ReactDOM.render( ); ``` -[**CodePen 에서 실행해보기**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -컴포넌트의 생명주기 메소드들이 호출되는 것은 `render`가 `null`을 리턴하는 것에 영향을 받지 않습니다. 그 예로 `comonentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file +컴포넌트의 생명주기 메소드들이 호출되는 것은 `render`가 `null`을 반환하는 것에 영향을 받지 않습니다. 그 예로 `comonentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file From 69506c91e6d47d3fe3406d96fb9d89705e1bdded Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 15:24:17 +0900 Subject: [PATCH 04/11] add whitespace --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 46785849e..9ffdacd5b 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,7 +8,7 @@ redirect_from: - "tips/false-in-jsx.html" --- -리액트에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇개만을 렌더링 할 수 있습니다. +리액트에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있습니다. 리액트에서 조건부 렌더링은 자바스크립트에서의 조건 처리와 같게 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 자바스크립트 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 리액트는 현재 상태에 맞게 UI를 업데이트합니다. From 2f2504d759931331f25be3b694b4fd30358273ec Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 15:50:35 +0900 Subject: [PATCH 05/11] =?UTF-8?q?=EB=A6=AC=EC=95=A1=ED=8A=B8=20->=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 9ffdacd5b..0f0a4d1d1 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,9 +8,9 @@ redirect_from: - "tips/false-in-jsx.html" --- -리액트에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있습니다. +React에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.. -리액트에서 조건부 렌더링은 자바스크립트에서의 조건 처리와 같게 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 자바스크립트 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 리액트는 현재 상태에 맞게 UI를 업데이트합니다. +React에서 조건부 렌더링은 자바스크립트에서의 조건 처리와 같게 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 자바스크립트 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트합니다. 아래 두 컴포넌트가 있다고 가정해 봅시다: @@ -150,7 +150,7 @@ ReactDOM.render( 자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. -따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, 리액트는 무시하고 지나칠 것입니다. +따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, React는 무시하고 지나칠 것입니다. ### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} From 90384c75a42a793eccc0196345e79b3685923e04 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 15:55:27 +0900 Subject: [PATCH 06/11] =?UTF-8?q?#=20=EC=9C=84=EC=B9=98=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 0f0a4d1d1..2a25e0252 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -46,7 +46,7 @@ ReactDOM.render( 이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. -### 엘리먼트 변수들 #{element-variables} +### 엘리먼트 변수들 {#element-variables} 엘리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. From 77999b82a0221cf0ee23d71a844302eb5fd2fb5b Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 13 Feb 2019 16:08:14 +0900 Subject: [PATCH 07/11] update --- content/docs/conditional-rendering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 2a25e0252..be2331342 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -148,7 +148,7 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. +Javascript에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. 따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, React는 무시하고 지나칠 것입니다. @@ -186,7 +186,7 @@ render() { } ``` -자바스크립트에서처럼, 당신이나 당신의 팀이 가독성이 좋다고 생각하는 스타일을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. +Javascript처럼, 당신이나 당신의 팀이 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. ### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} From 6e6debdcaa9f1c479d617de5b51f2fad528fc6c8 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Mon, 18 Feb 2019 12:11:49 +0900 Subject: [PATCH 08/11] =?UTF-8?q?update=20feedback:=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=EC=B2=B4=20=EB=AC=B8=EC=A0=9C=EC=99=80=20=EA=B0=80=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=9D=BC=EC=9D=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index be2331342..3ca0fb30e 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,11 +8,11 @@ redirect_from: - "tips/false-in-jsx.html" --- -React에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다.. +React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 그럼으로서 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. -React에서 조건부 렌더링은 자바스크립트에서의 조건 처리와 같게 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 자바스크립트 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트합니다. +React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다. -아래 두 컴포넌트가 있다고 가정해 봅시다: +아래 두 컴포넌트가 있다고 가정해 봅시다. ```js function UserGreeting(props) { @@ -24,7 +24,7 @@ function GuestGreeting(props) { } ``` -이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 `Greeting` 컴포넌트를 만듭니다: +이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 `Greeting` 컴포넌트를 만듭니다, ```javascript{3-7,11,12} function Greeting(props) { @@ -50,7 +50,7 @@ ReactDOM.render( 엘리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. -로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요: +로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요. ```js function LoginButton(props) { @@ -70,9 +70,9 @@ function LogoutButton(props) { } ``` -이하의 예제에서는, `LoginControl`라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. +아래의 예제에서는 `LoginControl`라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. -이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예제에서의 ``도 함께 렌더링합니다: +이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예제에서의 ``도 함께 렌더링합니다. ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -122,7 +122,7 @@ ReactDOM.render( ### 논리 && 연산자로 If를 inline화 하기 {#inline-if-with-logical--operator} -JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 방법은 자바스크립트의 논리 `&&` 연산자를 포함합니다. 이 연산자를 사용하면 쉽게 엘리먼트를 조건부로 포함할 수 있습니다: +JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 안에는 JavaScript의 논리 연산자 `&&` 역시 사용할 수 있습니다. 이 연산자를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. ```js{6-10} function Mailbox(props) { @@ -148,9 +148,9 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -Javascript에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다. +JavaScript에서 `true && expression`은 항상 `expression`으로 평가되고 `false && expression`은 항상 `false`로 평가됩니다. -따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면, React는 무시하고 지나칠 것입니다. +따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면 React는 무시할 것입니다. ### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} @@ -186,13 +186,13 @@ render() { } ``` -Javascript처럼, 당신이나 당신의 팀이 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. +JavaScript와 마찬가지로 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. ### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} 가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 반환하면 해결할 수 있습니다. -아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다: +아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다. ```javascript{2-4,29} function WarningBanner(props) { @@ -240,4 +240,4 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -컴포넌트의 생명주기 메소드들이 호출되는 것은 `render`가 `null`을 반환하는 것에 영향을 받지 않습니다. 그 예로 `comonentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file +`render`가 `null`을 반환하는 것은 컴포넌트의 생명주기 메소드 호출에 영향을 주지 않습니다. 그 예로 `componentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file From 1bf12568277af2a3d81363a3e1e4f78fb6291e67 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Mon, 18 Feb 2019 12:12:33 +0900 Subject: [PATCH 09/11] =?UTF-8?q?update=20feedback:=20=EB=B9=A0=EC=A7=84?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/conditional-rendering.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 3ca0fb30e..7f9672680 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,9 +8,9 @@ redirect_from: - "tips/false-in-jsx.html" --- -React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 그럼으로서 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. +React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. -React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 요소들를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다. +React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. [`if`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`조건부 연산자`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다. 아래 두 컴포넌트가 있다고 가정해 봅시다. @@ -46,9 +46,9 @@ ReactDOM.render( 이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. -### 엘리먼트 변수들 {#element-variables} +### 엘리먼트 변수 {#element-variables} -엘리먼트들을 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. +엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. 로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요. @@ -70,7 +70,7 @@ function LogoutButton(props) { } ``` -아래의 예제에서는 `LoginControl`라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. +아래의 예제에서는 `LoginControl`이라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. 이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예제에서의 ``도 함께 렌더링합니다. @@ -118,11 +118,11 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만, 종종 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 이 조건들을 JSX 안에서 inline으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. +변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 여러 조건을 JSX 안에서 inline으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. -### 논리 && 연산자로 If를 inline화 하기 {#inline-if-with-logical--operator} +### 논리 && 연산자로 If를 inline 하기 {#inline-if-with-logical--operator} -JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 이 안에는 JavaScript의 논리 연산자 `&&` 역시 사용할 수 있습니다. 이 연산자를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. +JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 `&&`를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. ```js{6-10} function Mailbox(props) { @@ -150,7 +150,7 @@ ReactDOM.render( JavaScript에서 `true && expression`은 항상 `expression`으로 평가되고 `false && expression`은 항상 `false`로 평가됩니다. -따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 만약 조건이 `false`라면 React는 무시할 것입니다. +따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 조건이 `false`라면 React는 무시할 것입니다. ### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} @@ -186,13 +186,13 @@ render() { } ``` -JavaScript와 마찬가지로 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건들이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. +JavaScript와 마찬가지로, 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. ### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} 가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 반환하면 해결할 수 있습니다. -아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다. +아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다. ```javascript{2-4,29} function WarningBanner(props) { From 72a0c23ed0c9373c9fdc3c64802eeb210163cd3c Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Wed, 6 Mar 2019 23:30:15 +0900 Subject: [PATCH 10/11] update feedback --- content/docs/conditional-rendering.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7f9672680..f3ae90e7a 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -44,11 +44,11 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -이 예제는 `isLoggedIn` prop에 따라서 다른 인사를 렌더링 합니다. +이 예시는 `isLoggedIn` prop에 따라서 다른 인사말을 렌더링 합니다. ### 엘리먼트 변수 {#element-variables} -엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다. 이렇게 하면 다른 출력은 상관 없이 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. +엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다. 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건부로 렌더링 할 수 있습니다. 로그아웃과 로그인 버튼을 나타내는 두 컴포넌트가 있다고 가정해 보세요. @@ -70,9 +70,9 @@ function LogoutButton(props) { } ``` -아래의 예제에서는 `LoginControl`이라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. +아래의 예시에서는 `LoginControl`이라는 [유상태 컴포넌트](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) 를 만들 것입니다. -이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예제에서의 ``도 함께 렌더링합니다. +이 컴포넌트는 현재 상태에 맞게 ``이나 ``을 렌더링합니다. 또한 이전 예시에서의 ``도 함께 렌더링합니다. ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -150,13 +150,13 @@ ReactDOM.render( JavaScript에서 `true && expression`은 항상 `expression`으로 평가되고 `false && expression`은 항상 `false`로 평가됩니다. -따라서 `&&`뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 조건이 `false`라면 React는 무시할 것입니다. +따라서 `&&` 뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 조건이 `false`라면 React는 무시합니다. ### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} 엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다. -아래의 예제에서는 짧은 구문을 조건부로 렌더링할 것입니다. +아래의 예시에서는 짧은 구문을 조건부로 렌더링합니다. ```javascript{5} render() { @@ -186,13 +186,13 @@ render() { } ``` -JavaScript와 마찬가지로, 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수 도 있다는 것을 기억하세요. +JavaScript와 마찬가지로, 가독성이 좋다고 생각하는 방식을 선택하면 됩니다. 또한 조건이 너무 복잡하다면 [컴포넌트를 분리](/docs/components-and-props.html#extracting-components)하기 좋을 때 일 수도 있다는 것을 기억하세요. -### 컴포넌트가 렌더링 하는 것을 막기 {#preventing-component-from-rendering} +### 컴포넌트가 렌더링하는 것을 막기 {#preventing-component-from-rendering} -가끔 다른 컴포넌트에 의해 렌더될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 반환하면 해결할 수 있습니다. +가끔 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 `null`을 반환하면 해결할 수 있습니다. -아래의 예제에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다. +아래의 예시에서는 ``가 `warn` prop의 값에 의해서 렌더링됩니다. prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다. ```javascript{2-4,29} function WarningBanner(props) { @@ -240,4 +240,4 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -`render`가 `null`을 반환하는 것은 컴포넌트의 생명주기 메소드 호출에 영향을 주지 않습니다. 그 예로 `componentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file +컴포넌트의 `render` 메서드로부터 `null`을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않습니다. 그 예로 `componentDidUpdate`는 계속해서 호출되게 됩니다. \ No newline at end of file From de9438af8f5208bef9b1b08ffeff66247a266c43 Mon Sep 17 00:00:00 2001 From: Kim Bum June Date: Sat, 9 Mar 2019 12:15:27 +0900 Subject: [PATCH 11/11] update feedback --- content/docs/conditional-rendering.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index f3ae90e7a..5e979e22d 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -118,11 +118,11 @@ ReactDOM.render( [**CodePen에서 실행하기**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 여러 조건을 JSX 안에서 inline으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. +변수를 선언하고 `if`를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용하고 싶을 때가 있을 수 있습니다. 여러 조건을 JSX 안에서 인라인(inline)으로 처리할 방법 몇 가지를 아래에서 소개하겠습니다. -### 논리 && 연산자로 If를 inline 하기 {#inline-if-with-logical--operator} +### 논리 && 연산자로 If를 인라인으로 표현하기{#inline-if-with-logical--operator} -JSX안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 `&&`를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. +JSX 안에는 중괄호를 이용해서 [표현식을 포함](/docs/introducing-jsx.html#embedding-expressions-in-jsx) 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 `&&`를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. ```js{6-10} function Mailbox(props) { @@ -152,7 +152,7 @@ JavaScript에서 `true && expression`은 항상 `expression`으로 평가되고 따라서 `&&` 뒤의 엘리먼트는 조건이 `true`일때 출력이 됩니다. 조건이 `false`라면 React는 무시합니다. -### 조건부 연산자로 If-Else구문 inline화 하기{#inline-if-else-with-conditional-operator} +### 조건부 연산자로 If-Else구문 인라인으로 표현하기{#inline-if-else-with-conditional-operator} 엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 [`condition ? true: false`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)를 사용하는 것입니다.