수정하기 - 삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 방법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

삼항 연산자는 JavaScript에서 조건에 따라 두 가지 값 중 하나를 선택할 수 있는 간단한 방법입니다. 이를 활용하여 CSS 클래스를 조건부로 적용하는 것은 React와 같은 프론트엔드 라이브러리에서 매우 유용하게 사용됩니다. 아래에서는 삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 방법에 대해 자세히 설명하겠습니다.           <a href='https://sangseek.com/sangseeks/기본 개념/ko'>기본 개념</a>    삼항 연산자는 다음과 같은 형식을 가집니다:    ```javascript  condition ? exprIfTrue : exprIfFalse  ```    여기서 `condition`이 참이면 `exprIfTrue`가 반환되고, 거짓이면 `exprIfFalse`가 반환됩니다. 이 구조를 활용하여 CSS 클래스를 동적으로 적용할 수 있습니다.           예제    React를 사용한 예제를 통해 설명하겠습니다. 가령, 사용자의 로그인 상태에 따라 다른 CSS 클래스를 적용하고 싶다고 가정해 보겠습니다.    ```jsx  import React from 'react';  import './App.css'; // CSS 파일을 임포트합니다.    function App() {    const isLoggedIn = true; // 로그인 상태를 나타내는 변수      return (      <div className={isLoggedIn ? 'logged-in' : 'logged-out'}>        {isLoggedIn ? 'Welcome back!' : 'Please log in.'}      </div>    );  }    export default App;  ```    위의 코드에서 `isLoggedIn` 변수가 `true`일 경우 `div` 요소에 `'logged-in'` 클래스를 적용하고, `false`일 경우 `'logged-out'` 클래스를 적용합니다. 또한, 텍스트 내용도 로그인 상태에 따라 다르게 표시됩니다.           CSS 스타일    이제 CSS 파일에서 각 클래스에 대한 스타일을 정의할 수 있습니다.    ```css  .logged-in {    background-color: green;    color: white;  }    .logged-out {    background-color: red;    color: white;  }  ```    이렇게 하면 사용자가 로그인했을 때는 초록색 배경과 흰색 글씨가 나타나고, 로그아웃 상태일 때는 빨간색 배경과 흰색 글씨가 나타납니다.           여러 클래스 적용하기    삼항 연산자를 사용하여 여러 클래스를 조건부로 적용할 수도 있습니다. 예를 들어, 사용자의 역할에 따라 추가적인 클래스를 적용할 수 있습니다.    ```jsx  function App() {    const isLoggedIn = true;    const isAdmin = false;      return (      <div className={`${isLoggedIn ? 'logged-in' : 'logged-out'} ${isAdmin ? 'admin' : ''}`}>        {isLoggedIn ? 'Welcome back!' : 'Please log in.'}      </div>    );  }  ```    위의 예제에서는 사용자가 로그인했는지 여부와 관리자인지 여부에 따라 클래스가 다르게 적용됩니다. `isAdmin`이 `true`일 경우 `'admin'` 클래스가 추가됩니다.           결론    삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 방법은 매우 간단하고 유용합니다. 이를 통해 코드의 가독성을 높이고, 다양한 상태에 따라 UI를 동적으로 변경할 수 있습니다. React와 같은 프론트엔드 라이브러리에서는 이러한 패턴이 자주 사용되므로, 익숙해지는 것이 좋습니다.