Conditional Rendering

실제 화면은 항상 하나의 모습으로 고정되지 않습니다. 로딩 중인지, 데이터가 비었는지, 사용자가 권한이 있는지에 따라 보여줄 요소가 달라집니다. 이런 상황을 정적인 템플릿 하나로만 처리하려 하면 숨기기와 보여주기 규칙이 금방 복잡해집니다.

인터랙션이 많은 프런트엔드가 늘어나면서 화면은 단순한 문서가 아니라 상태 기계처럼 움직이기 시작했습니다. React는 이 변화를 받아, UI를 현재 상태의 함수로 설명하는 방향을 택했고, 조건부 렌더링은 그 모델을 가장 직접적으로 보여 주는 도구가 됐습니다.

컴포넌트가 렌더링될 때 현재 props와 state를 읽고, 그 값에 따라 어떤 JSX 조각을 반환할지 결정합니다. 조건이 참이면 한 가지를, 거짓이면 다른 가지를 선택하거나 아예 아무것도 렌더링하지 않을 수도 있습니다. React는 최종적으로 선택된 결과만 트리로 다루고 화면에 반영합니다.

조건부 렌더링과 목록 렌더링은 둘 다 JSX 안에서 구조를 동적으로 만든다는 점은 같지만, 질문이 다릅니다. 조건부 렌더링은 보여줄지 말지, 어느 가지를 선택할지에 답하고, 목록 렌더링은 같은 형태를 몇 번 반복할지에 답합니다.

실무에서는 로딩, 빈 상태, 에러, 정상 상태를 한눈에 읽히게 나누는 데 조건부 렌더링이 핵심입니다. 다만 중첩 삼항 연산자가 깊어지면 코드가 급격히 읽기 어려워지므로, 의미 있는 분기 단위마다 작은 컴포넌트로 쪼개는 편이 유지보수에 유리합니다.