리액트에서 반복문으로 게시글 역순 렌더링하기

현재 진행중인 프로젝트에서

리액트에서 반복문으로 게시글을 렌더링하도록 하였는데

게시글을 생성할 경우 최신 게시글이 가장 나중에 렌더링된다.

즉, 오래된 게시글이 가장 상단에 노출되고 있다.

 

이런 현상이 일어나는 이유는 map함수를 사용해서

배열의 요소들을 불러와 렌더링 할 때

순차적으로 렌더링을 하기 때문이다.

 

예를 들어 아래와 같이 1, 2, 3이 들어있는 배열을 이용해 렌더링을 한다고 할 때

[1, 2, 3].map((a, b)=>{
  return <div>{a}</div>
  }
)

아래와 같은 순서로 렌더링 된다.

<div>1</div>
<div>2</div>
<div>3</div>

여기서 배열에 새로운 데이터를 추가한다고 하면

아래와 같이 배열이 생성될 것이고

[1, 2, 3, 4].map((a, b)=>{
  return <div>{a}</div>
  }
)

아래와 같은 순서로 렌더링 될 것이다.

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

하지만 이때, reverse()함수를 이용하면 배열의 순서를 역순으로 바꿀 수 있다.

 

아래 코드는 서버에서 게시글 데이터를 받아오는 코드인데

reverse()함수를 이용해 받아온 게시글 데이터를 역순으로 바꿔주었다.

axios
  .get("http://localhost:8080/feed")
  .then((res) => {
    console.log(res.data);
    const reverse = res.data.reverse();
    setData(reverse);
  })
  .catch((error) => {
    console.log(error);
  });