if 분기
조건이 길거나 조기 반환이 필요하면 JSX 밖에서 분기해 테스트할 이름을 남긴다.
Conditional UI
조건부 렌더링은 상태에 따라 보여 줄 UI 가지를 선택한다
if, 삼항 연산자, && 조건은 모두 현재 데이터와 상태를 기준으로 어떤 컴포넌트를 보여 줄지 결정한다.
조건부 UI 흐름
render branch삼항 연산자
두 갈래가 모두 짧고 같은 위치를 차지할 때 JSX 안에서 선택한다.
&& 조건
배지나 보조 문구처럼 없어도 레이아웃이 무너지지 않는 조각에 맞다.
빈 상태
데이터 없음, 로딩, 오류를 같은 숨김 처리로 묶지 않아야 원인을 구분한다.
stateifbranchUI
조건부 렌더링은 코드를 줄이는 기법보다, 사용자가 볼 수 있는 상태를 빠짐없이 설계하는 과정이다.