branching

조건부 렌더링 패턴

로그인 여부, 로딩 상태, 빈 목록처럼 화면이 달라지는 기준을 코드에서 가장 읽기 쉬운 형태로 표현합니다.

if 분기

렌더 전에 변수에 JSX를 담거나 빠르게 반환해 복잡한 조건을 분리합니다.

삼항 연산자

두 화면 중 하나를 고르는 짧은 조건은 JSX 안에서 바로 읽을 수 있습니다.

null 반환

컴포넌트를 숨겨야 할 때는 아무 요소도 만들지 않는 선택지를 둡니다.

empty

데이터가 없을 때의 화면을 명시한다.

guard

렌더 전에 필요한 값이 있는지 먼저 거른다.

ternary

두 가지 결과가 균형 있게 읽히는지 본다.

null

숨김이 CSS 처리인지 렌더 제외인지 구분한다.