react에서 map에 조건을 달고 싶어요

Question

현재 react로 개발중입니다.

게시판 글 리스트를 map 함수를 사용하여 렌더링 하려고 하는데 그 중 게시판 글 중 최근 10일안에 작성된 글만 표시하고 싶습니다.

생성된 날짜는 게시판 글 필드안에 createdAt 으로 날라오는데요. 어떻게 해야할 지 알려주시길 부탁드립니다!

{articles.map((article) =>( <div>{article.title}</div> ))}

Answer 1

특정 조건에 맞는 배열 ( 10일 이내 )만 리턴해서 받아야 하는 경우이신 것 같습니다.

이런 경우는 map 보단 filter 메서드를 이용하시는게 좋아 보입니다.

filter 메서드는 주어진 조건이 true인 인자만 배열로 반환해줍니다.

ex.

const arr = [1,2,3,4,5];

const evenArr = arr.filter(num => num%2); // 결과 : [2.,4]

10일 이내라고 하시니 여러가지 방법이 있겠지만 "현재 시간" - "createdAt" >= 10을 만족하도록

filter를 돌리시면 될것 같습니다.

Answer 2

함수형 언어들이 기본적으로 제공하는 map, reduce, filter 등과 같은 함수들을 많이 공부하신다면 더 쉽고 보기 좋은 코드를 만드실 수 있습니다.

filter 함수를 이용하면 질문자님께서 원하시는 대로 배열의 특정 원소(최근 10일 안에 작성된 글)만을 리턴하도록 할 수 있습니다.

const now = new Date() {articles.filter((article) => { const createdAt = new Date(article.createdAt) // 문자열을 Date 객체로 변환 createdAt.setDate(createdAt.getDate() + 10) // 10일을 추가 createdAt.setHours(0) // 시간을 00:00:00 으로 맞춤 createdAt.setMinutes(0) // setHours, setMinutes, setSeconds, setMilliseconds 등으로 초기화는 필요에 따라 할 수도 있고 안 할 수도 있음 createdAt.setSeconds(0) createdAt.setMilliseconds(0) return createdAt > now // 생성일에 10일 더한 날짜가 현재보다 크다면 10일 이내에 작성된 글임. 리턴값이 true 인 article 들만 모아 배열로 리턴 }).map((article) =>( <div>{article.title}</div> ))}

더 많은 정보는 링크에서 확인하실 수 있습니다.