[REACT] 변수를 사용한 JSX 조건부 (IF문) 렌더링

JSX(JavaScript + Xml) 내부에서는 if문을 쓸 수 없다. 

 

쓸 수 있는 방법은

1. 삼항 연산자 사용

2. and 연산자 사용

3. 즉시발동함수 사용

이다. 

 

1) 삼항 연산자 사용

가장 보편적으로 사용되는 방식이다.

조건 ? true일(조건을 만족할) 때 실행할 것 : false일 때 실행할 것

의 문법이다.

import React from 'react';

const Hello = () {
  const yes = 1212;
  return (
    yes === 1212 ? <div>보여줄 내용</div> : null
  );
}

export default Hello;

false일 경우 아무것도 안 보여주고 싶다면 null, 다른 걸 보여주고 싶다면 그걸 넣으면 된다.

이때 백엔드 내용을 변수로 받아올 때는 {}로 감싸줘야 하는데, 

{info.isTrue} ? <img src={defaultImg}></img> : null

이런 식으로 하자 화면에 ? : null이 그대로 노출되고 제대로 적용이 안 됐다. 이때, info.isTrue는 info로 받아온 내용의 isTrue라는 bool형에 접근하는 것이다. 

{}로 감싸준 변수 내용은 true/false로 반환되고 ? 이미지 : null 이런 식으로 나올 수밖에 없는, 따로 노는 상황이다. 

그래서 이것저것 바꿔봤는데, 

{info.isTrue ? <img src={defaultImg}></img> : null}

이렇게 하니까 잘 작동했다. 

조건문 전체를 감싸줘야 되는 것이었다! 

info.isTrue가 true면 이미지를 반환해주고, 아니면 null을 반환하는 조건식이 정상적으로 작동된다.

 

 

2) and 연산자 사용

사용하는 조건문이 참/거짓일 경우 &&로 조건부 렌더링을 해주는 것이 보기 더 깔끔하고 짧아진다.

{info.isTrue && (<img src={defaultImg}></img>)}

이렇게 사용하면 된다. 

 

 

3) 즉시발동함수 사용

es6 문법인 화살표 함수를 활용해서도 할 수 있다. 조건이 복잡한 경우 사용하면 된다. 

{(() => {
  if (info.isTrue){
    return (<img src={defaultImg}></img>)
  } else {
    return (<div>none</div>)
  }
})()}

 

 

참고

https://myhappyman.tistory.com/60

React - 리액트 JSX 조건문 사용하기

이 블로그의 일반 조건문을 변수를 활용한 조건문으로 변형해 사용하였다.