항해99의 과제로 기존의 state로 작성한 todoList를 redux로 옮기는 작업을 하면서
나는 정말 개발자로써 능력이 의심되기 시작했다.
남들과 같은 코드로 가도 신기하게 오류를 만들어 내는 나의 능력이 대단하다고 느껴질 참이었다.
어떻게 보면 남들보다 더 고중량으로 운동을 하는 셈이니 뇌근육이 더 느는 걸까?
과제를 하면서 별의별 신기한 에러랑 현상을 보고 내 자신이 이상하게 성장하는 것을 실시간으로 느끼고 있다. 뭐랄까 벌크업은 되고 있는 데 이상한 방향으로만 근육이 크는 기분?
아무튼 과제를 하다가 신기한 현상을 봐서 적어본다.
만약 우연히 이 글을 접한 고수분들은 바보인 저에게 조금이라도 관심을 주시면 감사하겠습니다...
초보 개발자에게 고수님들의 관심은 많은 도움이 됩니다.
상황 설명 : 할일 목록에서 버튼을 누르면 상세정보로 들어가는 페이지를 만들었다.
이제 그 페이지에서 useParams를 이용해서 페이지의 id값을 구하고 redux안의 initailState의 안에 미리 만들어 두었던 id값을 비교해서 id가 같은 배열의 데이터를 출력하기만 하는 todoList를 만들때 누구나 하는 기초적인 상황이다.
TodoItem.module
import React from 'react'
import { useNavigate } from 'react-router'
const AddTodo = 'todo/addTodo'
const DeleteTodo = 'todo/deleteTodo'
const UpdateTodo = 'todo/updateTodo'
// 액션 생성자 함수
export const addTodo = (newTodos) => ({
type: AddTodo,
payload: newTodos
})
export const deleteTodo = (id) => ({
type: DeleteTodo,
payload : id
})
export const updateTodo = (id) => ({
type:UpdateTodo,
payload : id
})
const initialState = {
todos:[
{ id:0, title:'코딩하기', todo:'투두리스트 만들기', isDone:false },
{ id:1, title:'운동하기', todo:'러닝머신 뛰고오기', isDone:true },
{ id:2, title:'책읽기', todo:'자기진로교재 한권읽기', isDone:false }
]
}
const todosItem = (state=initialState, action) => {
switch(action.type){
case AddTodo :
return {
...state,
todos : [...state.todos, action.payload],
};
case DeleteTodo:
console.log('payload의 id는?', action.payload)
const Id = action.payload.id
return{
...state,
todos : state.todos.filter(todo => todo.id !== Id)
}
case UpdateTodo:
const updateId = action.payload.id
return{
...state,
todos : state.todos.map((todo)=> todo.id == updateId?
{...todo, isDone : !todo.isDone }:todo)
}
case 'todo/readTodo':
return{
}
default:
return state
}
}
export default todosItem;이건 initalState이 담겨져있는 module이다.
그리고 이게 이번 본문의 핵심인 세부정보.jsx이다.
import React from 'react'
import { useNavigate, useParams } from 'react-router'
import { DetailForm, StBtn } from '../components/ButtonDesign'
import { useSelector } from 'react-redux'
const TodoDetail = () => {
const todo = useSelector(state=>
state.todosItem.todos
)
// 받은 데이터의 id를 표시하기 위해 parms사용
const id = useParams()
const navigate = useNavigate()
const ParseInt = parseInt(id)
const detailInfo = todo.find(item=> {
item.id === ParseInt
})
console.log('받은 id', id)
console.log('todo의 값',todo)
console.log('조건에 부합된 id값',detailInfo)
return (
<DetailForm>
{detailInfo?(
<>
<StBtn style={{marginLeft:'67%',}} onClick={()=>navigate('/')}>이전으로</StBtn>
<div style={{paddingLeft:'5%'}}>id : {detailInfo.id}</div>
<div style={{fontSize:'20px', fontWeight:'bold',paddingLeft:'5%'}}> 제목 : {detailInfo.title} </div>
<div style={{paddingLeft:'5%'}}> 할일 : {detailInfo.todo}</div>
</>
) : (<p>찾지 못했습니다</p>)}
</DetailForm>
)
}
export default TodoDetail이렇게 작성했고 이제 detailInfo에서 조건에 부합한 값만 출력되면 되는 문제였다. 그런데
엥??
보시다시피 마지막에 조건에 부합된 id값에서 undefined가 나왔다.
아무리 해도 많은 수에 console을 찍어보았고....
결과는 너무 이상한곳에서 나왔다!!
const id = useParams()
const navigate = useNavigate()
const ParseInt = parseInt(id)
const detailInfo = todo.find(item=> {
return(
console.log('받은 파람스 값', parseInt(id))
// item.id === ParseInt
)
})이런식으로 find로 조건을 찾기 전에 숫자형으로 변형한id의 값을 console로 찍어보니...
????????
이상하게 받은 파람스 값이 NaN으로 출력되는 것 아닌가??
분명 내가 알기로 NaN은 형변환이 안되거나 값자체가 안나왔을 때 출력되는 값으로 알고 있었는데
문자열 변환전에는 잘나온다...
도대체 이게뭐지... 이건 아무리 찾아봐도 안나오더라.. 아마 이런 경우는 정말 드문 경우인듯하다
우선 과제가 있어 세부정보에서부터 state값을 받아서 할당받는 식으로 해결은 되긴했는데...
아무리 생각해도 이경우가 이해가 안되서 글을 남긴다. 지금도 해결이 안된 경우이니 지나가는 고인물분께서 우연히 이 글을 보았다면 조금이라도 관심을 주면 너무 감사할것 같습니다 ㅜㅜ
오늘도 이렇게 성장아닌 성장을 했다....
