to do list 구성
어려웠던 점
입력 모달과 수정/삭제 모달 겹침 현상
문제점
모달마다 상태를 만들어서 관리했더니 두개가 겹쳐질 때가 생겼다.
해결방안
입력 모달과 수정/삭제 모달 두개 뿐이니깐 상태를 하나 두고 상태가 false일 때 입력모달 true일 때 수정/삭제 모달이 나오게 수정했다.
수정 기능 구현하기
문제점
처음에는 todolistPage에 입력 모달과 수정/삭제 모달이 들어가 있고, 입력 모달은 + 버튼만 있는 상태와 입력창이 있는 상태 2가지로 구성되어 있었다. 그리고 입력 모달의 2가지 상태는 useState로 입력 모달 안에 상태를 만들어 사용했다.
그러다 보니 수정/삭제 모달에서 수정하기 눌렀을 때 입력창 상태의 입력 모달을 열지 못하고 초기 상태인 +버튼 모달이 나타났다. 입력모달의 상태를 수정/삭제 모달에 전달이 불가능한 문제가 발생했다.
해결 방안
리덕스를 사용해 입력 모달의 상태를 전역 상태로 변경해서 수정/삭제 모달에 전달해 줬다.
// modal이 false이면 입력모달 true면 수정/삭제 모달
// input이 false이면 +버튼 true이면 입력창
// correct가 true이면 수정 false 목록추가
export const modalState = {
modal: false,
input: false,
correct: false
}문제점
수정할 때 원래 있던 내용을 입력창에 불러와야함
해결 방안
입력 모달은 수정/삭제 모달이 수정버튼을 눌렀는지 판단하고 value 값을 변경해야해서 수정버튼을 눌렀는지 판단할 correct 상태를 새로 만들었다. 그리고 useEffect로 textarea의 value 값 변경해 주었다.
처음에 변경만하는 코드 작성했더니 수정 후 다른 목록을 삭제할려니 오류 발생했다. 수정 판단 상태를 초기화해주지 않아서 삭제를 누르면 삭제 후 수정으로 넘어가서 삭제한 목록을 수정할려니 발생하던 오류였다. 그래서 뒤에 초기화 코드 추가해주었다.
useEffect(() => {
if (correct) { // true면 입력창에 선택한 목록의 내용이 나타야한다.
const filtered = todoState.filter((el) => el.id === id)[0].todo;
setInput(filtered);
dispatch(CorrectSet(false)); //상태 초기화 해줌
}
}, [id]); // id 상태가 변경되면 실행하게 했던 삭제버튼 클릭 시에도 id가 변경되서 실행됨사소한 오류 및 실수
- 컴포넌트 앞에 대문자로 해야함
- map 사용 시 키값 넣어주기
- 스타일 컴포넌트는 컴포넌트 함수 밖에 입력하기
- 배열 합칠 때는 겹치는 내용있으면 뒤에 오는 배열이 기준이되므로 주의하기
마치며..
피그마로 먼저 구체적으로 구상하고 코드를 작성하면 편하다는 걸 느꼈다. 기준이 있으니깐 보고 똑같이 만들면되서 편했다.
다음에는 상태 어떻게 구성할 건지 미리 생각해보고 코드 작성해야겠다. 중간에 수정할려니 매우 번거롭고 헷갈렸다..ㅜ 특히 변수명들이 헷갈려서 다음에는 좀 더 직관적인 변수명을 작성할 수 있도록 해야겠다.
그리고 피그마로 틀 장성할 때 컴포넌트의 포함 관계 생각해면 css로 배치할 때 좀 더 편하게 할 수 있을 것 같다. 왜 안 움직이나 확인해 보면 자식의 자식인 경우가 많았다.
시간이 난다면 입력창 나타나면 자동 focus 구현하고 싶은데 과연 언제 할 수 있을 지.. ㅋㅋ 목표세우기 페이지랑 만든사람 페이지도 못 만들고 있는데..
간단한 앱이지만 처음부터 내가 만들다보니 스스로 부족할 점을 알 수 있어서 좋았다. 리덕스를 좀더 공부해 봐야겠다.
그리고 미완성이지만 todo기능이라도 구현하니 성취감을 느낄 수 있어서 좋았다.
