[TIL] 더 좋은 것을 위한 고민

🔥알고리즘 문제 풀이

프로그래머스 / level2 / 괄호 회전하기

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

stack 자료구조를 이용해야 쉽게 풀 수 있는 문제.

stack 입문 문제로 괜찮아보인다.

 

📜리액트 숙련주차 시험

[🤪망가진 코드 해결하기]

 

✅ 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.

//todos.js

// TODO : 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.
// ANCHOR : 잘못되어 있었던 initialstate object 구조 수정
// ANCHOR : 기존 id값이 nextId()와 겹쳐서 id 수정

const initialState = {
  todos: [
    {
      id: "react1",
      title: "리액트 시험",
      body: "뿌셔",
      isDone: false,
    },
    {
      id: "react2",
      title: "리액트",
      body: "리액트를 배워봅시다",
      isDone: false,
    },
  ],
  todo: [],
};

todos: []외에 다른 object도 내부에 존재했었음.
그래서 올바르게 아이템이 추가되지 못했던 것.
initialState의 구조를 올바르게 바꿨음.

 

✅ 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.

//todos.js

const todos = (state = initialState, action) => {
  switch (action.type) {
    // TODO : 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.
    // ANCHOR : 불변성 지키면서 object 구조에 맞춰 return 수정.
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          action.payload
        ],
      };

 

1번에서 수정한 initialState에 맞게 원래있던 아이템들이 소실되지 않도록 

불변성을 지키면서 아이템을 추가할 수 있도록 변경하였음

 

✅ 삭제 기능이 동작하지 않음.

//todos.js

    // TODO : 삭제 기능이 동작하지 않음. 
    // ANCHOR : DELETE 액션만 존재해서 reducer에 추가
    case DELETE_TODO:
      return {
        todos: state.todos.filter((todo) => todo.id !== action.payload)
      };

 

삭제기능에 대한 action creator만 존재해서 삭제 액션에 대한 reducer를 추가해주었음

✅ 상세 페이지에 진입하였을 때 데이터가 업데이트 되지 않음.

// Detail.jsx

const Detail = () => {
  //TODO : 상세 페이지에 진입 하였을 때 데이터가 업데이트 되지 않음.
  // ANCHOR : useSelector에서 id값과 동일한 값을 찾아서 보여주도록 수정
  const todo = useSelector((state) => state.todos.todo);
  const dispatch = useDispatch();
  const { id } = useParams();
  const navigate = useNavigate();


  useEffect(() => {
    dispatch(getTodoByID(id));
  }, [dispatch, id]);

 

// todos.js
    case GET_TODO_BY_ID:
      return {
        ...state,
        todo: state.todos.find((todo) => {
          return todo.id === action.payload;
        }),
      };

dispatch를 통해서 같은 id값을 todo 객체에 넣는다.

앞서 찾았던 todo 아이템을 useSelector를 이용해서 state.todos.todo에서 읽어온다.

✅ 완료된 카드의 상세 페이지에 진입하였을 때 올바른 데이터를 불러오지 못함.

// List.jsx

{todos.map((todo) => {
  if (todo.isDone) {
    return (
      // TODO : 완료된 카드의 상세 페이지에 진입 하였을 때 올바른 데이터를 불러오지 못함.
      // ANCHOR : :id 경로를 올바르게 수정
      <StTodoContainer key={todo.id}>
        <StLink to={`/${todo.id}`} key={todo.id}>
          <div>상세보기</div>
        </StLink>

 

원래는 path가 map에서 생성되는 index로 되어있었음
아이템의 id로 :id 경로를 올바르게 수정해주었음

✅ 취소 버튼 클릭시 기능이 작동하지 않음.

// List.jsx
	return(
    	(...)
		{/* TODO : 취소 버튼 클릭시 기능이 작동하지 않음. */}
		{/* ANCHOR : onClick 콜백함수 수정 */}
		<StButton
        	borderColor="green"
        	onClick={() => onToggleStatusTodo(todo.id)}
        >
			{todo.isDone ? '취소!' : '완료!'}
        </StButton>
        (...)
   );

 

onClick 콜백함수를 선언해둔 onToggleStatusTodo함수로 수정하였음

 

Redux 관련 고민 사항

redux에서 한계점을 느낀 부분은 useSelector가 구조적으로 store의 전체 데이터를 가져올 수 밖에 없다.

그렇기 때문에 원하는 한가지 아이템을 가져오고 싶다면 다른 우회 방법을 사용해야 한다.

 

1. useSelector로 다 가져온 다음 찾기

  const toDo = useSelector((state) => state.toDoList).find(
    (toDo) => toDo.id === param.id,
  );

이 예시에서는 find를 사용해서 찾았다.

 

2. 찾은 값을 store안에 따로 저장하기

const initialState = {
  todos: [
    {
      id: "react1",
      title: "리액트",
      body: "리액트를 배워봅시다",
      isDone: false,
    },
  ],
  todo: [],
};


const todos = (state = initialState, action) => {
  switch (action.type) {
  	...
    case GET_TODO_BY_ID:
      return {
        ...state,
        todo: state.todos.find((todo) => {
          return todo.id === action.payload;
        }),
      };
  default:
      return state;
  }
};

GET_TODO_BY_ID 액션을 통해서 같은 id값을 찾아서 state.todo에 넣어준다.

const Detail = () => {
  const todo = useSelector((state) => state.todos.todo);
  const dispatch = useDispatch();
  const { id } = useParams();

  useEffect(() => {
    dispatch(getTodoByID(id));
  }, [dispatch, id]);

getTodoByID 액션은 useEffect로 mount될 때 실행되며 

detail페이지에서 보여주려는 아이템의 id값과 동일한 데이터는 state.todo에 저장되기 때문에

useSelector를 이용해서 state.todos.todo에 있는 값만 읽어오면 된다.

 

이 두가지 방법 중에 어느 것이 더 좋은 방법인지에 대한 고민이 있었다.

 

첫번째 방법은 데이터를 읽어오는 과정에서 store 전체를 가져오는 프로세스가 있다는 단점이 있다.

하지만 간결하고 직관적이다.

 

두번째 방법은 첫번째 방법의 store 전체를 가져오는 비효율적인 프로세스는 해결했지만,

store 내부에 찾은 데이터를 저장할 객체를 하나더 만들어줘서 관리해야한다는 점.

또 장기적으로 프로젝트가 커지는 상황이라면 회피해야할 방법이라는 생각이 들었다.

첫번째 방법에 비하면 store의 구조가 복잡해진다.

 

그리고 useSelector라는 읽어오는 작업 앞에

dispatch를 해주어야하는 과정이 더 필요하다는 점

심지어는 useEffect로 해줘야된다는 것에서 불편하고 직관적이지도 못하다.

 

그래서 1번 방식을 채택했다.

 

 

😎오늘 한 일

📜시험

🔩운동

🕵️‍♂️알고리즘 문제풀이

🙇🏻‍♀️기술매니저 순회

✅투두리스트 리팩토링

👻아무 말

어떤 기능의 작동 방식에 대해서 문제점이 있는데

다른 해결방식이 존재하는지

없다면 가능한 각각의 방법들중에

어떤 것이 제일 효율적인지 깊게 생각해보게 된 것 같다.

 

내일부터는 심화 주차의 시작인데 기대가 된다.