리액트 조건부 렌더링 패턴 및 옵셔널 체이닝

✔️ 조건부 렌더링이란?

리액트에서는 JSX라는 문법을 사용하고, 조건부 렌더링을 하는 것은 JS에서 if문 등을 사용하여 조건처리를 하듯이 UI 업데이트를 하는 것을 말합니다.

✔️ 조건부 렌더링 패턴

조건부 렌더링 패턴으로는 if-else 패턴, : ? 패턴(삼항연산자), && 패턴, switch case 패턴, enum 패턴, HOC 패턴 등이 있습니다.

오늘은 이 중에서 : ? 패턴, && 패턴 종류에 대해서 알아보고 옵셔널 체이닝까지 정리하도록 하겠습니다.

✔️ : ? 패턴(삼항연산자)

우선 삼항연산자 같은 경우는 아래와 같이 사용합니다.
리액트 공식 문서에서는 이 패턴을 인라인 If-Else 라고 소개하고 있습니다.

조건 ? 참일경우 : 거짓일 경우

✔️ && 패턴

조건부 렌더링 && 패턴 같은 경우는 아래와 같이 사용될 수 있습니다.

// 선행 조건 && 후행 조건
true && "LIME";
// 결과 = 'LIME'

&& 기준으로 앞에 있는 조건이 참이어야 뒤에있는 결과를 그려주게 되는 것입니다.

조건1 || 조건2;

위와 같은 경우는 참인 경우에 앞을 그려주고 거짓인 경우에 뒤를 그려주게 됩니다.

조건1 ?? 조건2;

위와 같은 경우는 nullish-coalescing 라고 하며, 거짓인 경우 중에서도 null이나 undefined일 때 뒤를 그려주게 됩니다.
coalesce는 합치다라는 뜻이고, 이러한 null 병합 연산자는 ES11에서 도입된 문법입니다. 변수에 기본값을 설정할 때 유용하게 사용되는 문법입니다.

✔️ 옵셔널 체이닝(Optional-Chaining)

옵셔널 체이닝은 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근하는 경우에 사용하곤 합니다.

let data = {};
data?.lime;

앞에 있는 피연산자가 null 또는 undefined 일 때는 undefined를 반환하고, 그렇지 않다면 오른쪽에 있는 프로퍼티 참조를 이어나가게 됩니다.

let data = {};
let length = data && data.length;

console.log(length); // ''

참고) 기존의 && 을 사용하는 경우에는 위와 같이 나오는 문제점이 있었습니다.

리액트로 개발을 하다보면 조건부 렌더링을 사용할 때가 많은데, 그중에서도 &&, || 이나 옵셔널 체이닝을 자주 사용하게 되는 것 같네요 :)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)