리덕스에서 배열state를 가져와 map을 돌려 사용하려고 했다. 최신거부터 보여주기 위해 reverse를 하고 돌리는데 const productionState = useSelector((state) => state.productionData); 이 배열을 reverse 시키니까 참조한 메모리 값이 reverse되어버려 state의 배열도 바꿔버렸다. 이를 해결하기 위해 깊은복사를 이용했다. const productionData = [...productionState];

"Cannot update a component from inside the function body of a different component." 이 오류가 떴다.. 구글에 쳐보니 페이스북 깃허브에 issue칸에 설명이 되있었다. Bug: too hard to fix "Cannot update a component from inside the function body of a different component." · Issue #18178 · face Note: React 16.13.1 fixed some cases where this was overfiring. If upgrading React and ReactDOM to 16.13.1 doesn't fix the warning, read thi..

나는 redux에 user_id를 받아와 저장후 이 값을 빼서 썼다. 하지만 어디선가 리렌더링 되면서 redux값을 초기화 시키고 redux에 있는 state값들을 비워버렸다. 어디서 이런 오류가 발생하는지 계속 찾아봤지만 찾지 못했다.. 그래서 로그인을 유지시키기 위해 setInterval로 로그인후 주기적으로 state값을 넣어주는 함수를 만들었다. 하지만 setInterval이 리렌더링 되면서 쌓이는 것같이 점점 더 빨라졌다. 생각을 하다가 state에 저장된 user_id 불러와서 useEffect(() => { dispatch(loginAction.loginCheck()); }, [user_id]); state의 user_id가 바뀔때마다 로그인을 체크를 하기로 했다.

하위 컴포넌트에서 set함수를 받아 부모 컴포넌트의 state값을 변경해주려고 한다. redux를 이용하면 너무 양이 많아질것 같고 props로 넘기기엔 부모와 자식간의 사이에 컴포넌트들이 많았다. 그래서 좀더 효율적인 방법이 없을까 고민하다가 useContext라는 훅을 찾아냈다. 1. useContext useContext는 부모에서 하위컴포넌트로 값을 전달할 수 있다. 기존 props와 다른 점은 중간다리 역할이 없어도 멀리 있는 하위 컴포넌트에 곧바로 전달할수 있다는 점이었다. 이를 사용하면 redux관리, props관리도 쉬울것 같아서 useContext를 쓰기로 생각했다. 2. useContext 사용법 (1) : useContext로 데이터 보내기 useContext에서 전달하는 값은 '객체..

백엔드에서 multer를 이용해서 이미지를 저장후 프론트에서 불러오려고 했다. 하지만 react에서 상대경로로 backend 폴더의 이미지 경로를 불러오지 못했다. react에서는 public폴더를 제외하고 src폴더 외부의 파일을 불러오지 못한다는것을 검색하며 알아냈다. 그래서 multer의 저장장소를 front의 public 폴더에 저장했다. 그렇게 src="절대경로" 로 불러 왔는데 어딘 되고 어딘 안나와서 구글링을 했다. 그 결과 절대경로 앞에 "/" 를 붙여줘서 public 폴더라는 표시를 해줘야 했다. 이미지 경로를 불러오는 걸 구글링하며 이미지 src를 불러오는 방법이 4가지가 있다는 것을 알게되었다. 1. public 폴더에 저장후 절대경로 public 폴더에 imgs폴더를 만들어 이미지들..