반응 조건부 렌더링

상황에 따라 React에서 조건부 렌더링을 수행하는 몇 가지 방법이 있습니다. 이 기사에서는 React의 조건부 렌더링 구성 요소에 대한 몇 가지 실용적인 접근 방식을 볼 것입니다.

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

항목 목록이 있고 목록이 존재할 때만 표시하려는 경우 다음과 같이 렌더링할 수 있습니다.

const App = ({ list }) => {
  if (!list) {
    return null
  }

  return (
    <ul>
      {list.map(item => (
        <li key={item.name}>{item.name}</li>
      ))}
    </ul>
  )
}

export default App

아래와 같이 다른 방식으로 작성할 수도 있습니다.

const App = ({ list }) => {
  if (list) {
    return (
      <ul>
        {list.map(item => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    )
  }

  return null
}

export default App

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

위의 예에서 목록이 비어 있을 때 사용자에게 메시지를 표시하려면 if-else 문을 사용하여 메시지를 표시할 수 있습니다.

const App = ({ list }) => {
  if (!list) {
    return null
  }
  if (list.length === 0) {
    return <div>List is empty</div>
  } else {
    return (
      <ul>
        {list.map(item => (
          <li key={item.name}>{item.name}</li>
        ))}
      </ul>
    )
  }
}

export default App

가독성을 높이기 위해 if 문을 사용하여 위의 예를 작성할 수도 있습니다.

const App = ({ list }) => {
  if (!list) {
    return null
  }
  if (list.length === 0) {
    return <div>List is empty</div>
  }

  return (
    <ul>
      {list.map(item => (
        <li key={item.name}>{item.name}</li>
      ))}
    </ul>
  )
}

export default App

삼항 연산자를 사용한 조건부 렌더링

ternary operator을 사용하여 다음과 같이 조건부 렌더링을 단순화할 수 있습니다.

const App = ({ isLoggedIn }) => {
  return isLoggedIn ? <button>Logout</button> : <button>Login</button>
}

export default App

여러 줄의 요소를 렌더링해야 하는 경우 괄호() 안에 줄 바꿈할 수 있습니다.

const App = ({ isLoggedIn }) => {
  return isLoggedIn ? (
    <>
      <ShowWelcomeMessage />
      <button>Logout</button>
    </>
  ) : (
    <button>Login</button>
  )
}

export default App

단락 && 연산자를 사용한 조건부 렌더링

특정 조건이 충족되었을 때 무언가를 표시하고 조건이 실패했을 때 아무 것도 렌더링하고 싶지 않을 때 && 연산자가 가장 좋은 친구입니다.

const App = ({ isLoading }) => {
  return isLoading && <div>Loading...</div>
}

export default App

&&와 함께 여러 조건을 묶을 수 있습니다.

const App = ({ isLoggedIn, balance }) => {
  return isLoggedIn && balance === 0 && <div>Please recharge your account</div>
}

export default App

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

표현식에 대해 두 개 이상의 출력이 있는 경우 if-else 래더 대신 switch 문을 사용할 수 있습니다.

const App = ({ status, message }) => {
  switch (status) {
    case "info":
      return <Info message={message} />
    case "warning":
      return <Warning message={message} />
    case "error":
      return <Error message={message} />

    default:
      return null
  }
}

export default App

JSX 내부에 switch 문을 포함하려면 즉시 호출되는 함수 표현식( IIFEs )을 사용할 수 있습니다.

const App = ({ status, message }) => {
  return (
    <div>
      {(() => {
        switch (status) {
          case "info":
            return <Info message={message} />
          case "warning":
            return <Warning message={message} />
          case "error":
            return <Error message={message} />

          default:
            return null
        }
      })()}
    </div>
  )
}

export default App

다중 조건부 렌더링 사용

아래와 같이 JavaScript 객체를 사용하여 위의 스위치 케이스 예제를 작성할 수 있습니다.

const App = ({ status, message }) => {
  return (
    <div>
      {
        {
          info: <Info message={message} />,
          warning: <Warning message={message} />,
          error: <Error message={message} />,
        }[status]
      }
    </div>
  )
}

export default App

여기서 상태는 정보, 경고 및 오류의 3가지 값 중 하나를 가질 수 있습니다. 상태 값에 따라 해당 구성 요소가 렌더링됩니다.

중첩 조건부 렌더링

삼항 연산자를 사용하여 여러 조건을 중첩할 수 있습니다.

const App = ({ isLoggedIn, posts }) => {
  return (
    <div>
      {isLoggedIn ? (
        posts.length === 0 ? (
          <AddPost />
        ) : (
          <ShowPosts />
        )
      ) : (
        "Please login"
      )}
    </div>
  )
}

export default App

여기에서 사용자가 로그인했는지 확인하고 로그인한 경우 사용자에게 게시물이 있는지 확인합니다. 게시물이 없으면 추가하도록 요청하고 게시물이 있으면 게시물을 표시합니다. 사용자가 로그인하지 않은 경우 로그인을 요청합니다.

이러한 유형의 중첩은 가독성을 저해하므로 권장하지 않습니다. 중첩 조건이 있는 경우 항상 여러 구성 요소로 분할합니다.

const App = ({ isLoggedIn, posts }) => {
  return <div>{isLoggedIn ? <Posts posts={posts} /> : "Please login"}</div>
}

const Posts = ({ posts }) => {
  return posts.length === 0 ? <AddPost /> : <ShowPosts />
}