Map으로 게시물 목록 렌더링

오늘은 현재 진행 중인 BoardProject에서 게시물 목록 페이지를 제작하게 되었다.

게시물 목록을 만들기 위해서, 백엔드서버에 있는 boards API를 호출해서 데이터를 받아온 후 렌더링해주는 방식이다.

Map을 활용해서 boards API에서 받아온 데이터 집합을 아주 간결하게 처리할 수 있는 부분이 인상깊었다.

fetchBoards API에서 받아온 data 객체를 map을 통해 처리하는 코드이다.
먼저, 각 행을 _id로 구분을 했는데, 게시물 고유 id를 통해 게시물 리스트를 나열하기 위함이다. 만약 index로 하게 되면 큰 혼동이 생겨서 반드시 유일한 값으로 지정해주는 것이 원칙이다.

게시물 리스트에는 위 사진처럼 한 행에 게시물 ID, 제목 , 작성자, 날짜를 보여준다.

이런식으로, 한 행의 양식(?)을 작성해놓으면 map을 통해서 여러 데이터의 자료도 같은 양식으로 좌르륵 그릴 수 있는 것이다!!

Component 재활용

리액트에서는 Component를 조립하는 것이 가장 중요하다.
Container, presenter, queries, styles 등으로 component를 나누었던 것처럼, 공통 부분 또는 자주 사용될 부분은 Component로 따로 분리해서 나중에 찾아쓰는 것이 편리하고 유지보수 측면에서 효율적이다.

위 사진은 간단한 예시 코드이다.
BoardNewPage 컴포넌트는 게시물 등록이 목적이고,
BoardEditPage 컴포넌트는 게시물 수정이 목적이다.

그런데, 잘 보면 게시물 등록과 게시물 수정 페이지의 양식이 똑같은 것을 확인할 수 있다.

즉, 게시물 등록 템플릿을 만들어놓으면 게시물 등록과 게시물 수정 페이지까지 만들 수 있는 것이다.

그렇게 만든 템플릿 컴포넌트가 바로 BoardComponent 이다.

그렇다하더라도, 등록과 수정 페이지를 구분은 해줘야 할 것이다.
각 페이지에서 key를 전달해주는데 내가 처음 생각한 방식은

export default function BoardComponent(props) {
  return (
    <div>
      <h1>{props.name}페이지</h1>
      제목: <input type="text" />
      내용: <input type="text" />
      <button>{props.name}하기</button>
    </div>
  );
}
---------------------------------------------
 //BoardNewPage에서
 return (
        <BoardComponent name="등록"/>
    );
 //BoardEditPage에서
 return (
      <BoardComponent name="수정"/>
    ); 

위와 같이 name이라는 key로 직접 등록과 수정 문자열을 전달하는 방식이다.
이렇게 작성해도 되지만, 추후에 등록API를 호출할 지, 수정API를 호출할 지 등에 대한 판단에 혼동이 올 수 있다.
따라서, isEdit라는 key로 boolean값을 전달해준다.
만약 isEdit값이 true라면 게시물 수정인 것이다.