[React]리액트에서 자주쓰는 if문 작성패턴 5개

1. 컴포넌트 안에서 쓰는 if/else

 

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다.

우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능합니다.

<div> if (어쩌구) {저쩌구} </div> 이게 안된다는 소리입니다.

그래서 보통 return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용합니다. 

 

 

 

 

 

 

2. JSX안에서 쓰는 삼항연산자 

 

영어로 간지나게 ternary operator 라고 합니다.

조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

이 형식에 맞춰 쓰면 끝입니다.

 

 

 

삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용합니다.

 

 

 

 

 

 

3. && 연산자로 if 역할 대신하기

 

html 조건부로 보여줄 때 이런 경우가 많습니다.

"만약에 이 변수가 참이면 <p></p>를 이 자리에 뱉고 참이 아니면 null 뱉고"

UI만들 때 이런거 매우 자주 씁니다. 

이걸 조금 더 쉽게 축약할 수 있습니다. && 연산자를 쓰면 됩니다.

 

 

그래서 위의 예제 두개는 동일한 역할을 합니다.

밑의 예제를 보시면 && 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있습니다.

이 때, 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남습니다.

왼쪽 조건식이 false면 false가 남습니다.

(false가 남으면 HTML로 렌더링하지 않습니다)

 

 

아무튼 "만약에 이 변수가 참이면 <p></p>를 이 자리에 뱉고 참이 아니면 null 뱉고"

이런 상황에서 자주 쓸 수 있는 간단한 조건문입니다.

 

 

 

 

 

 

 

4. switch / case 조건문

 

이것도 기본 문법인데 if문이 중첩해서 여러개 달려있는 경우에 가끔 씁니다.

 

 

▲ if문을 저렇게 연달아 여러개 써야되는 상황들이 있으면 자바스크립트 switch 문법을 이용하면 괄호를 조금 더 줄일 수 있습니다. 

 

 

 

 

1. switch (검사할변수){} 이거부터 작성하고

2. 그 안에 case 검사할변수가이거랑일치하냐 : 를 넣어줍니다.

3. 그래서 이게 일치하면 case : 밑에 있는 코드를 실행해줍니다.

4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일합니다.

 

장점은 if문 연달아쓸 때 코드가 약간 줄어들 수 있는데

조건식란에서 변수하나만 검사할 수 있다는게 단점입니다. 

 

 

 

 

 

 

 

5. object/array 자료형 응용 

"경우에 따라서 다른 html 태그들을 보여주고 싶은 경우"

if문 여러개 혹은 삼항연산자 여러개를 작성해야겠죠? 근데 이렇게 작성할 수도 있습니다.

 

 

 

예를 들면 쇼핑몰에서 상품설명부분을 탭으로 만든다고 합시다.

탭이 뭐냐면 그냥 경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주고 싶은겁니다.

 

현재 state가 info면 <p>상품정보</p>

현재 state가 shipping이면 <p>배송정보</p>

현재 state가 refund면 <p>환불약관</p>

이런걸 보여주자는겁니다.

 

 

일단 state를 만들어놓고 if문으로 state를 검사하는 문법을 써야할 것 같지만

이번엔 if문이 아니라 자바스크립트 object 자료형에 내가 보여주고 싶은 HTML을 다 담습니다.

 

 

▲ 원래 JSX 상에서 html 태그들은 저렇게 object에 담든, array에 담든 아무 상관없습니다.

암튼 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음

마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는겁니다.

 

그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있습니다.

만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여질 것이고

만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여지겠죠? 

 

 

 

 

혹은 변수에 저장해서 써도 됩니다.

 

 

 

 

 

 

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>