[항해 99 주특기 주차 4일차]

<회고록>

오늘은 혜경님과 함께 항해 99 2주차 숙제 리덕스를 활용한 Todo List 만들기를 진행했다.

오늘은 시행착오가 크게 2가지 정도가 있었다.

    1. 리덕스의 불변성 관리

    2. flex 이슈

그래서 오늘은 이 2가지에 대해서 어떤 시행 착오 였고 어떻게 이를 해결했는지에 대해서 써볼려고 한다.

 

1. redux 정말 못살아....

redux의 불변성은 강의에서도 언급한 정말 중요한 개념이었다.

하지만 나는 이 개념을 듣고 나서 이게 어떤 면에서 중요한지 왜 중요하지에 대해서는 잘 몰랐다.

그리고 이번 숙제를 하면서 왜 중요한지에 대해서 알게 되었다.

1-1) 문제

Todolist에서 완료, 삭제 버튼을 클릭했을 때 완료, 삭제가 적용되지 않는 문제가 발생했다.

자세히 말하자면 완료, 삭제 버튼을 눌렀을 때 reducer에게 toggle이라는 타입의 액션과 id를 보내고

이 액션을 받은 reducer는 id에 해당하는 데이터의 isDone 키 값을 true로 바꿔주고 반환값으로 state를 보내는 로직이었다.

하지만 reducer가 해당 액션에 따른 이벤트를 처리하고 나서 todo cards들이 바뀌지 않는 것이었다.(즉 업데이트가 안됐다.)

1-2)해결

let todo = state.find((todo) => todo.id === action.id);
todo.isDone = !todo.isDone;

위 코드가 toggle을 했을 때의 로직이다. 이 로직에서 find 메소드를 쓰고 해당 데이터의 값을 바꿨다. 하지만 이때 state의 불변성은 지켜지지 않았다. 즉 state는 참조형 변수이기 때문에 결국엔 주소가 변하지 않고 값만 변한 케이스 였다. 그래서 결국 props의 변화가 일어나지 않았고 이로 인해서 업데이트가 진행되지 않았던 것이다.

그래서 나는 이를 해결하기 위해서 스프레드 연산으로 state의 불변성을 지켰다.

let todo = state.find((todo) => todo.id === action.id);
todo.isDone = !todo.isDone;
return [...state];

2. flex.....

flex와 관련해서 정말 많이 고생했다.... 왜냐하면 flex를 가지고 반응형으로 todo cards들이 움직이도록 구현할려고 했는데 쉽지 않은 길이었다. 그래서 나는  flex grow, flex shrink, flex items을 이용해서 화면 비율에 맞춰서 todo cards들이 늘어나고 줄어들고를 구현했다.

flex: 1 1 194px;

이를 보면 알 수 있듯이 flex grow, flex shrink를 각각 1씩 줘서 화면 비율에 맞춰서 todo cards가 늘어나고 줄어드는 것을 구현했다.