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

Q1: 삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 기본 문법은 어떻게 되나요?
A1: 삼항 연산자는 `(조건) ? 'true일 때 클래스명' : 'false일 때 클래스명'` 형태로 사용합니다. 예를 들어, `const className = isActive ? 'active' : 'inactive';`처럼 작성합니다.

Q2: React에서 삼항 연산자를 사용해 조건부 CSS 클래스를 적용하려면 어떻게 하나요?
A2: JSX 내에서 `className` 속성에 삼항 연산자를 적용할 수 있습니다. 예:
```jsx

```

Q3: 여러 클래스를 삼항 연산자와 같이 사용할 수 있나요?
A3: 네, 템플릿 리터럴이나 문자열 연결로 조합할 수 있습니다. 예:
```jsx

```

Q4: 삼항 연산자로 클래스명을 조건부로 추가만 하려면 어떻게 작성하나요?
A4: 거짓일 때 빈 문자열을 반환하여 기본 클래스를 유지할 수 있습니다. 예:
```jsx
```

Q5: 삼항 연산자 대신 논리 연산자를 사용하는 방법과 차이는?
A5: `isActive && 'active'`는 참일 때 ‘active’를 반환하지만 거짓일 때 `false`를 반환해 의도치 않은 값이 클래스에 포함될 수 있습니다. 삼항 연산자는 명확하게 두 상태 모두 값을 지정할 수 있어 안전합니다.

Q6: 일반 자바스크립트에서도 삼항 연산자 활용해 조건부 CSS 클래스를 적용할 수 있나요?
A6: 네, DOM 조작 시 예를 들어:
```js
element.className = isActive ? 'active' : 'inactive';
```
처럼 조건에 따라 클래스를 설정할 수 있습니다.

Q7: 삼항 연산자를 너무 많이 중첩하면 어떤 문제가 있나요?
A7: 가독성이 떨어져 유지보수가 어려워집니다. 복잡할 경우 `classnames` 같은 라이브러리 사용을 권장합니다.

---

요약: 삼항 연산자는 `(조건) ? '클래스1' : '클래스2'` 형태로 CSS 클래스 문자열을 조건부로 할당할 때 간단히 사용하며, React JSX나 일반 JS 모두에서 널리 쓰입니다.

삼항 연산자는 JavaScript에서 조건에 따라 두 가지 값 중 하나를 선택할 수 있는 간단한 방법입니다.

이를 활용하여 CSS 클래스를 조건부로 적용하는 것은 React와 같은 프론트엔드 라이브러리에서 매우 유용하게 사용됩니다.

아래에서는 삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 방법에 대해 자세히 설명하겠습니다.

기본 개념 삼항 연산자는 다음과 같은 형식을 가집니다: ```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 (

{isLoggedIn ? 'Welcome back!' : 'Please log in.'}

); } 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 (

{isLoggedIn ? 'Welcome back!' : 'Please log in.'}

); } ``` 위의 예제에서는 사용자가 로그인했는지 여부와 관리자인지 여부에 따라 클래스가 다르게 적용됩니다.

`isAdmin`이 `true`일 경우 `'admin'` 클래스가 추가됩니다.

결론 삼항 연산자를 사용하여 CSS 클래스를 조건부로 적용하는 방법은 매우 간단하고 유용합니다.

이를 통해 코드의 가독성을 높이고, 다양한 상태에 따라 UI를 동적으로 변경할 수 있습니다.

React와 같은 프론트엔드 라이브러리에서는 이러한 패턴이 자주 사용되므로, 익숙해지는 것이 좋습니다.