Chapter3 - 버킷리스트에 프로그래스바 달아주기***

1.

<button onClick={() => {}}>완료하기</button>

 

Detail.js에 완료하기 버튼을 먼저 달아준다. onClick에 들어갈 함수를 만들어 주어야 하는데

 

 

const initialState = {

  list: [

    { text: "영화관 가기", completed: false },

    { text: "매일 책읽기", completed: false },

    { text: "수영 배우기", completed: false },

    { text: "코딩하기", completed: false },

  ],

  // list: ["영화관 가기", "매일 책읽기", "수영 배우기", "코딩하기"],

};

일단 bucket.js에서 배열이었던 list 데이터를 딕셔너리 형태로 바꿔주자!

그러고 새로고침 해서 보면 오류가 날텐데 BucketList.js를 들어가서 {list}로 받아오던 데이터를 딕셔너리로 데이터를 바꿔 주었기 때문에 {list.text}로 받아오도록 하자!

 

또, 상세페이지에서도 오류가 나타날텐데 Detail.js에 들어가서

{bucket_list[bucket_index]}로 받아오던 데이터를 {bucket_list[bucket_index].text}로 받아오도록 하자.

2.

이젠 완료하기 버튼을 눌렀을때 리덕스에 있는 데이터를 수정해주기 위해 액션을 만들어주자

const UPDATE = "bucket/UPDATE";

 

export function updateBucket(bucket_index) {

  return { type: UPDATE, bucket_index };

}

액션 선언과 함수를 만들어주고, 

case "bucket/UPDATE": {

      console.log("이제 완료할거야!");

      return state;

    }

리듀서에도 작성해준뒤 잘 작동하는지 콘솔을 찍어보고 완료하기 버튼의 onClick을 활성화 시켜보자

 

import { deleteBucket, updateBucket } from "./redux/modules/bucket";

Detail.js에서 updateBucket을 import 해주고, 

<button

        onClick={() => {

          dispatch(updateBucket(bucket_index));

        }}

      >

onClick에서 불러와 주면

콘솔이 잘 찍히는 것을 확인할 수 있다.

 

리듀서에서 console.log(state, action)도 찍어보면

위와 같이 나오는데 0번째 영화관 가기의 completed: false를 true로 바꿔주는 작업을 해보자!

3.

 const new_bucket_list = state.list.map((l, idx) => {

        console.log(l);

      });

수정해주기 위해 map을 이용해 보자 l을 콘솔로 찍어보면

위와 같이 나오는데, 이것을 보고 index로 비교해야 함을 알 수 있다.

  case "bucket/UPDATE": {

      const new_bucket_list = state.list.map((l, idx) => {

        if (parseInt(action.bucket_index) === idx) {

          return { ...l, completed: true };

        } else {

          return l;

        }

      });

      console.log({ list: new_bucket_list });

      return { list: new_bucket_list };

    }

이후 action의 bucket_index와 idx를 비교해 같으면 completed가 true로 바뀔수 있도록 코드를 짜준다.

그러면 0번쨰 인덱스의 completed가 true로 바뀐것을 확인할 수 있다.

4.

이젠 좀 더 쉽게 구분하기 위해 완료한 목록은 색깔이 바뀌도록 해보자

<ItemStyle

            completed={list.completed}

            className="list_item"

            key={index}

            onClick={() => {

              history.push("/detail/" + index);

            }}

          >

            {list.text}

          </ItemStyle>

목록 하나하나의 스타일을 같고있는 ItemStyle에서 props를 넘겨주기 위해서 completed={list.completed}를 지정해 준뒤에

const ItemStyle = styled.div`

  padding: 16px;

  margin: 8px;

  background-color: ${(props) => (props.completed ? "orange" : "aliceblue")};

`;

자바스크립트를 쓰기위해 ${}를 사용하며 삼항연산자를 통해 완료하기가 되었을때(true일때) orange로 바뀌도록 만들어 보자.

잘 바뀌는 것을 볼 수 있다.

5.

이젠 프로그래스 바를 달아보자 src에 Progress.js 컴포넌트 파일을 만들어준다.

import React from "react";

const Progress = (props) => {

  return <p>progress!</p>;

};

export default Progress;

대강 틀만 잡아서 작성해보고 App.js에서 

import Progress from "./Progress";

<Progress />

import후 <Progress />를 타이틀 밑에 넣어주면

잘 나오는 것을 확인할 수 있다.

const Progress = (props) => {

  return (

    <ProgressBar>

      <HighLight></HighLight>

    </ProgressBar>

  );

};

const ProgressBar = styled.div`

  background: #eee;

  width: 100%;

  height: 40px;

`;

const HighLight = styled.div`

  background: orange;

  width: 50%;

  height: 40px;

`;

일단 뷰를 다 만들어 준 후에 완료하기 개수에 따른 색 변화를 위해 useSelector를 통해 state를 가져와 보자

  const bucket_list = useSelector((state) => state.bucket.list);

console.log(bucket_list);

콘솔을 찍어보면 데이터를 잘 가져오는지 확인할 수 있다.

  let count = 0;

  bucket_list.map((b, idx) => {

    if (b.completed) {

      count++;

    }

  });

  console.log(count);

완료하기를 누른 개수를 확인하기 위해 map함수를 통해 반복문을 만들어 주고 콘솔로 찍어보자.

처음엔 0이었다가 하나씩 완료할 때마다 count가 올라가는 것을 확인할 수 있다.

<HighLight width={(count/bucket_list.length) * 100 + "%"}/>

누른 갯수에 따라 orange 부분의 넓이를 바꿔주기 위해 위와 같이 만들어주고,

const HighLight = styled.div`

  background: orange;

  width: ${(props) => props.width};

  height: 40px;

`;

HighLight의 styled에 적용해준뒤 확인해보면?

잘 작동한다!!

transition: 1s; // 1s width 이런식으로 넓이로 지정해주면 넓이에만 적용이 되고 시간만 써주면 전체적으로 적용이 되어 변화가 있을때 발동된다.

 

styled에 위와 같이 추가해주면 완료하기를 할 때마다 부드럽게 차오르는 것을 볼 수 있다.