리액트 state 질문입니다.

Question

리스트에서 row를 클릭하면 해당 내용을 모달로 띄워주는 내용입니다 1. 리스트 페이지 들어가면 리스트 파일에 import한 상세 페이지 내부의 쿼리도 같이 실행됩니다.상세 페이지를 그냥 숨겼다가 보여줬다가 하는 방식이라 그런 거 같은데 어떻게 해야 할까요? 2. 리스트 페이지도 리스트 클릭해서 모달로 띄우는 상세 페이지도db에서 가져온 데이터가 화면에 안 뿌려지고다른 페이지를 갔다가 다시 리스트나 상세 페이지 오면 아까 db에서 받아온 데이터가 뿌려집니다.지금 막 db에서 온 데이터가 아닌 아까 화면에 안 뿌려진 데이터가... App.tsx 라우터로 목록 파일 링크 목록 . . } /> } /> } /> List.tsx 모달로 쓸 컴포넌트를 visible=false 로 해놨다가 row 클릭 시 true로 변경키 값으로 rtnNo 넘김 Detail.tsx export default function StorageDetail({ loading, visible, rtnNo, closeStorageReqDetailPopup, }: IStorageReqDetailPopup) { console.log(`detail rtnNo ======= ${rtnNo}`); const [dataStorageDetail, setDataStorageDetail] = useState({ rtnNo: "", usrNo: "", status: "", statusNm: "", prdNm: "", qty: "", prdPrc: "", estDt: "", }); useEffect(() => { getStorageDetail(rtnNo); }, [rtnNo]); const [formStorageDetail] = Form.useForm(); const getStorageDetail = async (rtnNo: string) => { console.log("getStorageDetail bf ========"); // if (rtnNo !== undefined && rtnNo !== "") { console.log("getStorageDetail af ========"); const response = await $axios.get( "http://localhost:8000/api/getStorageDetail", { params: { rtnNo }, } ); console.log(`response.rtnNo ========== ${response.data.rtnNo}`); setDataStorageDetail({ ...dataStorageDetail, rtnNo: response.data.rtnNo, usrNo: response.data.usrNo, status: response.data.status, statusNm: response.data.statusNm, prdNm: response.data.prdNm, qty: response.data.qty, prdPrc: response.data.prdPrc, estDt: response.data.estDt, }); console.log("response.data ========== "); console.log(response.data); console.log("dataStorageDetail ========== "); console.log(dataStorageDetail); return (

닫기 , , , ]} >

); }모달로 띄울 컴포넌트 파일입니다.useEffect로 db 갔다와서 데이터 받아서state에 set해주는데 해당 값이 화면에 나오지 않습니다.console.log 찍어보면 모든 값이 '' 이고리스트에서 또 다른 row를 클릭하면 이전 row의 값이 state에 들어가있습니다. 리스트 페이지에서도 비슷한 방법으로 db에서 데이터 가져와서 화면에 뿌리는데리스트 페이지 처음 들어가면 db에서 데이터는 받아오는데 화면에 아무것도 안 나오고다른 페이지 갔다가 오면 그제서야 화면에 리스트가 출력됩니다. 그것도 처음에 받은 데이터로... 제가 뭔가 잘못한 걸까요?

rezigrene · Answer

아래처럼 해보시는건 어떨까요?getStorageDetail(rtnNo).catch(console.log) 초기rtnNo은 빈값으로, 빈값이면 빈칸으로 표시, 클릭이후에 데이터 세팅, 다시안보이게 되었을때 빈값으로 데이터 초기화..데이터 불러오는중에는 로딩 표시...등등이 방법이 있겠는데,올리신코드가 그대로는 동작하지않아 대충 옮겨서 실행해본건 별문제가 없어서 모르겠네요.

qvist · Answer

일단 전역으로 변수 선언하고통신 후에 해당 변수에 response.data 값 넣어주고setDataStorateDetail({ ~~~~ 해서 state 변경하니 실시간 반영이 되긴하는데이게 맞나 모르겠네요.

리액트 state 질문입니다.

2개의 답변

#state 목록