[React] 조건부연산자(=삼항연산자)

🤔 삼항연산자란?

리액트에서는 if 구문을 걸 때 조건부연산자를 사용한다. 우리는 조건부연산자를 삼항연산자라고도 부른다.

(물론 컴포넌트 내에서 If- else 구문으로 만들어도 된다.)

 

사용방법

[조건식 ? 참일 때 : 거짓일 때]

 

 

예시: 사용자 로그인에 대한 참 거짓 판별

const Login = true;
const message = Login ? '환영합니다!' : '로그인이 필요합니다.';


console.log(message); 
>> 환영합니당!

 

(1) Login 이 참이면 환영합니다를 출력하고 거짓이면 로그인이 필요하다는 message 변수를 설정해주었다.

(2) 이때 Login 이 true 로 설정되어있기 때문에

(3) message 를 출력하면 환영한다는 말이 나온다.

 

💡 논리연산자와 함께 사용하기 - AND (&&) 연산자 / OR ( || ) 연산자

 

여기 버튼 UI 에 주목해보자. 사용자가 약관을 모두 동의해야만 동의버튼을 누를 수 있도록 코드를 짜보았다.

 

처음에는 사용자가 아무것도 선택하지 않았기 때문에 칙칙한 색깔이다.

 

두가지만 선택을 해도 여전히 버튼을 클릭할 수 없고, 버튼은 여전히 칙칙한 색깔이다.

 

 

세가지를 다 눌러야만 버튼에도 검정색으로 색깔이 들어오도록 코드를 짰다.

 

코드설명

 

위의 코드에 대해 설명을 해보자면

style={terms1 && terms2 && terms3 ? styles.button : styles.buttonDisabled}
      onPress={handleSubmit(onSubmit)}
      disabled={!terms1 || !terms2 || !terms3}

 

특정 동작시의 버튼 스타일을 입히기 위하여 and 와 or 연산자를 함께 사용했다.

각 항목(terms1, terms2, terms3) 이 세개 가 다 눌리면? button 이라는 스타일을 입혀주고, 그렇지 않으면 buttonDisabled 라는 칙칙한 색깔을 입혀준다.

 

여기서는 disabled 도 따로 지정해주었는데 terms1과 terms2 , terms3 하나라도 눌러지지 않거나, 두개만 눌러지거나 할 때 disabled 로 지정해주기 위하여 or 연산자를 사용하였다.