조건부 연산자 주의사항과 자세한 예시

 

1. 컴포넌트는 하나의 부모 태그로 감싸야 한다.

 

오류코드

function Example() {
  return (
    <h1>Hello</h1><p>World</p>
  );
}

 

 

위 코드는 "JSX elements must be wrapped in an enclosing tag" 오류를 발생시킨다.

 

수정코드

function Example() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

 

또는 React Fragment를 사용할 수 있다.

function Example() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

 

React Fragment를 사용하면  리액트 컴포넌트는 반드시 하나의 루트 노드를 반환해야 한다는 원칙에 위배 되지 않으면서 dom에는 표시 되지 않는 부모태그를 만들 수 있다.

 

 

2. 코드 가독성 유지

조건부 렌더링이 복잡해지면 별도 컴포넌트로 분리하는 것이 가독성을 높이는 방법이다.

 

가독성이 낮은 코드

function Example({ user }) {
  return (
    <div>
      {user ? (
        user.role === 'admin' ? (
          <h1>Welcome, Admin!</h1>
        ) : (
          <h1>Welcome, User!</h1>
        )
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

 

컴포넌트 분리로 개선

function AdminMessage() {
  return <h1>Welcome, Admin!</h1>;
}

function UserMessage() {
  return <h1>Welcome, User!</h1>;
}

function Example({ user }) {
  if (!user) return <h1>Please log in.</h1>;
  return user.role === 'admin' ? <AdminMessage /> : <UserMessage />;
}

 

 

 

3.불필요한 렌더링 방지

조건부 렌더링은 성능 최적화와도 연관이 있다. 불필요한 컴포넌트를 렌더링 하지 않도록 주의해야 한다.

 

비효율적인 코드

function Example({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <Header />}
      <Content />
      {isLoggedIn && <Footer />}
    </div>
  );
}

 

위 코드에서는 Header와 Footer가 조건부 렌더링되지만, 매번 평가가 이루어져 성능에 영향을 미칠 수 있다.

 

메모이제이션으로 최적화

const Header = React.memo(() => <h1>Welcome</h1>);
const Footer = React.memo(() => <footer>Footer</footer>);

function Example({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <Header />}
      <Content />
      {isLoggedIn && <Footer />}
    </div>
  );
}

 

리액트는 컴포넌트가 다시 렌더링될 때 기본적으로 모든 자식 컴포넌트도 다시 렌더링 된다.

그러나 React.memo를 사용해서 메모이제이션 해주면 props이 변하지 않을 경우 다시 렌더링 되지 않는다.