React에서 렌더링을 위해 요소를 변수에 추가하는 방법

제목: React에서 변수에 요소를 추가하고 렌더링하는 방법

React에서 기존 콘텐츠와 함께 요소를 변수에 추가하고 렌더링해야하는 상황이 발생할 수 있습니다. 이 블로그 게시물에서는 이를 어떻게 효과적으로 수행할 수 있는지 알아보겠습니다.

시나리오 이해하기

간단한 React 컴포넌트를 고려해봅시다:

var Hello = React.createClass({
  render: function() {
    let { cond, name } = this.props;
    let content, content2;
    if (cond){
      content = (<div>Hello { name } </div>);
      content2 = (<div>content 2</div>);
    }

    return (
      <div>
        { content }
        { content2 }
      </div>
    )
  }
});

위 코드에서 Hello라는 컴포넌트가 content와 content2라는 두 가지 요소를 렌더링합니다. 그러나 우리의 목표는 content에 content2를 추가하고 두 요소를 하나의 요소로 렌더링하는 것입니다.

해결방법: 콘텐츠 변수 결합하기

목표를 달성하기 위해 추가적인 변수 contents가 필요합니다. 이 변수는 content와 content2 둘 다를 저장할 것입니다. 코드를 업데이트해봅시다:

var Hello = React.createClass({
  render: function() {
    let { cond, name } = this.props;
    let content, content2, contents;
    if (cond){
      content = (<div>Hello { name } </div>);
      content2 = (<div>content 2</div>);
      contents = [content, content2];
    }

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

이 업데이트된 버전에서는 새로운 contents 배열을 만들고 content와 content2를 모두 그 안에 저장했습니다. <div> 요소 내에서 contents 변수를 렌더링함으로써 원하는 출력 결과를 얻을 수 있습니다.

최종 렌더링

이제 필요한 속성을 사용하여 Hello 컴포넌트를 렌더링할 때:

ReactDOM.render(
  <Hello name="World" cond={ true } />,
  document.getElementById('container')
);

content와 content2가 결합되어 하나의 요소로 렌더링되는 것을 볼 수 있습니다.

축하합니다! 이제 변수에 요소를 추가하고 React에서 렌더링하는 방법을 성공적으로 배웠습니다.

요약

이 블로그 게시물에서는 React에서 요소를 결합하고 변수에 추가하여 렌더링하는 방법에 대해 논의했습니다. 결합된 콘텐츠를 저장하기 위해 추가적인 변수를 사용함으로써 원하는 출력 결과를 얻을 수 있었습니다. 이 접근 방식을 특정한 사용 사례에 맞게 적용하고 동적 콘텐츠로 React 애플리케이션을 향상시키는데 활용해보세요.

읽어주셔서 감사합니다! 질문이나 제안 사항이 있으시다면 아래에 댓글을 남겨주세요.

참고 자료 : 

reactjs