오늘은 리액트에서 자주 사용하는 조건문의 형태에 대해 알아보도록 하겠다.
1. 컴포넌트 안에서 if문 사용하기
if문을 사용하는 방식은 다른 언어를 배워본 사람이라면 익숙한 부분일 것이다.
if(조건){
// 참일 때,
}
else{
// 거짓일 때,
}위와 같은 형태로 조건에 따라 로직을 분기 처리하며 비교적 쉬운 방법이지만 리액트의 JSX 영역 내부에선 if문 사용이 불가하다.
그렇다면 JSX영역은 어디일까?
function App(){
return(
// JSX 영역
);
}리액트 컴포넌트 내, JSX영역은 위와 같이 return 부분이라고 볼 수 있다.
해당 영역은 HTML이 작성되고 실제 화면에 노출되는 부분이라 할 수 있다.
이러한 문제를 발생시키지 않으면서 if문을 사용하려면 아래와 같이 작성하면 된다.
function App(){
if(true){
return <div>It's true</div>;
}else{
return null;
}
}return문 내부에서 조건에 따른 분기처리를 하는 것이 아니라 return에 들어가기 전에 if문 처리를 함으로써 원하는 로직을 설계할 수 있다.
2. JSX 내부에서 삼항연산자 사용하기
JSX 내부에서 조건문을 사용하는 방법도 존재한다.
- 삼항연산자를 사용하는 방법
https://velog.io/@cho876/Chapter-18.-삼항연산자
이전 챕터에서 한번 다뤘지만 한번 더 간단히 정리해보겠다.
삼항연산자는 다음과 같이 작성한다.
조건문 ? 참일 때, 실행코드 : 거짓일 때, 실행코드
조건문이 참일 경우, 왼쪽 코드가 실행되고 거짓일 경우, 오른쪽 코드가 실행된다고 보면 된다.
예제를 통해 다시 한번 확인해보자.
function App(){
return(
<div>
{
1===1 ? <div>It's True</div> : null
}
</div>
);
}
해당 코드의 경우, 1===1은 참이므로 왼쪽 코드(It's True)가 실행된다.
이렇게 JSX 내부에서 조건문을 사용하고자 한다면 삼항 연산자도 대안이 될 수 있다.
3. &&연산자로 대신하기
자바스크립트에는 &&연산자가 있다.
- 일반적인 언어
1. true && true > true
2. true && false > false하지만 자바스크립트에서 true/false가 아니라 자료형을 넣게 되면 다음과 같이 처리된다.
1. true && '참' > '참'
2. false && '거짓' > false이는 && 기호를 중첩하여 사용하면 첫번째 falsy 값을 뱉어내고 그렇지 않다면 맨 마지막 값을 뱉는 원리라고 이해하면 된다.
리액트에선 이러한 현상을 응용하여 조건문을 조금 더 간략히 사용할 수 있다.
예제를 통해 알아보자.
function App(){
return(
<div>
{
1===1 && <div>It's True</div>
}
</div>
)
}해당 예시를 실행시키게 되면 It's True라는 문구가 출력되는 것을 확인할 수 있다.
4. 마무리
이렇듯 우리는 리액트에서 조건문을 사용할 수 있는 방법이 다양하게 존재한다.
다루진 않았지만 case나 switch문을 사용하는 방법도 있기 때문에 상황에 맞는 가장 효율적인 형태를 골라 처리한다면 코드가 훨씬 깔끔해질 수 있을 것이라 생각된다.
전체 소스 git 링크
https://github.com/cho876/React/tree/master/chapter20
