[ React ] filter 함수 사용하기 (필터를 통해 새로운 배열을 반환)

Xplatform에는 filter 함수는 정말 말 그대로 필터를 걸고, 해제하는 역할을 했었다.

React에서 같은 역할을 하는 게 있을까, 하며 검색을 해봤지만

아무리 찾아봐도 조금 다른 filter 함수밖에 나오지 않았다....

뭐 어쩌겠어 써야지.

 

 

내가 필요했던 기능을 다른 것에 비유해서 적어 보자면

 

학생별 성적관리 화면의 조회조건에 학교 / 학년 / 반 / 학생 콤보박스가 있다. 

학교, 학년, 반 콤보박스를 클릭할 때 마다 학생 콤보박스 값이 달라져야 한다. 

 

학교 / 학년 / 반 으로 학생을 조회하는 기능이 아니기 때문에 submit을 계속 날리는 건 좋지 않다고 느꼈다. 

그래서 학생 리스트를 화면 켜질 때 가져온 후에 필터를 계속 걸어서 보여지는 로직을 생각했다. 

그리고 filter은 해제할 수 없기 때문에 변하지 않는 초기의 데이터를 저장할 데이터셋이 필요하다.

그걸 initStudentList 라고 해주었고, filter를 통해 새로 만들어지는 배열은 studentList라고 해주었다.

 

 

const [initEmpList, setInitEmpList] = useState<Array<any>>([]);

/* 화면 켜질 때 학생 리스트를 가져온다 */
useEffect(() => {
        getInitStudentList();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

/* 학생 리스트 가져오는 쿼리 호출 */
const getInitStudentList = async () => {
       ... 생략
        setInitStudentList(arrStudentListData);
    };

쿼리 호출 후 response 값을 arrStudentListData에 담고, 그 값을 initStudentList에 set해준다.

 

 

initStudentList에는 이런식으로 데이터가 들어왔다.  

{ school : 하버드, grade : 1, class : 1, studentId : 1 , studentNm : 홍길동 },

{ school : 옥스퍼드, grade : 1, class : 1, studentId : 2 , studentNm : 김국민 }

 

	const { school, grade , class } = searchConditionInfo.orgInfo;
	arrStudentList = initStudentList.filter(
           (std)=> 
                (school ? std.school === school : true) && 
                (grade ? std.grade === grade : true) && 
                (class ? std.class === class : true)
            );
    	} 
        setStudentList(arrStudentList);

- searchConditionInfo.orgInfo 에는 학생에 대한 조회조건이 들어있다. 

- filter부분에서 'std' 부분은 그냥 initStudentList와 같다고 보면 된다. 이게 참 헷갈렸었다.. 

- school, grade, class는 값이 없으면 true를 반환하여 해당 조건을 skip하게 했다.