엘리먼트 변수로 조건부 렌더링 효율적으로 구현하기

 

엘리먼트 변수란?

React에서 엘리먼트 변수는 특정 JSX 엘리먼트를 변수에 저장한 다음, 이를 조건에 따라 렌더링하거나 재활용하는 방식으로 사용하는 개념이다.

JSX 자체는 JavaScript 표현식으로 평가될 수 있으므로, 변수에 할당하거나 함수의 반환값으로 사용할 수 있다.

 

엘리먼트 변수를 사용하는 이유

• 조건부 렌더링 간소화 : 복잡한 조건문을 JSX 내부에 작성하지 않고, 미리 조건에 맞는 엘리먼트 변수로 만들어 사용하면 코드가 더 깔끔해 진다.
• 반복적인 렌더링 방지 : 조건에 따라 자주 사용되는 동일한 엘리먼트를 중복 작성하지 않고, 변수에 저장해 재활용할 수 있다.

엘리먼트 변수 사용 예제

function Greeting({ isLoggedIn }) {
  let message;

  if (isLoggedIn) {
    message = <h1>Welcome back!</h1>;
  } else {
    message = <h1>Please sign in.</h1>;
  }

  return (
    <div>
      {message}
    </div>
  );
}

• message라는 변수를 선언해 조건에 따라 다른 JSX를 할당
• return 내부에서 변수만 사용해서 간결한 코드 작성 가능

 

조건부 연산자를 사용한 간소화

위 코드를 조건부 연산자로 단순화 하면 이렇게 작성 할 수도 있다.

function Greeting({ isLoggedIn }) {
  const message = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

  return (
    <div>
      {message}
    </div>
  );
}

 

 

엘리먼트 변수와 React의 동작

1. JSX는 JavaScript 표현식

JSX는 일반 JavaScript 표현식처럼 변수에 저장하거나 함수의 반환값으로 사용할 수 있다.

const button = <button>Click me</button>;

 

2. React는 엘리먼트를 효율적으로 렌더링

React의 가상 DOM은 엘리먼트 변수를 렌더링할 때, 이전 값과 비교하여 필요한 부분만 업데이트한다. 따라서 성능도 효율적이다.

 

 

주의사항

1. 컴포넌트와 혼동하지 않기

엘리먼트 변수는 단순히 JSX를 저장하는 변수이다. 컴포넌트와는 다르며 재사용성과 상태 관리를 제공하지 않는다.

const header = <Header />; // 엘리먼트 변수
function Header() { return <h1>Header</h1>; } // 컴포넌트

 

2. 조건부 렌더링이 복잡해지면 가독성이 떨어질 수 있음

엘리먼트 변수는 단순한 조건부 렌더링에 적합하다 복잡한 로직이 필요하다면 별도의 함수로 추출하거나 컴포넌트를 분리하는 것이 좋다.

 

3. 메모리 관리

React는 엘리먼트를 재사용하지 않고 필요할 때마다 새롭게 생성한다. 엘리먼트 변수를 과도하게 사용하면 메모리를 낭비할 수 있으니 적절히 사용해야 한다.

 

 

---

• 엘리먼트 변수는 JSX를 변수에 저장하여 조건에 따라 쉽게 렌더링할 수 있게 하는 도구이다.
• 코드를 간결하게 만들고, 재사용성을 높일 수 있다.
• 단, 복잡한 조건부 로직에서는 오히려 가독성을 해치 수 있으므로 적절히 활용하는 것이 중요하다.