렌더링 선택 기준

조건부 렌더링 선택표

조건의 복잡도와 숨길 대상의 범위에 따라 if, 삼항 연산자, &&, null 반환을 고릅니다.

조건부 렌더링 선택 점검

조건이 JSX 안에서 길어지면 읽는 순서가 흐려집니다. 분기 범위가 큰지, 두 결과 중 하나인지, 단순 표시 여부인지에 따라 표현을 고릅니다.

01

if return

로딩·권한 없음처럼 화면 전체가 갈리면 return 전에 분기합니다.

02

? :

성공/실패, 열림/닫힘처럼 두 결과가 모두 보일 때 삼항식을 씁니다.

03

&&

배지나 경고처럼 조건이 참일 때만 한 조각을 붙입니다.

04

null

권한, 데이터, 플래그가 없으면 컴포넌트가 아무것도 그리지 않게 합니다.