[NDD-136] setting 전역 hook 작성 (1h/2h) #38
Conversation
| type PageStatus = 'pending' | 'success' | 'error'; | ||
| type RecordMethod = 'local' | 'idrive' | 'none' | undefined; | ||
|
|
||
| type SelectedData = { |
There was a problem hiding this comment.
[p-1]
아마도 이 형태에서는 여러개의 selectedData가 들어가지 못할것으로 생각됩니다.
배열형태로 저장됨이 필요하며,
type QuestionData = {
id: number;
content: string;
answer: string;
};
type SelectedData = QuestionData[];이런 느낌으로 바꿔보면 어떨까요?
export const questionSetting = atom<{
status: PageStatus;
selectedData: SelectedData;
}>({
key: 'questionSetting',
default: {
status: 'pending',
selectedData: [], // 빈 배열로 초기화
},
});
There was a problem hiding this comment.
현재 이 타입에서는 아래와 같이 저장할 수 있어서 여러개의 데이터가 들어갈 수 있을 것이라고 생각합니다!
사용자가 문제 선택 박스를 클릭함에 따라서 상태에서 추가되고 제거되어야 하니 배열보다는 현재 객체 형태가 더 좋다고 생각합니다.
const test:SelectedData = {
key1: {
id: 1,
content: "content 1",
answer: "anser 1"
},
key2: {
id: 2,
content: "content 2",
answer: "anser 2"
}
}There was a problem hiding this comment.
제가 recoil을 잘 몰라서 일까요 😂 잘 이해가 안되는 부분이 있어요! 예시를 한번 볼 수 있을까요?
key1 이나 key2는 저희가 사용할 변수명이 아닐거 같기도하며 (어떤 key 네이밍이 좋을까요)
제 생각에는 camera 페이지에서 return 받는 최종값은 배열형태로
배열 내부의 객체 형태로 받는것이 여러가지 의미로 편할 수 있을거 같습니다!
예를들어
const selctedQuestions = [{
title : "1번 질문",
answer : "1번 질문에 대한 답변"
},{
title : "2번 질문",
answer : "2번 질문에 대한 답변"
}
]
...이런 형태로 말이죠!
There was a problem hiding this comment.
아하 어느정도 이해했습니다. 왜 key 값으로 관리가 되어야 할지에 대해서 동의했습니다!!
아마 getter 등을 사용해서 반환할때만 배열형태로만 반환하면 될거 같긴하군요
There was a problem hiding this comment.
네넵! 실제 인터뷰 페이지에서 사용될 때 Object.values() 등을 사용해서 배열로 변환해서 사용하면 될 것 같네요!
There was a problem hiding this comment.
앗 요부분은 제가 잘못 타이핑 되었네요. 수정본은 이렇습니다
| type SelectedData = { | |
| type SelectedData = { | |
| [key: string]: { | |
| id: number; | |
| content: string; | |
| answer: string; | |
| }[]; | |
| }; |
제가 의도한 바로는 slectedData를 각 각 분야 별(FE,BE,CS 등등)로 선택된 배열을 묶어서 전역 상태로 사용하려고 합니다
지금 기획에서는 성인님 쪽에서 분야를 제외 하고 사용을 하셔서 성인님이 제시해 주신 부분이 맞지만 전역적인 관점에서 봤을때 나중에 문제에 대한 분류를 달아준다던가. 진행상황을 저장한다던가 등 해당 질문의 분류가 필요해 질때를 고려해서 작성하였습니다.
There was a problem hiding this comment.
아!! key값에 카테고리가 저장되는거였군요!! 제가 잘못 이해했네요!
그럼 각 선택된 질문은 배열 형태로 관리되는걸까요?
| @@ -0,0 +1,43 @@ | |||
| import { atom } from 'recoil'; | |||
There was a problem hiding this comment.
[p-2]atoms라는 새로운 폴더가 생성되었으니, tsconfig.ts 와 webpack.config.js의 alias도 추가해 주시길 바랍니다!
Deploying with
|
| Latest commit: |
441cca7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://167c56e3.gomterview.pages.dev |
| Branch Preview URL: | https://feature-ndd-136.gomterview.pages.dev |
Why
다른건 건드릴수가 없어서 어쩌다보니 atom 생성만 하였습니다. 그래서 한시간 정도 감소했네요.
빠르게 머지하고 성인님이 해당 코드 사용하시죠!!
How
페이지 마다 얻은 상태를 전역으로 관리합니다. atom의 특징을 조금 찾아보니까 하나의 큰 스토어 안에 state가 여러개 있는게 아니라 모듈로 나눌 수 있다는 장점이 크더라고요. useState를 분리하는 기준과 똑같이 나누어 보았습니다.
성인님이 페이지별로 세팅 값을 토대로 간단하게 더미데이터를 만들고 작업을 진행하시면 될것 같습니다.
포인트1
타입은 아직 폴더 구조나 어디에 추가로 의존하고 있을지 몰라서 같은 파일에 놔두었는데 아마 SlectedData의 타입은 문제 데이터를 받아오는 api fetch 결과값과 똑같을것이라고 예상되어서 해당 부분 작업할때 합치는 쪽으로 가는게 좋을것 같습니다.
포인트2
제가 이해한 내용을 공유드리면 recoil은 3가지 방법으로 상태를 받아올 수 있었는데요.
굉장히 별거 없더라고요. 지금까지의 느낌은 그냥 전역 useState그 자체인것 같습니다