TIL no.31 array.filter() 기능 : 쇼핑몰 카테고리 필터 기능 : 리액트

인스타그램을 클론하는 위스타그램 프로젝트를 진행하면서 아이디를 검색하는 필터 기능을 적용해보지 않아서 

이번 프로젝트에서 필터 기능이 있는 페이지를 선택하게 되었습니다.

 

필터 기능은 array 배열에서 조건에 맞는 값들로만 새로운 배열을 만들어주는 메소드입니다.

const numbers = [1, 6, 7, 56, 43, 23, 14, 36, 21, 29];

const result = numbers.filter(num => num.length < 30);

console.log(result);

result = [1, 6, 7, 23, 14, 21, 29] //결과값

위와 같이 원하는 조건을 필터로 걸러주고 result 라는 새로운 배열에 담아 줍니다.

 

항상 기본 개념은 들으면 이해가 되지만 활용이 참 어려운데요.

그래서 저도 '필터 그냥 하면 되지 !' 했다가 난관에 부딪혀 힘들었습니다.

누군가에게 쉬울 수도 누군가에게 어려울 수 있지만

처음엔 다들 어렵고 배우면 누구에게나 쉬워진다는 것을 저도 항상 명심하고 

이 글을 읽는 어려움을 겪는 분들도 생각해주셨으면 좋겠습니다.

 

자, 그럼 제가 사이트에서 필터 기능을 구현한 부분에서 필터 기능 부분을 가져와 설명하겠습니다.

    if (categoryOption.length > 0 && !applyOnOption.length) {
      const filteredApplies = products.filter(product =>
        categoryOption.includes(product.category)
      );
      this.setState({
        filteredApplies
      });

categoryOption 이라는 array 배열의 길이가 0보다 크고 applyOnOption 이라는 array 배열이 true가 아니면 중괄호 안에 있는 필터를

동작하게 하라는 내용입니다.

 

products라는 배열을 하나하나 필터 돌려서 

categoryOption 배열에 각각의 product의 category키의 값이 들어있는지를 필터링하여

이 조건에 충족하는 배열을 filteredApplies 라는 새로운 배열로 만들고

setstate로 이 값을 저장합니다. 

 

처음에는 어렵게 접근해서 너무 어려움을 겪는 바람에 쉽게 생각해서 코드를 짜봤는데요.

이보다 간결하지 않고 비효율적인 코드는 없을 것 같아 

곧 간결하고 멋드러지고 효율적인 코드로 제 코드들을 리팩토링 하는 시간을 가져야 할 것 같습니다.

 

이번주에는 2차 프로젝트를 하는 기간인데 제가 코드 리팩토링까지 진행할 시간이 있을지 모르겠지만

최선을 다해 프로젝트를 하면서도 남는 시간이 있다면 꼭 리팩토링과 리액트의 기본기를 더 다져야겠습니다.

 

그럼 20000.