Conditional Rendering조건부 렌더링

Conditionally returning JSX조건부로 반환하는 JSX

Let’s say you have a PackingList component rendering several Items, which can be marked as packed or not: 상품이 포장되었는지 여부를 표시할 수 있는 여러 개의 Item을 렌더링하는 PackingList 컴포넌트가 있다고 가정해봅시다:

Notice that some of the Item components have their isPacked prop set to true instead of false. You want to add a checkmark (✔) to packed items if isPacked={true}. 일부 Item 컴포넌트의 isPacked prop이 false가 아닌 true로 설정되어 있는 것을 확인할 수 있습니다. isPacked={true}인 경우, 패킹된 아이템에 체크 표시(✔)를 추가하고 싶을 것입니다.

You can write this as an if/else statement like so: 이를 다음과 같이 if/else 문으로 작성할 수 있습니다:

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

If the isPacked prop is true, this code returns a different JSX tree. With this change, some of the items get a checkmark at the end: isPacked prop이 true이면 이 코드는 다른 JSX 트리를 반환합니다. 이렇게 변경하면 일부 항목의 마지막에 체크 표시가 나타납니다:

Try editing what gets returned in either case, and see how the result changes! 두 경우 모두 반환되는 내용을 편집해보고 결과가 어떻게 달라지는지 확인해 보세요!

Notice how you’re creating branching logic with JavaScript’s if and return statements. In React, control flow (like conditions) is handled by JavaScript. JavaScript의 if와 return 문으로 분기 로직을 어떻게 생성하는지 주목하세요. React에서 조건과 같은 제어 흐름은 JavaScript로 처리됩니다.

Conditionally returning nothing with nullnull을 사용해 조건부로 아무것도 반환하지 않기

In some situations, you won’t want to render anything at all. For example, say you don’t want to show packed items at all. A component must return something. In this case, you can return null: 어떤 상황에서는 아무것도 렌더링하고 싶지 않을 수도 있습니다. 예를 들어, 포장된 아이템을 전혀 표시하고 싶지 않다고 가정해 보겠습니다. 컴포넌트는 무언가를 반환해야 합니다. 이 경우 null을 반환하면 됩니다:

if (isPacked) {

  return null;

}

return <li className="item">{name}</li>;

If isPacked is true, the component will return nothing, null. Otherwise, it will return JSX to render. isPacked가 참이면 컴포넌트는 아무것도 반환하지 않고 null을 반환합니다. 그렇지 않으면 렌더링할 JSX를 반환합니다.

In practice, returning null from a component isn’t common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component’s JSX. Here’s how to do that! 실제로 컴포넌트에서 null을 반환하는 것은 렌더링하려는 개발자를 놀라게 할 수 있기 때문에 일반적이지 않습니다. 부모 컴포넌트의 JSX에 컴포넌트를 조건부로 포함하거나 제외하는 경우가 더 많습니다. 이를 수행하는 방법은 다음과 같습니다!

Conditionally including JSX 조건을 포함한 JSX

In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: 이전 예제에서는 컴포넌트가 반환할 JSX 트리(있는 경우!)를 제어했습니다. 렌더링 출력에서 이미 일부 중복을 발견했을 수 있습니다:

<li className="item">{name} ✔</li>

is very similar to 이는 아래와 매우 유사합니다.

<li className="item">{name}</li>

Both of the conditional branches return <li className="item">...</li>: 두 조건부 브랜치 모두 <li className="item">...</li>를 반환합니다:

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

While this duplication isn’t harmful, it could make your code harder to maintain. What if you want to change the className? You’d have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more DRY. 이러한 중복은 해롭지는 않지만 코드를 유지 관리하기 어렵게 만들 수 있습니다. className을 변경하려면 어떻게 해야 할까요? 코드의 두 곳에서 변경해야 할 것입니다! 이런 상황에서는 조건부로 약간의 JSX를 포함시켜 코드를 더 DRY하게(덜 반복적이게) 만들 수 있습니다.

Conditional (ternary) operator (? :)조건(삼항) 연산자(? :)

JavaScript has a compact syntax for writing a conditional expression — the conditional operator or “ternary operator”. JavaScript에는 조건 연산자 또는 “삼항 연산자”라는 조건식 작성을 위한 간결한 구문이 있습니다.

Instead of this: 아래 대신에:

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

You can write this: 이렇게 쓸 수 있습니다:

return (

  <li className="item">

    {isPacked ? name + ' ✔' : name}

  </li>

);

You can read it as “if isPacked is true, then (?) render name + ' ✔', otherwise (:) render name”. “isPacked가 참이면 (?) name + ' ✔'를 렌더링하고, 그렇지 않으면 (:) name을 렌더링하라” 라고 읽을 수 있습니다.

Now let’s say you want to wrap the completed item’s text into another HTML tag, like <del> to strike it out. You can add even more newlines and parentheses so that it’s easier to nest more JSX in each of the cases: 이제 완성된 항목의 텍스트를 <del>과 같은 다른 HTML 태그로 감싸서 줄을 긋고 싶다고 가정해 봅시다. 더 많은 개행과 괄호를 추가하여 각 대소문자를 더 쉽게 중첩할 수 있습니다:

This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. 이 스타일은 간단한 조건에 적합하지만 적당히 사용하세요. 중첩된 조건 마크업이 너무 많아 컴포넌트가 지저분해지면 자식 컴포넌트를 추출하여 정리하는 것을 고려하세요. React에서 마크업은 코드의 일부이므로 변수나 함수와 같은 도구를 사용해 복잡한 표현식을 정리할 수 있습니다.

Logical AND operator (&&)논리 AND 연산자(&&)

Another common shortcut you’ll encounter is the JavaScript logical AND (&&) operator. Inside React components, it often comes up when you want to render some JSX when the condition is true, or render nothing otherwise. With &&, you could conditionally render the checkmark only if isPacked is true: 또 다른 일반적인 단축표현으로 JavaScript AND(&&) 논리 연산자가 있습니다. React 컴포넌트 내에서 조건이 참일 때 일부 JSX를 렌더링하거나 그렇지 않으면 아무것도 렌더링하지 않으려 할 때 자주 사용됩니다. &&를 사용하면 isPacked가 true일 때만 조건부로 체크 표시를 렌더링할 수 있습니다:

return (

  <li className="item">

    {name} {isPacked && '✔'}

  </li>

);

You can read this as “if isPacked, then (&&) render the checkmark, otherwise, render nothing”. 이는 “만약 isPacked이면 (&&) 체크 표시를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않습니다” 로 읽을 수 있습니다.

Here it is in action: 아래는 실제로 작동하는 모습입니다:

A JavaScript && expression returns the value of its right side (in our case, the checkmark) if the left side (our condition) is true. But if the condition is false, the whole expression becomes false. React considers false as a “hole” in the JSX tree, just like null or undefined, and doesn’t render anything in its place. JavaScript && 표현식은 왼쪽(조건)이 true이면 오른쪽(이 경우 체크 표시)의 값을 반환합니다. 하지만 조건이 false이면 표현식 전체가 false가 됩니다. React는 false를 null이나 undefined와 마찬가지로 JSX 트리상의 “구멍”으로 간주하고, 그 자리에 아무것도 렌더링하지 않습니다.

Conditionally assigning JSX to a variable변수에 조건부로 JSX 할당하기

When the shortcuts get in the way of writing plain code, try using an if statement and a variable. You can reassign variables defined with let, so start by providing the default content you want to display, the name: 단축키가 일반 코드를 작성하는 데 방해가 된다면 if 문과 변수를 사용해 보세요. let으로 정의된 변수는 재할당할 수 있으므로, 표시할 기본 콘텐츠인 이름을 지정하는 것부터 시작하세요:

let itemContent = name;

Use an if statement to reassign a JSX expression to itemContent if isPacked is true: if 문을 사용하여 isPacked가 true면 JSX 표현식을 itemContent에 재할당합니다:

if (isPacked) {

  itemContent = name + " ✔";

}

Curly braces open the “window into JavaScript”. Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: 중괄호는 “JavaScript로의 창”을 엽니다. 중괄호로 변수를 반환된 JSX 트리에 삽입하여 이전에 계산된 표현식을 JSX 안에 중첩시킵니다:

<li className="item">

  {itemContent}

</li>

This style is the most verbose, but it’s also the most flexible. Here it is in action: 이 스타일은 가장 장황하지만 가장 유연하기도 합니다. 실제로 사용해보겠습니다:

Like before, this works not only for text, but for arbitrary JSX too: 이전과 마찬가지로 텍스트뿐만 아니라 임의의 JSX에서도 작동합니다:

If you’re not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code — and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work. JavaScript에 익숙하지 않다면 처음에는 이 다양한 스타일이 압도적으로 보일 수 있습니다. 하지만 이 스타일들을 익히면 React 컴포넌트뿐 아니라 모든 JavaScript 코드를 읽고 작성하는 데 도움이 됩니다! 우선 선호하는 스타일을 선택한 다음, 다른 스타일이 어떻게 작동하는지 잊어버렸다면 이 레퍼런스를 다시 참조하세요.