개발 노트

useEffect = (async () => { await request ..... ..... } 위와같이 쓰면 끊임없이 프라미스를 불러온다고 쓰지말라한다. useEffect에서 async를 쓰려면 const getFeedMove = async (joNo) => { const sql = '/feeder/movedata/' + joNo; await request .get(sql) .then((res) => { let data = res.data; setFeedMove(data); console.log('data :>> ', data); }) .catch((error) => { console.log(error); }); }; useEffect(() => { getFeedMove(joNo); }, []); 위..

useEffect 내에서 무언가를 리턴할 때 발생하는 문제. useEffect가 리턴할 수 있는 것은 함수밖에 없다. 예를 들어 return false 하면 에러가 나고 그냥 return하면 에러가 안난다.

antdesign에서 table 컴포넌트를 가져와 사용하던 도중 화면을 줄이면 table 넓이가 깨지는 현상이 일어났다. 이유는 뭔가 했더니 table의 부모값에 overflow:auto를 꾸준히 넣어놨다가 다 없앴는데 이것이 이유였다. 하지만 antd에서는 부모값에 overflow:auto가 있으면 첫행,첫열이 고정이 안잡히기에 사용할 수가 없었다. 그래서 부모값에 grid를 주고 사용하니 별 문제없이 작동하였다.

antdesign의 table을 쓸때 내부 옵션인 scroll을 써야 정상적으로 작동된다. 부모 값에 overflow auto를 주면 스크롤이 제대로 작동되지 않는다.

변수 선언과 state 선언의 방식 사이에 차이점이 있더라. function App() { let variable = '변수 선언'; const [state, setState] = useState('기본값') return ( {title} ); } 만약 위에 설정된 title의 값이 변수라면 다시 변경 후 재랜더링을 '해줘야'하는 경우가 발생한다. 하지만 state는 변경이 발생하면 state가 포함된 html을 '자동으로 랜더링'해준다. 따라서 state는 자주 변경이 될 것 같은 데이터들을 저장하는 것이 좋다. 즉 변수선언과 state선언의 차이점은 재랜더링의 차이라고 보면 되는데, 확 와닿지가 않는다. 좀더 작업하면서 차이점에 익숙해져야 할 것 같다.

버튼을 클릭하여 정보를 삭제하고자 할때 zustand에서 persist가 적용된 전역 state를 사용하면 삭제가 되는 듯 하다가 다시 정보가 복구되어 유지되더라. 그래서 나는 persist를 적용한 state와 적용하지 않은 state를 만들어 웹에서 마지막에 남은 정보를 useEffect로 persist된 state에 저장하고 버튼을 클릭시 onclickevent로 적용안된 state에 정보를 주어 그 정보를 실시간으로 사용 후 다시 persist된 state에 저장하는 식으로 사용하였다. persisted state -> nonpersisted state -> persisted state 와 같은 작업 순서인 것인데 이게 맞는 방법인지는 잘 모르겠다.