반응형
리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다.
1. JSX 내에서 if 문
function Component() {
return (
<section>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</section>
)
}
2. JSX 내에서 switch 문
function Component() {
return (
<div>
{(() => {
switch (status) {
case 'info':
return <Info text={text} />;
case 'warning':
return <Warning text={text} />;
case 'error':
return <Error text={text} />;
default:
return null;
}
})()}
</div>
)
}
3. JSX 내에서 object 구조 사용하기
switch 문과 비슷한 상황에서 사용할 수 있는데, switch 문보다 좀 더 깔끔한 느낌이 든다.
function Component() {
const [phase, setPhase] = useState(1)
return (
<div>
{
{
1 : <p>1단계</p>,
2 : <p>2단계</p>,
3 : <p>3단계</p>
}[phase]
}
</div>
)
}
반응형
'웹_프론트엔드 > React' 카테고리의 다른 글
[리액트] gh-pages 배포 후 새로고침시 404 오류 (1) | 2024.03.17 |
---|---|
[리액트] react-daum-postcode 우편번호 검색 컴포넌트 예시 (0) | 2023.11.23 |
[리액트] 컴파운드 컴포넌트 패턴으로 작성하는 모달 컴포넌트 (+ dialogue 태그 활용) (0) | 2023.09.18 |
리액트 JSX/TSX에서 switch 문법 사용하기 (0) | 2023.02.03 |
[React.ts] props로 setState 넘길 때 타입 지정하는 방법 (0) | 2022.12.19 |