조건부 렌더링

HYUK·2023년 3월 19일
0

react

목록 보기
15/15

1. 조건부 렌더링?

조건부 렌더링(Conditional rendering)은 React나 Vue.js와 같은 프론트엔드 라이브러리에서 사용되는 용어로, 조건에 따라 특정 컴포넌트나 UI 요소를 렌더링할지 여부를 결정하는 것을 의미한다.

예를 들어, 다음은 React에서 조건부 렌더링을 사용한 예시이다.

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  function handleLogout() {
    setIsLoggedIn(false);
  }

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={handleLogout}>Logout</button>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

위 코드에서는 isLoggedIn이 true일 경우 "Logout" 버튼이 렌더링되고, false일 경우 "Login" 버튼이 렌더링된다. 이렇게 상태나 props 등의 조건에 따라 특정 요소를 렌더링할지 말지 결정하는 것이 조건부 렌더링입니다.

조건부 렌더링은 UI의 상태나 상황에 따라 다른 요소를 보여주어야 하는 경우에 유용하게 사용된다. 이를 통해 보다 동적이고 유연한 UI를 구현할 수 있다.

profile
step by step

0개의 댓글