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>)
}
})()}
'WEB > REACT' 카테고리의 다른 글
[REACT] 부모 컴포넌트로 자식 컴포넌트의 state 전달 (0) | 2022.03.14 |
---|---|
지도, 우편주소, 구글로그인, 이미지 삽입, 토큰 로그인, 페이지네이션, qr 인식 관련 api 링크 모음 (0) | 2022.02.16 |
Progressive Web Apps (PWA) (0) | 2022.02.16 |
[REACT] REACT 시작하기 & JSX (0) | 2021.10.03 |
댓글