[React] && 연산자

React에서 && 연산자의 의미와 사용법 알아보자.

흔히 &&연산자는 and의 개념으로 프로그래밍 언어에서 사용된다.

하지만 Java나 C 같은 언어에서와 React에서 if문의 조건문에 들어올 수 있는 것들은 조금 차이가 있다.

 

---

 

여기서 문제 이 코드는 무엇을 의미할까?

// a는 문자열
    if(a){
    return(
        <>
        <h1>{a}</h1> 
        <>
    )
    }

그렇다. a가 존재한다면 ( 공백이 아니라면 ) a를 <h1> 태그로 화면에 띄어달라는 것이다.

마치 a가 boolean 값처럼 동작하고 있지 않은가?

여기서 다른 프로그래밍 언어 상식과의 혼동이 올 수 있다.

 

정확히는 JavaScript에서는 truthy falsy 규칙에 따라서 아래와 같은 값들이 falsy로 취급된다. 이 외의 값들은 truthy로 간주된다:

1. false
2. 0
3. "" (빈 문자열)
4. null
5. undefined
6. NaN

예를들어 이런 것도 가능하다.

 

const message = "Hello, React!"; // 문자열
return (
  <div>
    {message && <p>{message}</p>} // && 연산자에 의해 앞과 뒤 조건이 모두 truthy면 뒤를 반환
  </div>
);

먼저 해당 구문은 리턴값으로 jsx구문을 반환하고 있다. 이때 중괄호 안에 &&연산자가 사용된다.

&&를 기준으로 왼쪽에 message가 ""(빈 문자열) 이 아니므로 truthy, 오른쪽 또한 위 6개의 항목에 해당되지 않기에 truthy이다.

 

따라서 둘 다 truthy에 해당되기 때문에 뒤에 항목을 반환한다. 여기서는 <p>{message}</p>가 렌더링 된다.

그렇다면 다른 js파일로 컴포넌트로 만들어서 <Message/>처럼 사용해 볼 수도 있을 것이다.