[REACT] 조건부 렌더링(Conditional Rendering)

조건부 렌더링(Conditional Rendering)은 React에서 UI를 동적으로 변경하는 매우 중요한 개념입니다.

조건에 따라 화면에 표시되는 요소를 제어할 수 있기 때문에, 사용자가 입력한 값, 상태 변화, 또는 외부 데이터에 따라 화면을 변화시킬 수 있습니다.

---

1. 조건부 렌더링이란?

특정 조건에 따라 화면에 표시되는 요소가 달라지는 방식입니다. 예를 들어, 사용자가 로그인했을 때와 로그인하지 않았을 때 보여주는 UI가 달라야 할 경우, 조건부 렌더링을 사용하여 이러한 동작을 구현할 수 있습니다.

//ture일 때 버튼을 보이고, false일 때 버튼 숨기기

function App() {
 const isLoggedIn = true;
 
 return (
  <div>
   {isLoggedIn ? <button>로그아웃</button> : null}
  </div>
 );
}

isLoggedIn이 true 일 때만 "로그아웃" 버튼이 표시되고, false일 경우 버튼이 보이지 않습니다.

---

2. JavaScript의 Truthy와 Falsy 값

React에서 조건부 렌더링을 할 때는 JavaScript의 Truthy와 Falsy 값 개념을 잘 이해하는 것이 중요합니다.

JavaScript는 다양한 값들을 조건문에서 true 또는 false로 평가합니다. 

이를 Truthy(참)와 Falsy(거짓) 값으로 나누며, 조건문에서 이들 값을 쉽게 사용할 수 있습니다.

• Falsy 값 : false, 0, ""(빈 문자열), null, undefined, NaN
• Truthy값 : 위에 나열된 값을 제외한 모든 값

function App() {
 const isLoggedIn = 0;
 
 return (
  <div>
   {isLoggedIn && <button>로그아웃</button>} //isLoggedIn이 falsy이므로 버튼이 렌더링되지 않음
  </div>
 );
}

isLoggedIn이 0인 경우, false로 평가되어 버튼은 렌더링 되지 않습니다.

---

3. Inline Conditions (조건문을 코드 안에 집어넣기)

React에서는 조건문을 JSX 코드 안에 간단하게 넣을 수 있습니다. 이를 Inline Conditions라고 하며, 여러 방법으로 조건부 렌더링을 구현할 수 있습니다.

 

Inline if(&& 연산자 사용)

가장 간단한 조건부 렌더링 방식은 && 연산자를 사용하는 것입니다. 이 방식은 조건이 true일 때만 특정 요소를 렌더링 하고, false일 경우 아무것도 렌더링 하지 않습니다.

function App() {
 const isLoggedIn = true;
 
 return (
  <div>
   {isLoggedIn && <button>로그아웃</button>} //isLoggedIn이 true일 때만 버튼이 보임
  </div>
 );
}

 

Inline If-Else (삼항 연산자 사용)

삼항 연산자는 조건문을 JSX 내부에서 더 간결하게 작성할 수 있는 방법으로 기본 문법은 condition ? true : false 형태로 사용됩니다.

function App() {
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? <button>로그아웃</button> : <button>로그인</button>}  {/* isLoggedIn에 따라 버튼이 달라짐 */}
    </div>
  );
}

isLoggedIn이 true일 경우 "로그아웃"버튼을, false일 경우 "로그인" 버튼을 렌더링 합니다.

---

4. Component 렌더링 막기 : null 리턴하기

특정 조건에서 컴포넌트를 렌더링 하지 않도록 할 때는, JSX 내에서 null을 리턴하는 방법을 사용할 수 있습니다.

null을 리턴하면 해당 컴포넌트는 아예 렌더링이 되지 않습니다.

function App() {
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? <button>로그아웃</button> : null}  {/* isLoggedIn이 false일 경우 버튼을 렌더링하지 않음 */}
    </div>
  );
}

isLoggedIn이 false일 경우 <button>로그아웃</button>이 전혀 렌더링 되지 않습니다.

---

5. 조건부 렌더링을 활용한 예시

조건부 렌더링은 로그인 상태에 따른 UI 변경이나, 데이터 로딩 상태를 처리할 때 자주 사용됩니다. 예를 들어 사용자가 로그인했을 때와 로그아웃했을 때 다르게 화면을 보여줄 수 있습니다.

function App() {
 const user = { name : "John", loggedIn : true };
 
 return (
  <div>
   {user.loggedIn ? (
    <h1>Welcome, {user.name}!</h1>
   ) : (
    <h1>로그인해주세요.</h1>
   )}
  </div>
 );
}

---

참고 강의 : 인프런-처음 만난 리액트