[React] (리액트 공부하기 22) 조건부 렌더링

1. 조건부 렌더링이란?

• 조건부 렌더링은 말 그대로 조건에 따라 렌더링할 내용을 다르게 표시하는 것을 말한다.
• 예를 들어, 사용자가 로그인을 했는지 여부에 따라 화면에 다른 메시지를 보여주는 경우를 생각해 보자.
• 조건이 true라면 특정 컴포넌트를 보여주고, 조건이 false라면 다른 컴포넌트를 보여주는 방식이다.
• 특정 조건(예: 로그인 여부)에 따라 UI를 다르게 표시하는 기술이다.
• 조건에 따라 컴포넌트나 내용을 렌더링하거나 숨길 수 있다.

---

2. 예제 코드 분석

function UserGreeting(props) {
  return <h1>다시 오셨군요!</h1>;
}

function GuestGreeting(props) {
  return <h1>회원가입을 해주세요.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

코드의 역할:

1. UserGreeting 컴포넌트:

• 로그인한 사용자에게 보이는 메시지

2. GuestGreeting 컴포넌트:

• 로그인하지 않은 사용자에게 보이는 메시지

3. Greeting 컴포넌트

• props.isLoggedIn 이라는 값을 통해 사용자가 로그인을 했는지 확인
• isLoggedIn이 true라면 UserGreeting을 렌더링하고,
• isLoggedIn이 false라면 GuestGreeting을 렌더링한다.

---

3. 조건부 렌더링 흐름

렌더링 흐름을 이해하기 쉽게:

1. isLoggedIn 값이 true라면:

• UserGreeting 컴포넌트가 호출 된다.
• 결과적으로 "다시 오셨군요!"라는 메시지가 화면에 보인다.

2. isLoggedIn 값이 false라면:

• GuestGreeing 컴포넌트가 호출 된다.
• 결과적으로 "회원가입을 해주세요."라는 메시지가 화면에 보인다.

---

4. Truthy와 Falsy

자바스크립트에서 조건문에서 사용하는 값은 Truthy(참으로 평가되는 값) 또는 Falsy(거짓으로 평가되는 값)로 나뉜다.

Truthy 값:

• 조건문에서 참(True)으로 평가되는 값
• 예시: true, 숫자1, "문자열", 빈 배열 [], 빈 객체 {} 등.

Falsy 값:

• 조건문에서 거짓(False)으로 평가되는 값
• 예시: false, 0, null, undefined, NaN, 빈 문자열 "".

예제 코드:

if (1) {
  console.log("이 값은 truthy입니다.");
}
if (0) {
  console.log("이 값은 falsy입니다.");
}

---

5. 조건부 렌더링 활용 방법

1. if-else를 이용한 조건부 렌더링:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

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

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

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

• 조건이 true일 때만 특정 내용을 렌더링

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div>경고!</div>;
}

function Page() {
  const [showWarning, setShowWarning] = useState(true);
  
  return (
    <div>
      <WarningBanner warn={showWarning} />
	  <button onClick={() => setShowWarning(!showWarning)}>
        {showWarning ? "감추기" : "보이기"}
	  </button>
	</div>
  );
}