유이로운 개발일지

deleteDataHandler: (state, action) => { return state.filter((data) => data.id !== action.payload); }, 위 코드는 어떠한 data를 삭제하기 위한 코드이다. 이렇게 되면 컴포넌트에서 deleteDataHandler를 실행할 때 파라미터 안에 넣는 값이 action.payload로 들어오게 된다. 참고로 위 코드를 실행시키기 위해 필요한 action.payload값은 데이터의 'id'값이었다. 그렇기에 기존에는 아래와 같이 코드를 작성하였다. (함수 실행 부분) dispatch(deleteDataHandler(data)); (함수 저장 부분) deleteDataHandler: (state, action) => { return s..

여러가지 데이터를 찾을 때는 filter를 사용하지만, 한 가지 데이터만 찾으면 될 경우 find를 사용하면 된다. find를 사용하면 해당 조건에 맞는 가장 최상위 데이터를 뽑아낸다. 사용방법은 filter와 비슷하다. array.filter((item)=>{item.id===id}) 형태로 filter를 사용했다면 array의 배열 중 item의 id가 id라는 것과 동일한 모든 것을 꺼내 줄 것이다. 반면 array.find((item)=>{item.id===id}) 형태로 find를 사용하면 array의 배열 중 item의 id강 id와 동일한 것들 중 가장 최상단의 한 가지! 데이터만을 꺼내 준다. find를 사용할 때 주의점! find를 사용했는데 data가 없을 경우 undefined처리가 ..

원래 코드에서는 placeholder로 기존 값을 불러왔는데, 이렇게 하면 기존에 썼던 기존 값이 모두 날라가는 단점이 있다. 그래서 value에 기존 값을 넣으니, 정상적으로 불러와지긴 하지만 input칸에 있는 값을 수정할 수가 없었다. 이럴 경우에는 아래와 같이 value 대신에 defaultValue를 사용하여 기존값을 넣어 주면, input내에 기존 값을 그대로 유지하면서도 수정을 할 수 있다. setTitle(e.target.value)} /> 코드 예시는 위와 같다. (여기서 selectedData.title은 제 코드내에서 기존의 제목 값을 불러오는 역할을 합니다. 지정해둔 함수명등에 따라 변경하여 사용하시면 됩니다! 포인트는 placeholder, value 대신 defaultValue를..

React, react-router-dom을 이용하여 useState를 통해 데이터를 저장하고, 수정하고, 삭제하는 연습을 하는 과정에서 아래와 같은 순서로 데이터를 수정하려고 시도하였는데 문제점이 발생하였다. 1. newData라는 변수명을 만들어 이곳에 수정된 데이터를 저장한다. 2. updatedDatas라는 변수명을 만들어 이곳에 수정된 데이터를 반영한 데이터리스트(배열)을 저장한다. 하지만 분명 newData를 console.log로 찍어 봤을 때는 데이터가 잘 들어가는 것처럼 보임에도 불구하고 막상 제대로 배열에 반영이 되지 않는 듯한 모습을 보였다. 혹시 하는 마음에 async await을 이용하여 비동기 처리가 되겠끔 하고, newData의 저장이 확실히 끝나고 난 뒤 updatedData..