JavaScript 변수에 JSX 요소 저장하기

JSX 엘리먼트를 자바스크립트 변수에 저장하는 방법

React와 JSX를 사용하다보면 JSX 엘리먼트를 여러 곳에서 재사용하고 싶은 경우가 있을 수 있습니다. 하지만 JSX 엘리먼트를 자바스크립트 변수에 저장하는 것은 생각보다 간단하지 않을 수 있습니다. 이 블로그 포스트에서는 JSX 엘리먼트를 자바스크립트 변수에 렌더링하는 올바른 구문을 살펴보고 재사용성을 달성하는 다양한 접근 방법에 대해 논의해보겠습니다.

자바스크립트 변수에 JSX 엘리먼트를 저장하는 문제점

먼저, JSX 엘리먼트를 직접적으로 여러 곳에서 재사용할 수 없다는 주장을 명확하게 해야합니다. React는 JSX 엘리먼트의 가상 DOM 표현을 만들고, 기본적으로 JSX 엘리먼트의 각각의 인스턴스를 개별적으로 처리합니다. 따라서 JSX 엘리먼트를 자바스크립트 변수에 저장한다고 해서 원하는 재사용성을 얻을 수는 없습니다.

하지만 재사용성을 달성하고 JSX 엘리먼트를 효과적으로 재사용하기 위한 몇 가지 해결 방법이 있습니다:

접근 방법 1: JSX 엘리먼트를 직접 렌더링하기

콘텐트를 수정하지 않고 JSX 엘리먼트를 여러 곳에 렌더링할 필요가 있다면, 변수 이름을 사용하여 직접 렌더링할 수 있습니다:

const value = <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;

엘리먼트를 렌더링하기 위해 JSX 코드 내에서 중괄호 안에 변수 이름을 사용할 수 있습니다:

ReactDOM.render(
<div>
{value}
{value}
{value}
</div>,
document.getElementById("root")
);

이렇게 하면 JSX 엘리먼트를 여러 번 렌더링하여 원하는 재사용성을 달성할 수 있습니다.

실습 예제:

const value = <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;

ReactDOM.render(
  <div>
    {value}
    {value}
    {value}
  </div>,
  document.getElementById("root")
);

접근 방법 2: 함수나 컴포넌트 생성하기

더 큰 유연성이 필요하고 JSX 엘리먼트나 콘텐트를 수정하고 싶다면, JSX 엘리먼트를 반환하는 함수나 컴포넌트를 생성할 수 있습니다.

접근 방법 2.1: 함수 접근 방법

JSX 엘리먼트를 반환하는 함수를 정의하는 간단한 접근 방법입니다:

const getValue = () => <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;

JSX 엘리먼트를 사용하려면 단순히 함수를 호출하면 됩니다:

getValue();

이렇게 하면 필요할 때마다 JSX 엘리먼트의 여러 인스턴스를 얻을 수 있습니다.

접근 방법 2.2: 컴포넌트 접근 방법

대체로 JSX 엘리먼트를 반환하는 함수형 컴포넌트를 생성할 수도 있습니다:

const Value = () => <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;

컴포넌트를 사용하려면 다른 React 컴포넌트와 같이 대우하면 됩니다:

<Value />

이렇게 하면 JSX 엘리먼트를 컴포넌트로 여러 곳에서 재사용할 수 있습니다.

실습 예제:

const getValue = () => <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;
const Value = () => <div>일부 텍스트<a href="http://example.com">텍스트</a></div>;

ReactDOM.render(
  <div>
    {getValue()}
    {getValue()}
    <Value />
    <Value />
  </div>,
  document.getElementById("root")
);

결론

JSX 엘리먼트를 자바스크립트 변수에 저장하려면 React에서 다른 접근 방법이 필요합니다. JSX 엘리먼트를 직접적으로 재사용할 수는 없지만, 엘리먼트를 여러 번 렌더링하거나 JSX 엘리먼트를 반환하는 함수/컴포넌트를 생성할 수 있습니다. 이러한 기법을 따르면 React 애플리케이션에서 원하는 재사용성과 유연성을 달성할 수 있습니다.

기억해야할 것은 JSX 엘리먼트를 자바스크립트 변수에 저장하는 방법을 이해한다면 React 프로젝트에서 효율적이고 재사용 가능한 코드를 작성할 수 있다는 것입니다.

참고 자료 : 

reactjs