⏰ [Ver1] 30분 개발 및 회고 - 조건부 렌더링

✌🏻 회고

객체 배열에 map() 메서드를 사용해 리스트를 만들던 중, 특정 조건에서만 컴포넌트를 렌더링해야 하는 상황이 생겼다.

이때 JSX에서 && 연산자를 사용하는 것이 정말 필요한가에 대한 의문이 들어, 조건부 렌더링 방식에 대해 간단히 학습해보았다.

📚 정리

JSX에서 조건부 렌더링

{icon && <FontAwesomeIcon icon={icon} />}   vs   <FontAwesomeIcon icon={icon} />

 

💡 시작하기 전에: 왜 조건부 렌더링이 중요한가?

리액트에서는 컴포넌트를 렌더링할 때 props가 어떻게 들어오는지에 따라 동작이 크게 달라진다.

특히 아이콘, 이미지, 텍스트 등 선택적으로 보여주는 요소들은 undefined, null 등 비어 있을 수도 있는 데이터에 의해 렌더링 여부를 결정해야 할 때가 많다.

 

이런 상황에서 조건 없이 무작정 컴포넌트를 렌더링하게 되면, 아래와 같은 문제가 발생할 수 있다:

• 콘솔에 경고 메시지 출력
• 렌더링 오류 발생 (특히 외부 라이브러리 컴포넌트일 때)
• 사용자가 봤을 때 이상한 UI가 뜸

 

상황 비교

✅ 1. 안전한 렌더링 방식

{icon && <FontAwesomeIcon icon={icon} />}

• icon이 truthy(값이 존재)할 경우에만 컴포넌트가 렌더링됨
• undefined, null, '' 등 falsy한 값일 경우 아예 컴포넌트 자체가 렌더링되지 않음
• 에러가 발생하지 않음 → 매우 안전

 

❌ 2. 무조건 렌더링

<FontAwesomeIcon icon={icon} />

• icon이 undefined라도 렌더링을 시도함
• 라이브러리에서 icon이 필수 prop일 경우 에러 발생 가능
• 심지어 렌더링은 되지만 빈 공간이 생기거나, UI가 깨지는 경우도 발생

 

왜 &&를 사용해야 할까?

• 자바스크립트에서 &&는 짧은 평가(short-circuit evaluation)라는 규칙을 따른다.

조건 && 결과

• 앞의 조건이 false면 뒤는 평가조차 하지 않고 무시
• 따라서 false && <Component />는 렌더링되지 않음
• 조건이 true여야만 <Component />가 실행됨

예시:

const icon = undefined;

// 안전한 조건부 렌더링
{icon && <FontAwesomeIcon icon={icon} />} // 아무것도 안 나옴

// 무조건 렌더링
<FontAwesomeIcon icon={icon} /> // 콘솔 에러 또는 UI 오류 발생 가능

 

JSX 조건부 렌더링 정리

방법	설명	사용 상황
&& 연산자	조건이 참일 때만 렌더링	단순 조건에 자주 사용
삼항 연산자 (? :)	두 가지 경우 중 하나 선택	보여줄 UI가 두 가지 이상일 때
if문	JSX 밖에서 조건 처리	렌더링이 많이 달라질 때
함수로 분기	복잡한 조건일 때	가독성을 위해 로직을 분리할 때

 

실제 실무에서는 언제 이 패턴을 쓸까?

• 아이콘을 선택적으로 보여주는 경우
• 로그인한 사용자만 특정 버튼을 볼 수 있게 할 때
• 이미지나 데이터가 아직 도착하지 않은 로딩 상태 처리
• props로 내려온 값이 옵션일 때 (nullable, optional)

 

정리

• icon && <FontAwesomeIcon icon={icon} />는 컴포넌트를 안전하게 렌더링하는 방법이다.
• <FontAwesomeIcon icon={icon} />는 icon이 undefined일 경우 에러를 발생시킬 수 있는 위험한 방식이다.
• JSX에서는 항상 조건부 렌더링 패턴을 익혀두자. 특히 외부 라이브러리를 다룰 때는 undefined 체크를 빼먹지 않는 습관이 중요하다.
• JSX에서 조건부 렌더링은 UI 오류 방지에 매우 중요하다.
• `&&` 연산자를 활용하면 값이 있을 때만 안전하게 렌더링 가능하다.