translate conditional rendering #1

Jonir227 · 2019-02-13T05:57:48Z

No description provided.

Godsenal · 2019-02-13T06:05:59Z

content/docs/conditional-rendering.md

 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는 리액트라고 안적고 그대로

Godsenal · 2019-02-13T06:07:13Z

content/docs/conditional-rendering.md

@@ -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`컴포넌트를 만듭니다:


Greeting 컴포넌트 (띄어쓰기)
사용자의 로그인 상태에 따라 위 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만듭니다. 어떰?

Godsenal · 2019-02-13T06:10:02Z

content/docs/conditional-rendering.md


-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`라면 컴포넌트는 렌더링하지 않게 됩니다:


렌더 -> 렌더링

Godsenal · 2019-02-13T06:11:07Z

content/docs/conditional-rendering.md


-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`을 리턴하면 해결할 수 있습니다.


null을 반환하는 것으로 해결할 수 있습니다.

렌더링될 때

Godsenal · 2019-02-13T06:11:21Z

content/docs/conditional-rendering.md


-In the example below, we use it to conditionally render a small block of text.
+아래의 예제에서는 짧은 구문을 조건부로 렌더할 것입니다.


hewonjeong · 2019-02-13T06:56:49Z

content/docs/conditional-rendering.md


-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를 업데이트합니다.


JavaScript에서의

hewonjeong · 2019-02-13T06:58:27Z

content/docs/conditional-rendering.md


-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다.


JavaScript에서

hewonjeong · 2019-02-13T07:00:28Z

content/docs/conditional-rendering.md

@@ -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)하기 좋을 때 일 수 도 있다는 것을 기억하세요.


JavaScript에서 처럼 or JavaScript처럼. 에서 처럼 뭔가 어색하지않나요?
스타일 → 방식

Jonir227 added 2 commits February 13, 2019 14:57

translate conditional rendering

fc4b635

fixed grammar: 앨리먼트 -> 엘리먼트

5a4aef2

Godsenal reviewed Feb 13, 2019

View reviewed changes

Jonir227 added 3 commits February 13, 2019 15:23

update translation

19a0867

add whitespace

69506c9

리액트 -> React

2f2504d

Jonir227 merged commit a5e00b4 into master Feb 13, 2019

hewonjeong reviewed Feb 13, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translate conditional rendering #1

translate conditional rendering #1

Jonir227 commented Feb 13, 2019

Godsenal Feb 13, 2019

hewonjeong Feb 13, 2019

Godsenal Feb 13, 2019

Godsenal Feb 13, 2019

Godsenal Feb 13, 2019

hewonjeong Feb 13, 2019

Godsenal Feb 13, 2019

hewonjeong Feb 13, 2019

hewonjeong Feb 13, 2019

hewonjeong Feb 13, 2019


		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`라면 컴포넌트는 렌더링하지 않게 됩니다:


		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, we use it to conditionally render a small block of text.
		아래의 예제에서는 짧은 구문을 조건부로 렌더할 것입니다.


		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를 업데이트합니다.


		It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
		자바스크립트에서 `true && expression`은 항상 `expression`으로 평가되고, `false && expression`은 항상 `false`로 평가됩니다.

translate conditional rendering #1

translate conditional rendering #1

Conversation

Jonir227 commented Feb 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment