개발자
안녕하세요. redux를 recoil로 변경하면서 typescript도 같이 사용해보고 있는데 감이 잘 잡히지 않네요 타입스크립트에서 다른타입의 값을 가져와서 비교후 처리해야한다면 어떻게 해야할지 모르겠어서 질문을 드리게 되었습니다. 애초에 이러한 경우는 성립을 하지가 않는걸까요? 컴포넌트에서 deleteTagHandler에서 Tag타입으로 값을 받아와서 setRemoveToNoteTags()로 Tag타입의 매개변수 tag를 전달해주는데요 selector에서는 NotesList의 타입을 지원하고 있어서 그런거 같습니다... 가르침 부탁드리겠습니다 ㅠㅠㅠ 컴포넌트``` const setRemoveToNoteTags = useSetRecoilState(removeTagsSelector); const deleteTagHandler = (tag: Tag): void => { setTagsState({ type: "delete", tagsList: [tag] }); setRemoveToNoteTags(tag); }; ``` selector``` interface NotesList { mainNotes: Note[]; archiveNotes: Note[]; trashNotes: Note[]; editNote: null | Note; } const initialState: NotesList = { mainNotes: [...notes], archiveNotes: [], trashNotes: [], editNote: null, }; export const notesListState = atom({ key: "notesListState", // 고유한 키 default: initialState, // 초기 상태 }); export const removeTagsSelector = selector({ key: "removeTagsSelector", get: ({ get }) => {}, set: ({ get, set }, newValue: Tag) => { const notesList = get(notesListState); const removeTagFromNotes = (notes: Note[]) => { return notes.map((note) => { return { ...note, tags: note.tags.filter(({ tag }) => tag !== newValue.tag), }; }); ...... ```
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 12월 06일
코드를 보면 `removeTagsSelector`가 `Tag` 타입의 newValue를 받아서 해당 태그를 삭제하는 것으로 보입니다. 이후, note들에서 해당 태그를 제외하고 새로운 노트 리스트 `removeTagFromNotes`를 반환합니다. 문제는 아마도 newValue 앞에 위치한 Tag를 선언하는 부분일 가능성이 높습니다. 여기서 `Tag`는 올바른 타입인지 확인해보세요. 예컨대, Recoil의 set 함수에 적용되는 newValue 값은 일반적으로 Recoil atom의 default값과 같은 형태여야 하는데, 현재 상황에서는 모든 notesListState 내부의 각각의 notes가 처리되어야 하므로 그런 경우라면 `Array<Tag>`와 같이 배열 형태로 설정해야 할 수도 있습니다. 흔히 볼 수 있는 상황은 set 함수 인자인 newValue가 기대한 어떤 특정 타입(`Tag`라 가정)을 사용해야 하는데 실제 코드에서는 다른 타입을 사용하고 있다거나, 약간 다른 구조/모양새로 전달되고 있다거나 하는 문제입니다. 또 한 가지 유념할 점은 TypeScript에서 함수 내부에서 복잡한 로직을 처리할 때 map이나 filter와 같은 고차함수를 사용하면 TypeScript 추론 엔진이 항상 올바르게 동작하지 않을 수 있다는 것입니다. 때로는 반복문이나 명시적인 타입 어노테이션 등을 통해 좀 더 명확하게 코드를 작성할 필요가 있습니다. 그러면 아래와 같은 식으로 수정해볼 수 있을 것 같습니다. ```ts set: ({ get, set }, newValue: Tag[]) => { const notesList = get(notesListState); const removeTagFromNotes = (notes: Note[]) => { return notes.map((note) => { return { ...note, tags: note.tags.filter(({ tag }) => !newValue.find(nv => nv.tag === tag)), }; }); ...... ``` 위의 코드는 추가로 전달된 newValue가 배열 형태라 가정하고, filter 안의 검사 로직에서 find 함수를 사용해 배열 내부에 일치하는 태그가 있는지 확인하고 그 결과를 기준으로 필터링합니다. 하지만 여전히 이 코드는 추론적인 부분이 많으니, 애플리케이션의 전체 로직과 상태 구조를 충분히 이해할 수 없는 한 완벽한 해결책을 제공하기 어렵습니다. 디버깅 및 코드 리팩토링 과정에서 오류 메시지와 함께 TypeScript에서 추천하는 사항을 최대한 활용해 보세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!