[React] 조건부 렌더링

✅ 조건부 렌더링

---

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다.
이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다.
React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.
if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하면 된다.
React는 현재 상태에 맞게 UI를 업데이트한다.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

사용자의 로그인 여부에 따라 위의 UserGreeting, GuestGreeting 중 하나의 Component 를 노출해야하는 상황을 가정

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

위와 같이 사용자의 로그인 여부를 판단하는 isLoggedIn prop에 따라서 다른 인사말을 렌더링 한다.
변수를 선언하고 if 를 활용하여 조건부 렌더링을 하는 방법 이외에 여러 조건을 jsx 안에서 inline 으로 처리할 수 있는 방법이 있다.

✅ 조건부 렌더링 논리연산자

---

📝 : ? 패턴

리액트 공식 문서에서 인라인 If-Else 라고 소개하는 패턴

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return (
        <React.Fragment>
            // 삼항 연산자 ' (조건) ? (참일 경우) : (거짓일 경우) ' 로 부분 조건부 렌더링 구현
            { isLoggedIn ? ( <UserGreeting /> ) : ( <GeustGreeting /> ) }
        </React.Fragment>
    );
}

단점 : ? 패턴 또한 단점이 있는데 컴포넌트를 렌더링할지 말지 결정할 때 불필요하게 null 을 반환하는 코드를 작성해야 한다.

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return (
        <React.Fragment>
            // 로그인했을 경우만 '<HelloMessage />' 를 렌더링
            { isLoggedIn ? ( <HelloMessage /> ) : null }
        </React.Fragment>
    );
}

📝 && 패턴

(선행 조건) && (후행 조건) 논리 연산자는 선행 조건이 참이어야만 후행 조건을 평가하고 후행 조건을 평가한 결과를 반환

(true && 'Hello');
// 결과 = 'Hello'

활용한 패턴

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return (
        <React.Fragment>
            { isLoggedIn && ( <HelloMessage /> ) }
        </React.Fragment>
    );
}

📝 switch case 패턴

단점 : 부분 렌더링을 구현하기 까다롭기도 하고, TypeScript 없이 JavaScript 만으로는 활용도가 떨어지기 때문에 자주 사용되는 패턴은 아니다.

function Notification(props) {
    const status = props.status;

    switch (status) {
        case 'info':
            return <Info />;
        case 'warning':
            return <Warning />;
        case 'error':
            return <Error />;
        default:
            return null;
  }
}

✦ Reference

• 조건부 렌더링