괴발개발 성장기

Study/React

[React] 배열에서 중복 제거된 특정 값들을 조회한다.

지니유 2023. 9. 8. 08:23
반응형

 

 

# 배경

회사에서 리스트를 뽑아서 데이터를 조합해야했다.

우리 객체로 된 리스트를 뽑아서 거기에서 이름과 주민등록번호 두개로 중복제거를 한다.

 

# 리스트 예시 => 11개

더보기

 const dataList = [
            {
                "donationId": 280090,
                "donationDate": "20230726",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "전원우",
                "quantity": 1,
                "amount": 1318,
                "birthDate": "960717",
            },
            {
                "donationId": 280009,
                "donationDate": "20230306",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 1,
                "amount": 1318,
                "birthDate": "870425",
            },
            {
                "donationId": 279965,
                "donationDate": "20220408",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 6,
                "amount": 6307,
                "birthDate": "870425",
            },
            {
                "donationId": 279961,
                "donationDate": "20220401",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "이수혁",
                "quantity": 1,
                "amount": 5756,
                "birthDate": "880531",
            },
            {
                "donationId": 279960,
                "donationDate": "20220409",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 33,
                "amount": 58014,
                "birthDate": "990101",
            },
            {
                "donationId": 279959,
                "donationDate": "20230401",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 22,
                "amount": 38676,
                "birthDate": "990101",
            },
            {
                "donationId": 279957,
                "donationDate": "20230717",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "전원우",
                "quantity": 2,
                "amount": 2636,
                "birthDate": "960717",
            },
            {
                "donationId": 279956,
                "donationDate": "20230516",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "전원우",
                "quantity": 1,
                "amount": 1318,
                "birthDate": "960717",
            },
            {
                "donationId": 279952,
                "donationDate": "20220329",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 104,
                "amount": 55252,
                "birthDate": "870425",
            },
            {
                "donationId": 279951,
                "donationDate": "20230329",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "박재범",
                "quantity": 6,
                "amount": 18741,
                "birthDate": "870425",
            },
            {
                "donationId": 279950,
                "donationDate": "20220129",
                "memberId": 1,
                "memberName": "전원우",
                "donorName": "이수혁",
                "quantity": 2,
                "amount": 11512,
                "birthDate": "880531",
            },
        ]

 

위에 리스트에서 중복 제거 된 donorName와 birthDate 값을 알고 싶었다.

 

# 결과값 => 4개

[
    { "birthDate": "960717", "donorName": "전원우"},
    { "birthDate": "870425", "donorName": "박재범"},
    { "birthDate": "880531", "donorName": "이수혁"},
    { "birthDate": "990101", "donorName": "박재범"}
]

 

# 코드

1) 우선 리스트를 map를 해서 객체 안에 원하는 부분만 뽑아서 다시 배열을 만든다.

    const donors = dataList.map((value) => {
        return {
            birthDate: value.birthDate,
            donorName: value.donorName,
        };
    });

2)  객체 안에 있는 값 중에 모든 값이 똑같은 경우 중복을 제거 해준다.

그래서 11개에서 중복을 제거해서 4개가 나온다.

   const info = [...new Set(donors.map(JSON.stringify)),].map(JSON.parse);

만약 dataList에 적용했다면 모든 값이 똑같은 데이터는 없기때문에 11개가 모두 나올 것이다.

 

반응형