Rails Active Record Associations에서 ReactJS 렌더링 문제를 해결하는 방법

제목: ReactJS가 Rails의 Active Record 연결을 어떻게 처리하는가

소개

이 블로그 글에서는 ReactJS가 Rails의 Active Record 연결을 어떻게 처리하는지 살펴보겠습니다. 특히 유저의 포스트 항목과 프로필 정보를 함께 표시하고자 하는 시나리오를 살펴볼 것입니다. ReactJS를 사용할 때 직면하는 도전 과제와 서버로부터 필요한 데이터를 효율적으로 가져오기 위한 해결책에 대해 논의합니다. 그럼 시작해봅시다!

관계 이해하기

우리 시나리오에서는 세 개의 모델인 User, Post, Profile이 있습니다. User 모델은 Post와 has_many 관계를, 그리고 Profile과 has_one 관계를 가지고 있습니다. Post 모델은 User에게 속하며, Profile 모델도 User에게 속합니다. 이 관계를 통해 유저와 그들의 포스트, 그리고 프로필 간의 연결을 설정할 수 있습니다.

React 없이 전통적인 접근 방식

React를 Rails 애플리케이션에 통합하기 전에는 ERB 템플릿을 사용하여 원하는 데이터를 검색할 수 있었습니다. 컨트롤러의 index 액션에서 유저의 포스트를 가져와 뷰에서 반복문을 사용하여 접근할 수 있었습니다:

<% @posts.each do |post| %>
  <%= post.user.profile.business_name %>
  <%= post.post_type %>
  <%= post.<all other attributes> %>
<% end %>

이 접근 방식을 통해 각 포스트에 연결된 유저의 프로필 정보에 간단하게 접근할 수 있었습니다.

Rails와 React 통합하기

이제 react-rails gem의 도움을 받아 ReactJS를 사용하여 동일한 기능을 어떻게 구현할 수 있는지 알아보겠습니다. 먼저, 포스트 항목을 렌더링하기 위한 React 컴포넌트를 생성해야 합니다:

var Posts = React.createClass({
  render: function() {
    var createItem = function(post) {
      return (
        <div className="row" key={post.id}>
          {post.post_type}
          {post.foobar}
          {post.user.name} {/* 이는 작동하지 않음 */}
        </div>
      );
    };
    
    return (
      <div className="panel">
        {this.props.posts.map(createItem)}
      </div>
    );
  }
});

다음으로, react-rails gem에서 제공하는 react_component 도우미를 사용하여 index.html.erb 파일에서 React 컴포넌트를 렌더링할 수 있습니다:

<%= react_component('Posts', { posts: @posts }) %>

하지만, 진행하기 전에 중요한 문제를 처리해야 합니다.

경고: 배열이나 반복자의 각 자식은 고유한 “key” 속성을 가져야 합니다

배열에서 map 함수를 사용하여 동적으로 요소를 렌더링할 때, React는 각 렌더링된 요소에 대해 고유한 key 속성이 필요합니다. 이 경고를 수정하기 위해 createItem 함수의 div 요소에 key 속성을 추가할 수 있습니다:

<div className="row" key={post.id}>

이제, 각 포스트에 연결된 유저의 이름에 접근하는 문제를 해결하는 방법에 대해 알아보겠습니다.

React에서 유저 정보 가져오기

유저의 이름을 표시하기 위해서는 서버에서 JSON 응답에 유저 정보가 포함되어 있는지 확인해야 합니다. 이를 위해 컨트롤러 액션을 다음과 같이 수정할 수 있습니다:

def index
  @posts = Post.all.includes(user: { only: [:name] }).as_json
end

위 코드에서는 includes 메소드를 사용하여 연결된 user 모델을 즉시 로드하고, 이름 속성만 포함되도록 지정합니다. 이를 통해 유저 정보를 React 컴포넌트에서 사용할 수 있게 됩니다.

이러한 수정을 통해 React 컴포넌트는 이제 각 포스트에 연결된 유저의 이름에 접근할 수 있을 것입니다.

결론

이 블로그 글에서는 ReactJS가 Rails의 Active Record 연결을 어떻게 처리하는지에 대해 논의했습니다. 유저의 포스트 항목과 프로필 정보를 함께 표시하는 시나리오를 살펴보았습니다. React를 Rails와 통합하고 필요한 조정을 통해 도전 과제를 해결하고 필요한 데이터를 성공적으로 가져와 렌더링하는 데 성공했습니다. 이제 ReactJS가 Rails의 Active Record 연결을 효율적으로 처리하는 방법에 대해 명확한 이해를 가지고 있습니다.

읽어주셔서 감사합니다!

참고 자료 : 

reactjs