[React] 조건부 렌더링 (Conditional Rendering)

⚡ 조건부 렌더링 (Conditional Rendering)

---

조건부 렌더링이란 리액트에서 조건에 따라 엘리먼트를 렌더링하는 것을 의미합니다.

조건부 렌더링을 사용하는 경우는 많겠지만 제가 주로 사용했던 용도는 다음과 같습니다.

• 인증, 인가에 따라 렌더링

• 모달 ON/OFF

• 비동기 데이터 참조 시 타입을 보장하여 안전하게 접근 및 로딩 처리

그럼 조건부 렌더링과 목적에 따른 사용 방법 예시를 알아보겠습니다.

📌 사전 준비 코드

// 3초 후 return 하는 비동기 함수
const promiseFun = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return 'JANG';
};

const Component = ({ name }: { name: string }) => {
  return <button>{name}</button>;
};

우선 비동기적으로 상태를 업데이트하기 위해 3초 후 문자열을 return하는 promise함수와, 간단하게 name이란 키를 갖는 객체의 타입을 사용하는 컴포넌트를 만들어주었습니다.

const [state, setState] = useState<{ name: string }>();

이름을 키로 갖고 있는 객체를 타입으로 하는 상태를 하나 선언해주었습니다.

당연히 초기화 되지 않았기 때문에 상태는 undefined의 타입을 함께 지니고 있습니다.

useEffect(() => {
  promiseFun().then((response) => {
    setState({ name: response });
  });
}, []);

useEffect를 사용하여 상태를 변경해줍니다.

그리고 컴포넌트에 상태를 prop으로 넘겨주려 하는 순간

return <Component name={state.name} />;

상태가 초기화 되기 전 지니고 있는 undefined의 가능성 때문에 오류가 발생하게 됩니다.

그럼 이를 해결하기 위해 조건부 렌더링을 사용해보겠습니다.

📌 if문을 이용한 조건부 렌더링

const renderWithIf = () => {
  if(state) return <Component name={state.name} />
}

return renderWithIf();

값이 falsy일 가능성을 if문으로 차단시켜 안전하게 렌더링이 가능해졌습니다.

📌 논리곱(&&)을 이용한 조건부 렌더링

그런데 이와 같이 간단한 조건의 경우는 더욱 깔끔하게 인라인으로 작성할 수 있습니다.

return state && <Component name={state.name} />

위 if문과 동일한 역할을 하지만 훨씬 더 깔끔하죠?

또한 모달 ON/OFF를 관리하는 상태나, 여러 상태를 사용할 때에도 아래처럼 유용하게 사용됩니다.

return isModalOpen && <Modal />

return stateA && stateB && stateC && <Component stateA={stateA} stateB={stateB} stateC={stateC} />

📌 if else문을 이용한 조건부 렌더링

const renderWithIfElse = () => {
  if (state) {
    return <Component name={state.name} />;
  } else {
    return <Loading />;
  }
}

return renderWithIfElse()

위 상황에서 if/else문을 이용한다면 if문에는 상태 값이 존재할 때, else문에는 상태 값이 존재하지 않을 때에 맞게 렌더링을 분기할 수 있습니다.

이를 적절히 이용한다면 비동기적으로 데이터를 불러올 때 시각적으로 로딩 처리를 함으로써 더 나은 사용자 경험을 느낄 수 있습니다.

📌 삼항 연산자를 이용한 조건부 렌더링

return (
  state
  ? <Component name={state.name} />
  : <Loading />
)

if문은 논리합을 이용해 인라인으로 표현했다면

if/else문은 위와 같이 삼항 연산자를 통해 인라인으로 간단히 표현할 수 있습니다.

---

복잡한 조건은 if/else를 사용하는 것이 더 낫겠지만 그 외에 상황에서는 논리연산자를 적극적으로 사용한다면 더 깔끔한 코드를 기대할 수 있습니다.