Translate Conditional Rendering

content/docs/conditional-rendering.md

@@ -1,18 +1,18 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: 조건부 렌더링
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
 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.
+React에서는 원하는 동작을 캡슐화하는 별개의 컴포넌트를 만들 수 있습니다. 그러면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다..
 
-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.
+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를 업데이트합니다.
 
-Consider these two components:
+아래 두 컴포넌트가 있다고 가정해 봅시다:
 
 ```js
 function UserGreeting(props) {
@@ -24,7 +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` 컴포넌트를 만듭니다:
 
 ```javascript{3-7,11,12}
 function Greeting(props) {
@@ -42,15 +42,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[**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 +70,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 `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+이 컴포넌트는 현재 상태에 맞게 `<LoginButton />`이나 `<LogoutButton />`을 렌더링합니다. 또한 이전 예제에서의 `<Greeting />`도 함께 렌더링합니다:
 
 ```javascript{20-25,29,30}
 class LoginControl extends React.Component {
@@ -116,13 +116,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[**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) {
@@ -146,17 +146,17 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+[**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`라면, React는 무시하고 지나칠 것입니다.
 
-### 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 +169,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 +186,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 `<WarningBanner />` 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:
+아래의 예제에서는 `<WarningBanner />`가 `warn` prop의 값에 의해서 렌더링됩니다. 만약 prop이 `false`라면 컴포넌트는 렌더링하지 않게 됩니다:
 
 ```javascript{2-4,29}
 function WarningBanner(props) {
@@ -238,6 +238,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`는 계속해서 호출되게 됩니다.