[React 공부 전 알아야 할 JavaScript]_조건부 렌더링

이번 포스트에서는 '삼항 연산자', '단축 평가', '옵셔널 체이닝'에 대해서 포스팅했습니다.

삼항 연산자(Condition ? A : B)

조건(condition)이 참일 때는 'A', 거짓일 때는 'B'를 실행하는 연산자 입니다.

const isLogin = true;
const message = isLogin ? "환영합니다!" : "로그인이 필요해요.";
console.log(message); // 환영합니다!

React 화면을 만드는 HTML 코드(JSX)는 자바스크립트 '함수 호출'로 변환되는데, 함수 인자 자리에 문장이 들어갈 수 없고 '값'만 들어갈 수 있기 때문에 if문을 쓸 수 없습니다. 그래서 삼항 연산자를 사용합니다. 또한, 상태에 따라 UI를 바꿔야할 때 사용합니다.

단축 평가 (&& , ||)

&& (AND 연산자)

: 앞이 Truthy(참 같은 값)이면 뒤의 값을 반환하고 앞이 Falsy(0, false 등)이면 앞의 값을 그대로 반환합니다.

message && <p>새 메시지가 왔어요!</p>
(메시지가 있을 때만 알림창을 띄우고 싶을 때 사용)


// 주의사항 : count가 0인 경우
count && <p>내용</p> // 화면에 '0' 출력

count > 0 && <p>내용</p> // 화면에 출력되는 것 없음

|| (OR 연산자)

: 앞이 Truthy이면 앞의 값을 반환하고 앞이 Falsy이면 뒤의 값(기본값)을 반환합니다.

userName || "익명사용자"
(사용자 이름이 등록 안 되어 있을 때 '익명'이라고 보여주고 싶을 때 사용)

데이터가 없을 때 아예 안보여주거나 기본값을 주고 싶을 때 사용합니다.

삼항연산자와 OR 연산자를 비교해서는 조건중심인지, 데이터 유무 중심인지 비교해보면 구분하는데 도움이 될겁니다.

// 1. OR 연산자
const result = score || "미응시"; 
console.log(result); // "미응시" (0은 자바스크립트에서 false)

// 2. 삼항 연산자
const result = (score === null) ? "미응시" : score;
console.log(result); // 0 (정확히 null일 때만 체크)

위의 코드는 score가 0일 때 각각의 연산자가 서로 다른 결과를 도출하는 것을 확인할 수 있습니다.

OR 연산자가 데이터 유무 중심이라고 했는데 모순처럼 느껴지실겁니다. '0'이라는 데이터가 있는데도 불구하고 기본값을 출력하는 이유는 이미 자바스크립트의 설계가 그렇게 되어 있기 때문입니다.
(ES11(2020)에서는 0도 값으로 인정해주는 ??연산자도 있습니다. 리액트 환경에서는 버전 상관없이 사용 가능합니다.)

옵셔널 체이닝 (?.)

데이터가 없어도 에러가 나지 않게 해주는 문법입니다.

사용할때는 값을 읽을 때만 사용 가능하며, user?.name = '홍길동' 처럼 값을 할당할 때는 사용할 수 없습니다.

// address가 있으면 city를 읽고, 없으면 그냥 undefined로 남겨줘 (에러 금지!)
const city = user?.address?.city;

위 코드 처럼 단계마다 사용가능합니다.

리액트는 데이터가 비동기로 들어오는 경우가 많습니다. "Uncaught TypeError: Cannot read properties of undefined" 에러로 다운되는 것을 방지해줍니다.