원티드 프리온보딩 사전과제 todos.js 리팩토링

 

 

 

 

 

👆 구현한 auth 페이지 움짤

 

 

 

 

 

 

구현한 기능

 

TodoList 불러오기

Todo 추가 / 삭제 / 수정 / 수정 취소 기능

 

 

 

 

 

---

 

 

 

 

 

👇 src 폴더 구조

 

 

 

 

 

 

todo 폴더 안에

 

Todos.js - TodoList.js - Todo.js 로 나누었던 컴포넌트 중에서 리팩토링하며 TodoList.js 를 지웠다. 늘 List를 이용해 컴포넌트를 한번 더 나누었었는데 단순 props만 넘겨주는 역할은 굳이 필요없다는 동기의 피드백이 있었기 때문!

 

그리고 가독성을 위해 todos.js의 axios만 따로 분리해 API 폴더를 만들어 안에 TodoAxios.js 를 넣어주었다

 

 

 

 

 

 

 

 

 

 

 

👇 리팩토링한 코드

 

상위 컴포넌트

const Todos = () => {
  // todo 추가할 때 쓰이는 Input value state
  const [todoInput, setTodoInput] = useState('');
  
  // todo 데이터 받는 state
  const [todos, setTodos] = useState([]);

  const navigate = useNavigate();

  const onChangeTodo = e => setTodoInput(e.target.value);

// todo 추가시
  const plusTodo = async e => {
    e.preventDefault();
    const data = await TodoAxios.ADD(todoInput);
    setTodos(pre => [...pre, data]);
    setTodoInput('');
  };
  
// 체크박스 value
  const checkboxHandler = checkedId => {
    setTodos(pre =>
      pre.map(({ id, isCompleted, todo, userId }) => {
        if (id === checkedId) {
          isCompleted = !isCompleted;
        }

        return { id, isCompleted, todo, userId };
      })
    );
  };

// todo 수정 버튼을 눌러 수정모드로 전환, 해당 todo id를 checkedId 라는 인자로 받아 id 값이 일치하는 todo에 체크박스나 input value를 바꿈
(데이터 통신 ❌)

  const UpdateValue = (e, checkedId) => {
    setTodos(pre =>
      pre.map(({ id, isCompleted, todo, userId }) => {
        if (id === checkedId) {
          todo = e.target.value;
        }
        return { id, isCompleted, todo, userId };
      })
    );
  };

// todo 수정모드에서 제출 버튼 누를시 작동, todos에서 해당 id 값을 데이터 통신
  const TodoModify = async (e, checkedId, setToogle) => {
    e.preventDefault();
    const [targetValue] = todos.filter(({ id }) => id === Number(checkedId));
    await TodoAxios.PUT(checkedId, targetValue.todo, targetValue.isCompleted);
    setToogle(pre => !pre);
  };


// todo 수정모드 아닐 때 삭제 버튼 누를시 작동
  const TodoDelete = async (e, checkedId, setToogle) => {
    e.preventDefault();
    await TodoAxios.DELETE(checkedId);
    setTodos(prev => prev.filter(({ id }) => id !== Number(checkedId)));
    setToogle(pre => !pre);
    alert('삭제 완료');
  };

// todo 수정모드에서 취소버튼 눌렀을 때 입력한 값 사라지게 하는 함수
  const TodoChange = (e, checkedId, setToogle, Ref) => {
    e.preventDefault();
    setTodos(prev =>
      prev.map(({ id, userId, isCompleted, todo }) => {
        if (id === checkedId) {
          isCompleted = Ref.current[0];
          todo = Ref.current[1];
          Ref.current[1] = '';
        }
        return { id, userId, isCompleted, todo };
      })
    );
    setToogle(pre => !pre);
  };
  
  //todo 데이터 받아오는 함수
    useEffect(() => {
    TodoAxios.GET(navigate, setTodos);
  }, [navigate]);

 

하위 컴포넌트

const Todo = ({
  todoItem,
  checkboxHandler,
  UpdateValue,
  TodoModify,
  TodoDelete,
  TodoChange,
}) => {
  
  // 데이터 구조분해 할당
  const { id, todo, isCompleted } = todoItem;
  
  // 수정모드 (기본값 false)
  const [toogle, setToogle] = useState(false);
  
  // 같은 버튼을 toogle 값을 이용해 재사용
  const statusModify = toogle ? '제출' : '수정';
  const statusDelete = toogle ? '취소' : '삭제';
  const Ref = useRef([]);

  // todo 입력창 (수정모드가 아니라면 readOnly, 맞다면 수정가능하도록 UpdateValue 함수로 감)
  const inputProps = !toogle
    ? { readOnly: true }
    : { onChange: e => UpdateValue(e, id) };


  // 수정모드 값에 따라 수정 / 제출
  const TodoModifyProps = !toogle
    ? { // 수정 버튼을 눌렀을 때부터의 값을 저장 (후에 그 값만 취소하기 위함)
        onClick: () => {
          setToogle(true);
          Ref.current[0] = isCompleted;
          Ref.current[1] = todo;
        },
      } 
    : { // 수정한 값 todo 전체를 받아서 TodoModify 함수로 인자를 보냄
        onClick: e => {
          TodoModify(e, id, setToogle, todo);
        },
      };
      
      
  // 수정모드 값에 따라 삭제 / 취소 (수정 취소)
  const TodoDeleteProps = !toogle
    ? { onClick: e => TodoDelete(e, id, setToogle) }
    : {
        onClick: e => {
          TodoChange(e, id, setToogle, Ref);
        },
      };

 

 

 

이번에 제출하면서 프리온보딩 붙고자하는 목표도 있었지만

코드 퀄리티에 신경쓰고자 state 사용을 최대한 줄이려 노력했다

데이터 받는 state 외엔 쓰지 않고자 노력했는데 손에 익다보니 사실 리팩토링 전에는 이외에도 state 가 많았다 🥲

 

체크박스 value 때문에 고생을 많이했는데

수정모드에서만 체크박스가 수정이 되고 제출 버튼을 눌러야 값이 들어가 조금 아쉽다

 

체크 박스 누를 때마다 데이터가 바뀌는 기능을 구현해볼까 생각했지만 누를 때마다 데이터가 오가고 다시 렌더링 되는 건 

비효율적이라 느껴 아직 구현하지 않았다

 

이 작업으로 렌더링에 대해 다시 생각해보고 State 사용을 어떻게 해야할지 감이 조금은 잡힌 거 같아 많이 배웠다 생각한다

하위 컴포넌트에 있는 props를 상위로 끌어 다시 사용하는 것도 처음이었는데 값진 경험이라 느낀다

 

앞으로 있을 프리온보딩 프로젝트 들어가기 전에 보다 좋은 코드를 구현해내어서 뿌듯하다

완벽하고 잘 쓰여진 코드라곤 할 수 없지만 전보다 발전된, 성장하는 개발자에 한 발짝 더 다가섰다 느낀다 :)

 

 

 

 

 

👇 깃허브 레포 링크

 

https://github.com/Joeunji0119/wanted-pre-onboarding-frontend

GitHub - Joeunji0119/wanted-pre-onboarding-frontend