[React] 조건부 렌더링

리액트에서 조건부 렌더링은 특정 조건에 따라 컴포넌트나 요소를 보여주거나 숨기는 것을 의미한다.

if 문을 사용한 조건부 렌더링

가장 기본적인 방법으로, if 문을 사용하여 특정 조건에 따라 컴포넌트의 렌더링 여부를 결정할 수 있다. 조건을 충족하지 않을 때는 null 을 반환하여 아무것도 렌더링하지 않도록 할 수도 있다.

    function Greeting({ isLoggedIn }) {
    	if (isLoggedIn) {
    		retrun <h1>Welcome back!</h1>;
    	} else {
    		return <h1>Please sign in.</h1>;
    	}
    }

위 코드에서 isLoggedIn 이 true 이면 “Welcome back!”이, false 면 “Please sign in.`이 렌더링 된다.

---

삼항 연산자 (? :)를 사용한 조건부 렌더링

간단한 조건부 렌더링에 많이 사용되며 if 문보다 간결하게 표현할 수 있다.

    function Greeting({ isLoggedIn }) {
      return (
        <h1>
          {isLoggedIn ? "Welcome back!" : "Please sign in."}
        </h1>
      );
    }
    

결과는 1번 예시와 같이 isLoggedIn이 true면 "Welcome back!"이, false면 "Please sign in."이 렌더링된다.

---

&& 논리 연산자를 사용한 조건부 렌더링

단일 조건이 참일 때만 특정 요소를 렌더링하려면 && 논리 연산자를 사용할 수 있다. 조건이 참일 때만 해당 컴포넌트를 렌더링하고, 거짓일 때는 아무것도 렌더링하지 않는다.

    function Notification({ hasUnreadMessages }) {
      return (
        <div>
          <h1>Hello!</h1>
          {hasUnreadMessages && <p>You have unread messages.</p>}
        </div>
      );
    }
    

여기서 hasUnreadMessages가 true이면 "You have unread messages."가 표시되고, false이면 아무것도 표시되지 않을 것이다.

---

조건 ? 표현식 : null 을 사용한 조건부 렌더링

삼항 연산자를 사용하되, 조건이 거짓일 때 null 을 반환하여 아무것도 렌더링하지 않는 방법이다.

    function UserStatus({ isLoggedIn }) {
      return (
        <div>
          <h1>Welcome to our site!</h1>
          {isLoggedIn ? <p>Thank you for logging in.</p> : null}
        </div>
      );
    }
    

위 코드에서 isLoggedIn이 true일 때만 "Thank you for logging in." 메시지가 표시된다. 조건이 false면 null을 반환하므로 아무것도 렌더링되지 않는다.

---

switch 문을 활용한 조건부 렌더링

switch 문을 사용하면 여러 조건을 명확하게 구분하여 렌더링할 수 있다. 예를 들어, 사용자 상태에 따라 다른 메시지를 표시하고 싶을 때 유용하다.

    function UserStatus({ status }) {
      let message;
    
      switch (status) {
        case "admin":
          message = <p>You have administrator access.</p>;
          break;
        case "member":
          message = <p>Welcome back, valued member!</p>;
          break;
        case "guest":
          message = <p>Please sign up to enjoy more features.</p>;
          break;
        default:
          message = <p>Unknown status.</p>;
      }
    
      return (
        <div>
          <h1>User Status</h1>
          {message}
        </div>
      );
    }
    

위 예시에서 status 값에 따라 다른 메세지가 렌더링되는 것을 볼 수 있다.

---

객체 리터럴을 이용한 조건부 렌더링

객체를 사용해 조건별로 렌더링할 내용을 미리 정의해두고, 객체에서 조건에 맞는 요소를 선택하는 방식이다. 이 방법은 조건이 많은 경우 코드 가독성을 높이는 데 효과적이다.

    function StatusMessage({ status }) {
      const messages = {
        admin: <p>You are an admin.</p>,
        member: <p>Welcome, member!</p>,
        guest: <p>Please log in to access more features.</p>,
      };
    
      return (
        <div>
          <h1>Status</h1>
          {messages[status] || <p>Unknown status</p>}
        </div>
      );
    }
    

이 코드에서는 status 값에 맞는 메시지를 message 객체에서 바로 찾아서 렌더링한다.