본문 바로가기

Filter5

React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 상품 판매를 위해서 필터기능은 소중하다. 유저에게 편리한 경험을 제공해줄 수 있기 때문이다. 아래에서 구현하는 필터기능은 순전히 프론트 위주이다. 선택한 필터에서 값을 추출하는 단계까지만 구현한 코드이다. API의 메소드와 쿼리는 각각마다 다르기 때문에 api를 사용하기 직전까지만 응용가능한 정도로 정리해보았다. 자, 그럼 시작해보자 결과화면 미리보기 React(86) 필터기능 구현하기, 셀렉트 박스 사용하기 CategoryFilter.tsx 일단 준비물로 타입선언부터 해주자 interface Category { name: string; state: string; } 필요한 변수를 준비물로 선언해주자. // 요 카테고리 아이템들 속에는 { 이름과 상태 } 값들이 들어있다 const category = [.. 2022. 10. 31.
JavaScript - 두 배열 비교해서 특정 값 찾기(splice, filter, includes) all 는 [ 0 - 9 까지의 숫자배열 ] 이고, part는 그 중 [ 몇몇 숫자만 들어있는 배열 ] 이다. 원래는 all 의 모든 숫자들을 가지고 있어야 되는데, 몇몇 녀석들이 도망가서 part 만 남았다. 도망간 녀석들이 (차집합) 누군지 찾고자 한다. 즉, 두배열을 비교해서 특정값을 찾아보려고 한다. 나는 두가지 풀이방식으로 풀어보았다. 아래에 필요한 배열들을 보자. [ 5랑 9 ] 가 집나갔으니 얘네만으로 이루어진 배열을 구할 것이다. // 0 - 9 까지의 숫자중 5, 9 가 없다. // [5,9] let all = [1,2,3,4,5,6,7,8,9,0]; let part = [1,2,3,4,6,7,8,0]; 1. 2중 포문과 splice를 이용한다. 2중 포문으로 검사한 뒤, all 값과 =.. 2022. 10. 18.
JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter) 예전에 내장함수들 공부할때 기초는 기초일뿐 이라고 생각하였던 적이 있다. 하지만 실무에서 배열을 동적으로 삭제하는 경우에는 보통 인덱스를 많이 사용한다. 그래서 다시한번 가장 기초적인 배열 함수 splice 와 filter 을 한번 더 정리해보았다. 실제로 응용했던 코드가 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값 devbirdfeet.tistory.com splice vs slice 기억이 가물가물하시다면...? (아래 기초.. 2022. 6. 8.
React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14.
JavaScript - map 함수란 (feat. filter) map () 이란 - 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다. - 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문) - 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다. 새 배열 = 기존 배열.map((요소, 인덱스, 배열) => { return 요소 }); map() 으로 짝수만 출력하기 - 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다. 출력화면 ** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. filter() 으로 짝수만 출력하기 출력화면 ** 나의생각 map 과 filt.. 2021. 5. 12.
반응형