리액트 공식 문서 번역-06. 조건부 렌더링

React에서 컴포넌트는 다양한 조건에 따라 다른 것을 표시해야 할 때가 많습니다. React에서는 if 문, && 연산자, ? : 연산자와 같은 JavaScript 구문을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.

 

조건부 JSX 반환

PackingList 컴포넌트가 여러 개의 Item 을 렌더링하고, 각 항목은 "packed" 여부를 나타낼 수 있다고 가정해 보겠습니다.

 

https://codesandbox.io/s/dm1ez5?file=/App.js&utm_medium=sandpack

heuristic-rumple-dm1ez5 - CodeSandbox

 

일부 Item 컴포넌트의 isPacked props가 false 대신 true로 설정되어 있습니다. isPacked={true}인 경우 패킹된 항목에 확인 표시 (✔)를 추가하려고 합니다.

 

이 경우 다음과 같이 if/else 문으로 작성할 수 있습니다

 

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

만약 isPacked prop이 true이면, 이 코드는 다른 JSX 트리를 반환합니다. 이 변경으로 인해 일부 항목들은 끝에 체크 마크가 추가됩니다.

 

https://codesandbox.io/s/2t42nn?file=/App.js&utm_medium=sandpack

upbeat-morning-2t42nn - CodeSandbox

 

둘 중 어떤 것이 반환될지를 결정하는 조건 로직을 JavaScript의 if문과 return문을 이용하여 작성하고 있음을 주목해보세요.

React에서도 조건과 같은 제어 흐름은 JavaScript로 처리됩니다. 원하는 경우 두 경우 모두에서 반환되는 JSX를 수정해 보면 결과가 어떻게 변경되는지 확인해 볼 수 있습니다.

 

null로 아무것도 반환하지 않는 조건부 렌더링

일부 상황에서는 아무것도 렌더링하고 싶지 않을 때도 있습니다. 예를 들어, packed 항목을 전혀 표시하고 싶지 않은 경우입니다. 컴포넌트는 반드시 뭔가를 반환해야 합니다. 이 경우에는 null을 반환할 수 있습니다.

 

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

 

만약 isPacked가 true이면, 컴포넌트는 null을 반환합니다. 그렇지 않으면 렌더링할 JSX를 반환합니다.

 

https://codesandbox.io/s/c3qqk0?file=/App.js&utm_medium=sandpack

busy-leftpad-c3qqk0 - CodeSandbox

 

실제로 컴포넌트에서 null을 반환하는 것은 일반적이지 않습니다. 왜냐하면 이러한 컴포넌트를 렌더링하려는 개발자를 놀라게 할 수 있기 때문입니다. 대신, 부모 컴포넌트의 JSX에서 컴포넌트를 조건부로 포함하거나 제외하는 것이 더 일반적입니다. 이것이 그 방법입니다!

 

JSX 조건부 포함

이전 예제에서는 컴포넌트가 반환할 JSX 트리를 제어했습니다. (if any!) 컴포넌트의 렌더링 출력에서 일부 중복을 이미 인지하셨을 수 있습니다.

 

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

 

이것은 매우 유사합니다

 

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

 

두 조건 분기 모두 다음을 반환합니다 <li className="item">...</li>.

 

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

이 중복은 해로울 것이 없지만 코드를 유지보수하기 어려울 수 있습니다. 만약 className을 바꾸고 싶다면 두 군데에서 변경해야 할 것입니다. 이런 경우, JSX를 조건적으로 포함시켜서 코드를 더 DRY하게 만들 수 있습니다.

 

조건부(삼항) 연산자 ( ? :)

자바스크립트에는 조건문 표현을 작성하는 간결한 구문이 있습니다 - 조건부 연산자 또는 "삼항 연산자"라고도 합니다.

 

이렇게 쓰는 대신

 

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

 

이렇게 쓸 수 있습니다.

 

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

 

이 두 예시는 완전히 동일한가요?

객체 지향 프로그래밍 배경에서 오신 분들은 위의 두 예제가 <li> 요소의 두 개의 서로 다른 "인스턴스"를 만들 수도 있다고 생각할 수 있습니다. 그러나 JSX 요소는 내부 상태를 가지지 않고 실제 DOM 노드가 아니기 때문에 "인스턴스"가 아닙니다. 이들은 블루프린트와 같은 가벼운 설명입니다. 따라서 이러한 두 예제는 사실 완전히 동등합니다. 상태 유지 및 재설정은 이러한 동작 방식에 대해 자세히 설명합니다.

 

이제 완료된 항목의 텍스트를 <del>과 같은 다른 HTML 태그로 감싸고 싶다고 가정해보자. 각 경우에 더 많은 JSX를 중첩하기 쉽도록 새 줄과 괄호를 추가할 수 있다

 

https://codesandbox.io/s/gn6sl1?file=/App.js&utm_medium=sandpack

exciting-jones-gn6sl1 - CodeSandbox

 

이 스타일은 간단한 조건에 대해서는 잘 작동하지만 지나치게 중첩된 조건 부호 때문에 컴포넌트가 복잡해질 경우 적절하게 사용해야 합니다. 복잡한 표현식을 정리하기 위해 자식 컴포넌트를 추출하는 것을 고려해보세요. React에서 마크업은 코드의 일부이므로 변수 및 함수와 같은 도구를 사용하여 복잡한 표현식을 깔끔하게 처리할 수 있습니다.

 

논리 AND 연산자 (&&)

React 컴포넌트 내부에서 자주 사용되는 또 다른 단축키는 JavaScript 논리 AND (&&) 연산자입니다. 조건이 참일 때 JSX를 렌더링하고 그렇지 않으면 아무것도 렌더링하지 않으려는 경우에 자주 사용됩니다. && 연산자를 사용하면 isPacked가 true인 경우에만 체크 마크를 조건부로 렌더링할 수 있습니다.

 

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

 

이것을 읽을 수 있는 방법은 "만약 isPacked라면 (&&) 체크마크를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않는다"입니다.

 

실제로 이렇게 사용할 수 있습니다.

 

https://codesandbox.io/s/cvxd9k?file=/App.js&utm_medium=sandpack

optimistic-kate-cvxd9k - CodeSandbox

 

JavaScript의 && 표현식은 왼쪽 피연산자(여기서는 조건)가 true인 경우 오른쪽 피연산자(체크 마크)의 값을 반환합니다. 그러나 조건이 false인 경우 전체 표현식이 false가 되며, React는 false를 JSX 트리의 "빈 공간"으로 간주합니다. 마치 null이나 undefined와 같이 말이죠. 그리고 해당 위치에 아무것도 렌더링하지 않습니다.

 

💡 && 연산자의 왼쪽에 숫자를 놓지 마세요.

조건을 검사하기 위해 JavaScript는 자동으로 왼쪽 피연산자를 불리언으로 변환합니다. 하지만 왼쪽 피연산자가 0이면 전체 표현식의 값도 0이 되며, React는 아무것도 렌더링하지 않고 0을 렌더링합니다.

예를 들어, messageCount && <p>New messages</p>와 같은 코드를 작성하는 것은 일반적인 실수입니다. messageCount가 0일 때 아무것도 렌더링되지 않을 것으로 추측하기 쉽지만, 실제로는 0 자체가 렌더링됩니다!

이를 해결하려면 왼쪽 피연산자를 불리언으로 만들어야 합니다: messageCount > 0 && <p>New messages</p>입니다.

 

JSX를 변수에 조건부 할당하기

단축 표현식이 일반 코드 작성에 방해가 될 때, if 문과 변수를 사용해 보세요. let으로 정의된 변수를 재할당할 수 있으므로, 먼저 표시하고자 하는 기본 콘텐츠인 이름을 지정하세요.

 

let itemContent = name;

 

isPacked가 true일 때 JSX 표현식을 itemContent에 재할당하려면 if문을 사용하세요.

 

if (isPacked) {
  itemContent = name + " ✔";
}

 

중괄호는 "JavaScript 창문"을 엽니다. 중괄호로 변수를 포함시키고 이전에 계산한 표현식을 JSX 내부에 중첩시켜 반환합니다.

 

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

 

이 스타일은 가장 장황하지만 가장 유연합니다. 여기에서 실제로 작동하는 모습입니다

 

https://codesandbox.io/s/8vcqlo?file=/App.js&utm_medium=sandpack

epic-rain-8vcqlo - CodeSandbox

 

이전과 마찬가지로, 이것은 텍스트뿐만 아니라 임의의 JSX에 대해서도 작동합니다.

 

https://codesandbox.io/s/r3qs2f?file=/App.js&utm_medium=sandpack

young-pine-r3qs2f - CodeSandbox

 

JavaScript에 익숙하지 않은 경우, 이러한 스타일의 다양성은 처음에는 압도적으로 보일 수 있습니다. 그러나 이러한 스타일을 배우면 React 컴포넌트뿐만 아니라 모든 JavaScript 코드를 읽고 작성하는 데 도움이 됩니다. 먼저 선호하는 스타일을 선택하고, 다른 스타일이 어떻게 작동하는지 잊어버리면 다시 이 참조를 참고하십시오.

 

요약

• React에서 분기 로직을 JavaScript로 제어할 수 있습니다.
• if 문을 사용하여 조건부로 JSX 식을 반환할 수 있습니다.
• JSX에서 중괄호를 사용하여 조건부로 일부 JSX를 변수에 저장한 다음 다른 JSX 내에 포함시킬 수 있습니다.
• JSX에서 {cond ? <A /> : <B />}는 cond가 true이면 <A />를 렌더링하고, 그렇지 않으면 <B />를 렌더링한다는 의미입니다.
• JSX에서 {cond && <A />}는 cond가 true이면 <A />를 렌더링하고, 그렇지 않으면 아무것도 렌더링하지 않는다는 의미입니다.
• 이러한 단축키는 흔하지만, 순수한 if를 선호하는 경우 사용할 필요가 없습니다.

 

2023.07.09 - [React/Documentation] - 리액트 공식 문서 번역-07. 렌더링 목록

리액트 공식 문서 번역-07. 렌더링 목록