내배캠 TIL 2022.12.13

오늘 하루종일 리덕스로 todolist 만들기 과제 만들었다.

 

- CRUD 구현했다. (redux의 중앙 state store 이용)

- styled component 이용해서 css 적용했다. css 내용은 예시에서 복붙했다.

- layout 이용해서 전체 페이지에 css 기본값 넣어주었다.

- router 이용해서 상세페이지 구현했다. (Link, useNavigate, useParams 이용)

 

- 띄어쓰기나 빈값을 넣으면 알러트 뜨게하고 해당 인풋에 포커스해주기

- 투두 리스트 추가하고 나서는 인풋 비우기

- id는 uuid 이용

- dispatch 할 때 action creator 이용.

 

 

map과 filter를 다양한 방법으로 써보면서 원하는 기능을 구현했다.

map에 if를 넣어서 조건적으로 return 해오는 방법을 이전 기본 투두리스트 만들 때 이용해서

이번에는 filter를 if 대신에 이용했다.

결과물인 배열 말고 하나하나 돌 때 그 값을 활용하고 싶었는데,  원하는대로 되지 않았다.

당연한거지만 메소드 안에서 값을 찍어보면 하나하나로 나오고, 메소드 밖으로 나오면 배열로 나온다.

메소드 안에 jsx 를 넣으면 되는 것이다. 

 

map에다가 조건을 넣으면 true 와 false로 이루어진 배열이 나온다

 

결과가 하나하나 나오는 경우

 const testArr = () => {
    data.filter((item) => {
      console.log(item);
    });
  };

  testArr();

 

결과가 배열로 나오는 경우

const testArr = () => {
    const answer = data.map((item) => item);
    return answer;
  };

  console.log(testArr());

 

input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value가 초기화 되도록 구현합니다.

- 이거 어렵구만? setState는 inputBox에 넣어놨는데 가져다쓰는 건 리덕스과제 의미에서 벗어나는 것 같고

으잉? 아무것도 안했는데 그냥 그렇게 되네 새로 페이지 렌더링하면서 날라가는건가...

 

react에서 uuid 쓰기위해서 설치

# yarn
yarn add uuid

import { v4 as uuid } from "uuid";