[React] 초급 개념5 - 조건부 렌더링 (삼항 연산자, && 연산자 활용)

리액트에서는 조건부 렌더링(Conditional Rendering) 을 통해 특정 조건에 따라 컴포넌트를 표시하거나 숨길 수 있습니다. 이를 위해 삼항 연산자(? :)와 && 연산자를 주로 사용합니다.

---

 

 

🔸 1. 조건부 렌더링이란?

 

✅ 특정 조건에 따라 컴포넌트나 요소를 렌더링하는 기법

• if 문을 사용한 렌더링
• 삼항 연산자 (? :) 를 사용한 렌더링
• && 연산자 를 활용한 렌더링

리액트에서는 JSX 내부에서 if-else 문을 직접 사용할 수 없기 때문에 삼항 연산자와 && 연산자가 널리 활용됩니다.

---

 

 

🔸 2. 삼항 연산자를 활용한 조건부 렌더링

삼항 연산자는 조건 ? 참일 때 : 거짓일 때 형식으로 작성됩니다.

 

 

✅ 예제: 로그인 상태에 따른 UI 변경

function UserGreeting(props) {
  return <h1>환영합니다, {props.username}님!</h1>;
}

function GuestGreeting() {
  return <h1>로그인이 필요합니다.</h1>;
}

function Greeting(props) {
  return props.isLoggedIn ? <UserGreeting username="Alice" /> : <GuestGreeting />;
}

function App() {
  return <Greeting isLoggedIn={true} />;
}

 

📌 설명:

• isLoggedIn이 true이면 UserGreeting을, false이면 GuestGreeting을 렌더링합니다.
• JSX 내부에서는 if-else 문을 직접 사용할 수 없으므로 삼항 연산자를 활용합니다.

---

 

 

🔸 3. && 연산자를 활용한 조건부 렌더링

&& 연산자는 조건 && 실행할 코드 형태로 작성됩니다. 조건이 true일 때만 실행되며, false이면 아무것도 렌더링하지 않습니다.

 

✅ 예제: 알림 메시지 표시

function Notification(props) {
  return (
    <div>
      {props.unreadMessages.length > 0 && (
        <p>새로운 메시지가 {props.unreadMessages.length}개 있습니다.</p>
      )}
    </div>
  );
}

function App() {
  return <Notification unreadMessages={["안녕하세요", "새 소식이 있습니다"]} />;
}

 

📌 설명:

• unreadMessages.length > 0이 true일 경우, p 태그가 렌더링됩니다.
• false일 경우 아무것도 렌더링되지 않습니다.

💡 주의:

• false, null, undefined, 0은 렌더링되지 않지만, 0을 렌더링해야 할 경우 삼항 연산자를 사용하는 것이 좋습니다.

---

 

 

🔸 4. 조건부 렌더링 최적화

 

 

✅ 컴포넌트 자체에서 조건 분기 처리

function Button(props) {
  if (!props.isVisible) return null;
  return <button>클릭하세요</button>;
}

 

📌 설명:

• isVisible이 false이면 null을 반환하여 아무것도 렌더링하지 않습니다.

 

 

✅ 조건부 렌더링을 함수로 처리

function renderMessage(isLoggedIn) {
  return isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인해주세요.</h1>;
}

function App() {
  return <div>{renderMessage(true)}</div>;
}

 

📌 설명:

• 별도의 함수에서 조건을 분기하면 JSX가 더 간결해집니다.

---

 

 

🔸 5. 개념 요약

✅ 삼항 연산자 (? :) : 조건에 따라 두 가지 요소를 선택하여 렌더링
✅ && 연산자 : 조건이 true일 때만 특정 요소를 렌더링
✅ 컴포넌트 내부에서 조건 분기 (if) : 불필요한 렌더링을 방지
✅ 별도 함수에서 조건 처리 : 코드 가독성을 높이고 유지보수성을 개선

---