[React] React에서 삼항 연산자 사용하기

안녕하세요.

이번에는 React에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다.

 

1. 삼항 연산자

• 삼항 연산자를 이용하여 React 코드 작성하기

App.js

import './App.css';
import Condition from './components/Condition';

function App() {
  return (
    <div className="App">
      <Condition />
    </div>
  );
}

export default App;

 

components/Condition.js

import { useState } from 'react';

export default function Condition() {
  const [condition, setCondition] = useState(true);

  return (
    <div>
      <button onClick={() => setCondition(!condition)}>컨디션 변경!</button>
      <br />
      <span style={{ fontSize: '100px' }}>{condition ? '👍' : '😂'}</span>
    </div>
  );
}

• condition에 true 값을 초기 값으로 입력합니다.
• 삼항 연산자에 의해서 condition이 true이면 👍 출력하고, false이면 😂 출력합니다.
• setCondition에서 (!condition)을 입력함으로써 클릭할 때마다 state가 true ⇒ false ⇒ true ⇒ false로 바뀌며 그에 따라서 출력이 변경되는 것을 볼 수 있습니다.

 

실행결과

 

 

실습코드 1

 

App.js

import './App.css';
import Ex2 from './components/Ex2';

function App() {
  return (
    <div className="App">
      <Ex2 />
    </div>
  );
}

export default App;

 

components/Ex2.js

import { useState } from 'react';

export default function Ex2() {
  const [good, setGood] = useState(0);

  return (
    <div>
      <button onClick={() => setGood(good + 1)}>
        {good <= 10 ? '👍' : '😁'}
      </button>
      <br />
      <span>{good}</span>
    </div>
  );
}

 

실행결과

 

 

실습코드 2

실습코드 1의 연장

• 여기에서 좋아요가 10이 넘으면 웃음이 1 증가하고
• 좋아요는 다시 0으로 초기화 되는 값 만들기

App.js

import './App.css';
// import Ex2 from './components/Ex2';
import Ex2Add from './components/Ex2Add';

function App() {
  return (
    <div className="App">
      {/* <Ex2 /> */}
      <Ex2Add />
    </div>
  );
}

export default App;

 

components/Ex2Add.js

 

import { useState } from 'react';

// good이 10되면 good은 다시 0
// best는 1 증가

export default function Ex2Add() {
  const [good, setGood] = useState(0);
  const [best, setBest] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setGood(good + 1);
        }}
      >
        👍
      </button>
      <button>😂</button>
      <br />
      <span>{good}</span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{good === 10 ? setGood(0) || setBest(best + 1) : best}</span>
    </div>
  );
}

실행결과

 

이상으로 React에서 삼항 연산자를 사용하는 방법에 대하여 알아보았습니다.

감사합니다.