React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)
1. 컴포넌트 안에서 쓰는 if/else
컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다.
if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다.
function Component() {
if ( true ) {
return <p>참일시 노출될 HTML</p>;
} else {
return null;
}
}else 생략하는 법
return을 만나면 코드가 종료되므로 이렇게 축약 가능하다.
function Component() {
if ( true ) {
return <p>참일시 노출될 HTML</p>;
}
return null;
}2. JSX 안에서 쓰는 삼항연산자(ternary operator)
jsx 내(return 내)에서 쓸 수 있다.
조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드
function Component() {
return (
<div>
{
1 === 1
? <p>참일시 노출될 HTML</p>
: null
}
</div>
)
}삼항연산자 중첩 사용
아래는 1 === 1은 항상 참이라서 2 === 2는 검사되지 않지만, 중첩사용 방법만 보자.
그리고 이것보단 return문 바깥에 if else 쓰는게 더 나은듯?
function Component() {
return (
<div>
{
1 === 1
? <p>1 === 1는 항상 참이므로 매번 노출된다.</p>
: ( 2 === 2
? <p>참일시 ...</p>
: <p>거짓일시 ...</p>
)
}
</div>
)
}3. && 연산자로 if 역할 대신하기
js에서 &&는 양쪽이 true일 시 true를 남기고, 아닐 시 false를 남긴다.
그러나 boolean형이 아닌 자료형을 넣으면 아래와 같다.
true && '안녕'; // '안녕'
false && '안녕'; // false
true && false && '안녕'; // false자바스크립트는 &&로 연결된 값들 중 처음 등장하는 falsy 값을 찾고, 그게 아니면 마지막값을 남긴다.
원리는 아래와 같다.
1. 만약 첫 번째 피연산자가 false로 평가되는 값이면, false가 반환된다. 그리고 두 번째 피연산자는 평가되지 않고 무시된다.
2. 첫 번째 피연산자가 true로 평가되는 값이면, && 연산자는 두 번째 피연산자를 평가하고 그 결과를 반환한다.
function Component() {
return (
<div>
{
1 === 1
? <p>참이면 보여줄 HTML</p> <!-- 삼항연산자 -->
: null
}
</div>
)
}
function Component() {
return (
<div>
{ 1 === 1 && <p>참이면 보여줄 HTML</p> } <!-- &&연산자 -->
</div>
)
}위 두 예제는 동일한 역할을 한다. 위처럼 변수가 참이면 html를 뱉고 거짓이면 null을 뱉는 식의 조건부 코드를 많이 쓴다.
4. switch / case 조건문
switch는 if문을 연달아쓰는 것에 비해 코드가 줄어들고 가독성이 좋지만,
조건식에서 변수 하나만 검사할 수 있는 것이 단점이다.
function Component2(){
var user = 'seller';
switch (user){
case 'seller' :
return <h4>판매자 로그인</h4>
case 'customer' :
return <h4>구매자 로그인</h4>
default :
return <h4>그냥 로그인</h4>
}
}5. object / array 자료형 응용
경우에 따라 다른 html을 보여주고 싶은 경우, if문 여러개 혹은 삼항연산자 여러개를 작성하는 대신 이렇게 할 수 있다.
object 자료형으로 html을 담은 후 마지막에 object() 뒤에 []대괄호를 붙여 key값을 설정하여 key값이 현재상태인 자료를 남기도록 한다.
function Component() {
var 현재상태 = 'info';
return (
<div>
{
{
info : <p>상품정보</p>,
shipping : <p>배송관련</p>,
refund : <p>환불약관</p>
}[현재상태]
}
</div>
)
}위 코드를 아래처럼 변수에 저장해서 써도 된다.
var 탭UI = {
info : <p>상품정보</p>,
shipping : <p>배송관련</p>,
refund : <p>환불약관</p>
}
function Component() {
var 현재상태 = 'info';
return (
<div>
{
탭UI[현재상태]
}
</div>
)
}출처 : 코딩애플 https://codingapple.com/