Map
화면에 객체 또는 배열을 뿌려주어 보여주는 기능 (=반복문 for와 비슷한 기능)
-> 실무에서는 반복문 for문을 거의 사용하지 않으며 map이라는 기능을 이용한다.
Map은 배열이 가지고 있는 기능이다 (객체는 x)
배열이 가지고 있는 기능인 map을 사용하여 변수가 가지고 있는 배열에 내용을 추가 한 모습.
-> 실무에서 for문은 거의 사용하지 않는다.
실습
배열안에 객체가 들어가 있을때 Map 사용법
-> 실습 결과
%20=%20(%7Bname%20'$%7Bdata.name%7D012101%20%7D)).png)
-> $를 이용하여 위처럼 간단하게 표기 가능
-> data부분의 괄호를 생략할수도 있다. 하지만 내용이 여러개 있는경우 괄호로 묶어주어야 한다.
%20%5BSoel0p.%20gEfoe10p,%20EololeloP'%20%5D%20i.png)
-> 이처럼 data가 객체로 들어왔지만 배열로 내보낼 수 있음.
Map의 활용.
-> 이렇게 사용하는 경우 변수에 담겨있는 각 객체에 원하는 데이터를 공통적으로 추가 할 수 있다.
-> 스프레드 연산자를 사용하여 객체에 담긴 객체(데이터)를 한번에 작성 할 수 있다.
Map 실습
-> 1번 실습 풀이 과정
-> 객체의 데이터를 모두 입력해야 하기 때문에 코드가 길어지고 작성하기 귀찮은 부분이 있다.
%20(%7B...data,%20schoolE%20ZS8%7D)).png)
-> 2번 실습 풀이 과정
-> 이처럼 스프레드 연산자를 이용하여 코드를 훨씬 짧게 작성이 가능하다.
Map을 Tag와 함께사용 할 수 있다.
-> 배열 안으로 데이터가 들어가게 된다.
-> 객체 형태가 아닌 배열의 형태로 들어간다는 것이 중요한 포인트
-> 이처럼 백엔드 Api로 부터 데이터를 받아올때 Map을 활용하면 한번에 화면에 표시 할 수 있다.
Map의 활용
%20K.png)
-> 각 data에 추가한 모습
Map심화 실습
-> 변수 fruits를 map을 이용하여 화면에 나타내보기
-> 처음 작성한 코드
-> 객체를 화면에 보여주기 위해서는 배열을 표현하는 방법과는 다른 방식을 사용하여야 한다.
-> 객체를 map을 사용하여 나타내기 위해서는 위와같이 코드를 작성해야 한다.
-> tag로 묶어서 위와 같이 작성하는 경우 각 tag에 이모션 적용도 가능하다.
Filter
: 구성을 변경하는 것이 아닌 삭제 or 남길 부분을 정하는 기능 (필터링)
-> Filter 활용 예시
Filter 실습
-> 1번 문제 풀이
.png)
-> 2번문제 풀이
-> 3번문제 풀이
=> 이런식으로 원하는 조건의 데이터만 골라낼 수 있다.
Filter + Map
-> filter와 map을 같이 사용한 예시
-> map과 filter중 어떤것을 먼저 쓸지 순서가 중요하다.
Filter + Map
.map(data%20%20(%7B...data,%20candy%2010%201)).png)
-> 1번문제 풀이
-> 2번문제 풀이
-> 다른 객체도 살아있어야 하는데 이름만 바뀌었다.
-> 2번문제 풀이의 정답
-> 스프레드 연산자를 이용하여 다른 객체도 함께 살려주었다.
.map(data%20=%20(%7B...data,%20name%20aaa%20%7D)).png)
-> 한개의 객체 안에 Key는 1개만 존재해야 한다. 위와 같이 입력하는 경우 Key값이 변경된다.
-> 템플릿 리터럴을 사용하여 깔끔하게 정리도 가능하다.
Filter + Map 실습
-> 실습 풀이
-> Filter로 먼저 짝수 객체를 골라낸 후 Map으로 나열하였다.
Query를 이용한 실습
-> Index = Map이 그리는 순서에 따라서 번호를 부여하는 기능
-> Query를 이용하여 화면에 그린 모습
+ 날짜 부여하는 법
-> getMonth는 기본적으로 한달 적은 월을 표시한다.
=> 처음 만들때 설계상의 실수가 있었다는 설이 있으며 이미 많은 서비스가 배포되어 있기 때문에 수정하기가 어려워서 그대로 사용한다고 함.
=> 월에 + 1 을 하여 정상적인 월이 표시되게 함.
-> 날짜는 getDay가 아닌 getDate를 사용해야 한다.
-> 월 앞에 0을 붙이고 싶을때 String과 padStart를 사용하여 이렇게 구현한다.
-> 날짜 표시 부분을 다듬고 Query와 Map을 활용하여 간단하게 구현한 모습.
+ 날짜 활용
-> 여러개의 컴포넌트에서 만들때마다 저렇게 날짜를 만들기 귀찮기 때문에 함수로 만들어서 import시킨다.
.png)
->src폴더에 함수폴더를 만들어서 export시킨다.
-> 만든 함수가 있는 경로에 맞게 import시켜주고 함수를 실행시켜줌으로써 코드가 간단해졌다
-> key가 중복되었다는 경고메세지가 나온다.
-> 각각에 key를 부여하여 경고메세지를 없애보자.
-> key에 index값을 부여한 모습
+ 과제 ) Mutation을 이용하여 게시글 삭제 연습
.png)
-> 정상적으로 작동하나 데이터베이스에서 삭제된 데이터를 화면에 다시 그려주지 않아 화면상으로는 삭제된것으로 보이지 않는 문제가 발생함.
-> refetchQueries를 이용하여 화면에 다시 그려준 모습
