ㄹㅇ 리액트 진짜 처음 써봐서 그런데
const [dataStore, setDataStore] = useState(new TreeDataStore())
이렇게 초기화하고
setDataStore((prevDataStore) => {
prevDataStore.setData(jsonObj);
return prevDataStore;
});
이렇게 쓰고싶은데 이러면 setter을 실행했음에도 컴포넌트 재렌더링이 안되는게 문제인데
useState에 객체 넣고 쓰면 안되나?
TreeDataStore은 데이터 넣고 undo랑 redo 할 수 있게 이런식으로 구현해본거라
caretaker이 이전의 데이터 기록을 가지고 있게하려면 하나의 객체를 유지한 상태로 setData()를 통해 데이터를 설정해줄 필요가 있는데 ㅇㅇ..
class TreeDataStore {
constructor() {
this.data = {};
this.caretaker = new Caretaker();
}
setData(newData) {
this.caretaker.addMemento(new Memento(this.data));
this.data = newData;
}
undo() {
const previousData = this.caretaker.getPreviousMemento().getData();
this.data = previousData;
}
redo() {
const nextData = this.caretaker.getNextMemento().getData();
this.data = nextData;
}
}
// 생략
state 비교할때 얕은비교하고 리렌더링하는거라 이런식으로 안됨
그럼 이런건 setter에서 prevDataStore을 굳이 깊은복사라도 해서 값을 넣어줘야하나
ㅇㅇ 그런거 편하게하라고 immer라는 라이브러리 씀
아 이건 별로 좋은방식이 아님 - dc App
useRef로 클래스 넣고 넣고 이벤트를 노출시켜서 useEffect + useState로 상태 동기화 걸거나 - dc App
syncExternalStore로 해도됨 - dc App
보통은 redux recoil 이런거 미들웨어로 연동함 - dc App
EventEmitter 상속받거나 rx 내부적으로 가지면서 세터들에서 이벤트 발생시키고 effect에서 이벤트 구독하고 클래스 읽어서 useState로 따로 저장해서 읽으면 대부분 문제없을거임 - dc App
구독 해지만 잘 신경쓰면댐 - dc App
선생님 프론트하심?
ㅇㅇ - dc App
더미용이랑 실제 데이터용으로 useState 각각 두 개 쓴다는 뜻인가 하나는 리 렌더링을 발생시키기 위해 더미값을 setter에서 저장해주고, 실제로는 그 setter에서 발생된 이벤트를 받아와서 dataStore을 업데이트하고?
맞음 클래스의 데이터를 single source of truth로 만들고 렌더링을 위한 데이터는 그냥 복사본 - dc App
님은 근데 코드가 이미 케어테이커를 불변값처럼 쓰고있어서 복사는 필요없고 그냥 state에 set해서 쓸수있음 그래도 렌더링에 맞게 변환라는게 좋긴함 - dc App