React JSX 조건부 렌더링

 

https://velog.io/@hidaehyunlee/React-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-2-JSX%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%AC%B8-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%A0%8C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0

[React 리팩토링 #2] JSX에서 조건문 사용해 렌더링하기

 

위 블로그의 자료를 공부한 내용입니다.

 

왜 조건부 렌더링에 대해 공부하게 되었나?

우선 상황에 맞게 다른 컴포넌트를 렌더링해야했습니다. 하지만 저는 삼항연산자밖에 몰랐습니다. 정말 잘하시는분께 배울 수 있는 기회가 생겨 조건부 렌더링중 즉시실행함수를 사용하여 If , switch 문을 사용할 수 있다는 것을 알게 되었습니다.

이번계기로 한번 정리를 해야겠다 싶어서 글을 남깁니다. (너무너무 임팩트가 컸습니다. 이것때매 하루를 고민했었거든요.)

 

 

조건부 렌더링

1)  삼항연산자

삼항연산자는 `True` 일 경우 `False` 일때 결과값이 다른 경우 사용한다.

중첩으로 사용하면 더 많은 케이스를 나눌 수 있지만, 콜백함수처럼 코드가 지저분해지기 때문에 후에 설명할 즉시실행함수의 switch문을 사용하는 것이 더 보기좋은 코드가 될 수 있다.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [state, setState] = useState(true);
  return (
    <div className="App">
    {
      state 
      ?<div>true</div> 
      : <div>false</div>
    }
    </div>
  );
}

삼항연산자는 css나 자바스크립트 객체 내부에 적용할 수 도있다.

backgroundColor={chatColor == 'myList' ? '#ffe576' : 'white'}

 

2) AND 연산자

솔직히 AND 연산자 사용해서 렌더링하는 것은 몰랐다.

if 문을 사용한 효과를 얻을 수 있다.

나는 보통 삼항연산자를 사용해서 ? <원하는 컴포넌트> : <></>

저런식으로 렌더링 시켰는데 반성하게 된다.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [state, setState] = useState(true);
  return (
    <div className="App">
    {
      state &&  <div>true</div> 
    }
    </div>
  );
}

 

3) IF문 

복잡한 조건문은 JSX 외부에서 작성하는 것이 권장되지만, IIFE(즉시실행함수)를 사용하면 JSX 내부에서도 if문을 작성할 수 있다.

이제라도 알게되어서 다행이다. 앞으로 많이 써먹을 것 같다.

import React from 'react';

export default function App {
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
}

if문이 아닌 switch문으로 사용할 수도 있다.

{(function () {
        switch (chatState) {
          case 'chatList':
            return <ChatList />;
          case 'myList':
            return <MyChatList />;
          case 'chat':
            return <Chat></Chat>;
          default:
            return null;
        }
      })()}

 

화살표 함수를 사용할 수 도 있다.

{(() => {
        switch (chatState) {
          case 'chatList':
            return <ChatList />;
          case 'myList':
            return <MyChatList />;
          case 'chat':
            return <Chat></Chat>;
          default:
            return null;
        }
      })()}

 

인사이트를 넓혀주신 동영님께 너무 감사하다고 말씀드리고 싶다.