React / 조건부 렌더링

조건부 렌더링

 

리액트에서는 단순 값만이 아닌 HTML 구조나 디자인도 당연히 바꿔서 리렌더링 할 수도 있다.

조건부 렌더링으로 할 수 있는데, 이는 특정 조건에 따라 다른 컴포넌트나 요소를 렌더링하는 것으로, 조건문이나 논리 연산자를 활용할 수 있다.

 

 

다음은 특정 감정 버튼을 누르면 그 감정의 표정을 화면에 렌더링시키는 코드다. 

setMood()로 감정의 상태를 변경해주고 있는데, 이 때 세가지 방법으로 리렌더링해줄 수 있다.

 

App.jsx

function App() {
  const [mood, setMood] = useState('Normal');

  return (
    <>
      <Face mood={mood} />
      <Face2 mood={mood} />
      <Face3 mood={mood} />
      <div
        className={
          mood === 'Happy' ? 'happy' : mood === 'Normal' ? 'normal' : 'sad'
        }>
        기분 : {mood}
      </div>
      <div>
        <button onClick={() => setMood('Happy')} value="happy">
          happy
        </button>
        <button onClick={() => setMood('Normal')} value="normal">
          normal
        </button>
        <button onClick={() => setMood('Sad')} value="sad">
          sad
        </button>
      </div>
    </>
  );
}

 

 

 

방법 1. if문 사용하기

// 1. if문으로 리턴하는 jsx문 바꿔주기
function Face({ mood }) {
  if (mood === 'Happy') {
    return <div>😄</div>;
  } else if (mood === 'Normal') {
    return <div>😶</div>;
  } else if (mood === 'Sad') {
    return <div>😭</div>;
  }
}

 

 

 

방법 2. 삼항연산자 사용하기

가장 많이 쓰는 방법이다.

다만 가독성을 위해 분기가 3가지 이상이라 중첩해서 사용해야 할 경우 권장하지는 않고 있다.

// 2. 삼항연산자 사용하기
function Face2({ mood }) {
  return (
    <>
      {mood === 'Happy' ? (
        <div>😄</div>
      ) : mood === 'Normal' ? (
        <div>😶</div>
      ) : (
        <div>😭</div>
      )}
    </>
  );
}

 

삼항연산자로 className을 조건에 따라 변경해줄 수도 있다. (if문은 jsx내에서는 직접 사용할 수 없다.)

  <div
    className={
      mood === 'Happy' ? 'happy' : 
      mood === 'Normal' ? 'normal' : 'sad'
    }>
    기분 : {mood}
  </div>

 

 

 

 

방법 3. 논리연산자 && 사용하기

// 3. 논리 연산자
function Face3({ mood }) {
  return (
    <>
      {mood === 'Happy' && <div>😄</div>}
      {mood === 'Normal' && <div>😶</div>}
      {mood === 'Sad' && <div>😭</div>}
    </>
  );
}