Filter 메서드의 사용

Filter 메서드

filter 메서드는 기본적으로 특정 조건을 주고,

해당 조건이 부합하는 데이터를 말 그대로 필터링해 새로운 배열로 반환해 준다.

-> 그렇기 때문에, 조건에 대한 로직을 확실히 이해하고 설정해야 하는 것이 당연하다.

->> 필터를 사용하기 전에 먼저 확인해야하는 것은 또 당연한 이야기지만, 그 조건에 필요한 요소들이 제대로 갖춰졌는가 이다.

 

<대댓글 기능 구현에 사용된 예시>

import React from "react";
import styled from "styled-components";
import ChildComment from "./ChildComment";

const ChildList = props => {
  const childList = props.dataList.childComment;
  const { parentComment } = props;

  const filterList = childList.filter(p => {
    const commentId = p.parentComment;
    return parentComment === commentId;
  });

  return (
    <React.Fragment>
      <TempDiv>
        {filterList.map(p => (
          <div>
            <ChildComment
              User={p.User}
              date={p.date}
              id={p.id}
              parentComment={p.parentComment}
              comment={p.comment}
            />
          </div>
        ))}
      </TempDiv>
    </React.Fragment>
  );
};

const TempDiv = styled.div`
  width: 90%;
  margin: 0 0 0 10%;
  background-color: yellow;
`;

export default ChildList;

위의 경우, 

각각의 부모댓글에는 고유 아이디가 있고,

부모댓글에 종속되어있는 자식 댓글(대댓글) 역시 데이터 저장 시, 부모댓글의 고유 아이디가 포함되어 있다.

따라서 리스트에 보여줄 때,

부모댓글의 고유 아이디와 자식댓글이 갖고 있는 부모댓글의 고유 아이디를 비교해서,

같은 경우에 해당 자식댓글이 부모댓글 아래에 종속되는 형태를 띄게 만들어야 한다.

 

여기서 사용된 filter의 조건 로직에서 가장 중요한 것은

'부모댓글의 고유 아이디' 와 '자식 댓글(대댓글)이 종속되어 있는 부모댓글의 고유아이디' 이다.

 

이 두가지 요소가 같은 데이터를 추출해내야 하기 때문에,

'부모댓글의 고유 아이디' 는 상위컴포넌트(대댓글이 종속되어 있을 댓글) 에서 props 로 받아 오고,

'자식 댓글 갖고있는 (종속된) 부모댓글의 고유아이디' 는 이미 가지고 온 state 에서 추출 한다.

최종적으로 위의 두 요소를 비교해서 같은 경우에 해당하는 데이터를 반환시키고,

map 메서드를 이용해서 리스트를 구현한다.

 

가장 중요한 것은,

어떤 조건 로직을 만들 것인가,

그 조건에 필요한 명확한 데이터를 준비했는가 정도로 줄일 수 있을 것이다.