[React+Rails] 모델의 Index 페이지를 React로 만들어보자

기존에 Partial을 사용하여 Rails에서 모델의 Index의 list_item을 만들 때에는,

<% @articles.each do |article| %>
  <%= render 'sessions/contents/article_item', article: article %>
<% end %>

이렇게 사용을 하던 부분을, React로 바꾸고자 합니다. 

여기서 고민이 생기는데, 해당 세줄을 통으로 

<%= react_component 'Articles', { data: @articles } %>

이렇게 바꿀 것인가.. 

<% @articles.each do |article| %>
 <%= react_component 'Article', { data: article } %>
<% end %>

이렇게 바꿀 것인가..

같은 Article 모델이지만 페이지가 뉴스, 주요뉴스, 해외뉴스 등 나뉘어져 있기 때문에, 재사용성을 고려하면 통으로 Article 리스트를 React component로 만드는 것보다, 리스트 아이템 한개씩 Component로 만드는 것이 나을 듯 합니다.

혹여나 해서 이리저리 구글링을 해보니, 컴포넌트 여러개를 사용하는 것에 대한 메모리 릭 이슈는 당연히 너무 많은 컴포넌트를 사용하고 각 컴포넌트마다 lifecycle에 어긋나게 사용 시 메모리 릭이 발생할 수 있음. 해외 블로거들의 경우 리스트를 react로 구현 시 리스트 Component 1개 / 리스트 아이템 Component 1개를 생성하여 리스트 Component에서 API 호출 후 아이템 여러개를 배치하는 경우로 주로 개발을 하는 것을 볼 수 있습니다.

* 여기서 문득 드는 생각은 Rails view를 완전히 배제하고 React componenet로만 모든 페이지를 구성하는 것이 좋은 방향인가? 라는 의문이... 얼핏 찾아봤을 땐 해당 문제에 대해서는 아직 별반 이야기를 못찾음. Rails view를 쓰되 각 요소별로 Componenet 위주로 React를 사용하는 것이 맞는지(뼈대는 erb를 사용하고 Rails 변수 사용 + React 요소 사용).. 잘 모르겠음. 추후 관련 내용을 찾으면 포스팅하겠습니다.

[추후 업데이트 할 예정입니다]