리액트를 다루는 기술 10장

Todolist 작성하기

 

✔ react-icon 사용하기

1. yarn add react-icon
2. react-icons.github.io/react-icons <= 사이트에서 맘에드는 아이콘 고르기
3. import { 아이콘 이름 } from 'react-icons/어쩌고'를 통해 적용

react-icons.github.io/react-icons

React Icons

 

✔ 함수 filter

     : 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출하여 새로운 배열을 만들어줌

const users = [
    {
        id:1,
        username:"A",
        email: "abcd@gmail.com"
    },
    {
        id:1,
        username:"B",
        email: "abcde@gmail.com"
    },
    {
        id:1,
        username:"C",
        email: "abcdef@gmail.com"
    }
];

이런 배열이 있을 때 id가 3이 아닌 원소들만 배열에 남기고 싶으면 다음과 같이 작성 가능

const newUser = users.filter(user => user.id !== 3);

이러면 배열에 id가 3인 C의 정보는 사라진다.

 

✔ 함수 map

     : 배열을 전체적으로 새로운 형태로 변환하여 새로운 배열을 생성해줌

const array = [1,2,3,4,5];
console.log(array.map(n => n);

콘솔에는 1~5까지 출력이 됨

 

const array = [1,2,3,4,5]
const newArray = array.map((n) => n);

console.log(newArray);

이렇게 해도 똑같이 출력됨

 

이걸 살짝 바꿔보면 새로 만들어지는 배열의 값을 내가 바꿀 수 있음

const array = [1,2,3,4,5]
const newArray = array.map((n) => n + 2);

console.log(newArray);

이렇게 하면 원래 array에 있던 각 원소에 +2씩 되어 콘솔에는 3~7까지 출력됨

 

 

*자꾸 TodoListItem.scss만 적용이 안 되서 찾아보니 폴더 안에 package.json에 있는 node-sass를 4.12.0으로 바꿔주니까 적용이 되었음 왜지..?*