state 값이 초기값에서 변경되지 않는 문제의 정확한 원인은 무엇일까요?

Question

문제미리 만들어놓은 히트맵 차트 컴포넌트를 페이지에 삽입하여 axios로 데이터를 요청받아 화면에 뿌려야 했습니다. 이 상황에서 다음과 같은 에러를 마주했습니다. ”Typeerror: cannot convert undefined or null to object” undefined 나 null 값이 정해놓은 타입과 달리 전달되는 것이 문제였습니다.이를 해결하기 위해 다음과 같은 항목들을 체크했으나 해결되지 않았습니다.axios.get() 요청이 응답이 정상인지 → 콘솔에서 응답받은 데이터를 확인.response값이 undefined나 null이 아닐 경우의 조건을 만들어 state 할당 → 해결되지 않음.response에 타입을 지정하기 → 해결되지 않음.이러한 상황에서 문득 state에 값이 들어가 있는지 확인해보니 useState()에 할당한 값이 초기값 그대로 인것을 확인했습니다. state에 값이 전혀 할당되지 않는다는 것을 확인한 후 다음과 같은 항목들을 체크해 보았습니다.axios의 then() 구문에서 state 값 콘솔 확인 → 초기값이 그대로 적용.useEffect 구문 밖 아래서 state 값 콘솔 확인 → 초기값이 그대로 적용.state의 초기값에 문자열 타입을 지정한 뒤 then() 구문에서 임의의 문자 할당 → 초기값이 그대로 적용.useHydrated, useTranslation 메서드를 제거한 뒤 state 콘솔 값 확인 → 초기값이 그대로 적용.해결컴포넌트 내부의 state가 계속 초기화 된다는 점과 다른 개발자들의 코드들을 보면 then()구문에서 state값을 할당하는 것은 맞는 것 같다는 생각에 전역으로 관리하는 Recoil의 state에 할당하여 보자는 아이디어를 떠올렸습니다. atom에 타입을 지정한 뒤 then() 구문에서 state에 값을 할당했을 때, state 값이 할당된 대로 정상적으로 적용되었습니다.코드beforeinterface ICPData { BEFORE_PRICE: object; COMNAME: object; EXCHNAME: object; MARKETCAP: object; MARKETDATE: object; PRICE: object; SECURITYMASTERX_ID: object; YIELD: object; } interface ServerData { data: string; } const Index &#61; () &#61;> { const [usData, setUsData] &#61; useState({} as ICPData); const [kData, setKData] &#61; useState({} as ICPData); const isHydrated &#61; useHydrated(); const { t } &#61; useTranslation(); useEffect(() &#61;> { axios .get('/api/pairtrading/heatmap/?country&#61;US&limit&#61;50') .then((response: ServerData) &#61;> { const parsedData: ICPData &#61; JSON.parse(response.data); setUsData(parsedData); console.log(parsedData); }) .catch(error &#61;> { console.log(error); }); /* axios .get('/api/pairtrading/heatmap/?country&#61;KOR&limit&#61;50') .then(response &#61;> { const parsedData &#61; JSON.parse(response.data); setKData(parsedData); console.log(parsedData); }) .catch(error &#61;> { console.log(error); }); */ }, []); return ( JSX..) }afterconst Index &#61; () &#61;> { const [usData, setUsData] &#61; useRecoilState(usTreeMapDataState); const [kData, setKData] &#61; useRecoilState(kTreeMapDataState); const isHydrated &#61; useHydrated(); const { t } &#61; useTranslation(); useEffect(() &#61;> { axios .get('/api/pairtrading/heatmap/?country&#61;US&limit&#61;50') .then((response: ServerData) &#61;> { const parsedData: ICPData &#61; JSON.parse(response.data); setUsData({ ...parsedData }); }) .catch(error &#61;> { console.log(error); }); axios .get('/api/pairtrading/heatmap/?country&#61;KOR&limit&#61;50') .then(response &#61;> { const parsedData: ICPData &#61; JSON.parse(response.data); setKData(parsedData); }) .catch(error &#61;> { console.log(error); }); }, []); return ( JSX..) }질문 !!!!어떻게 해결은 했는데 useState()로 state에 값이 적용이 안되는 정확한 이유가 궁금합니다.. 고수님들의 의견 & 답변 부탁드립니다.

songline · Answer

적어주신 글에서 추측되는 상황은 setState 함수를 호출한 후 바로 state값을 확인하려고 한 경우입니다. setState류 함수는 상태값을 비동기적으로 갱신하기 때문에 setState 함수를 호출한 다음이라고 할지라도 바로 데이터 갱신이 이루어지지 않고, 거기서 console.log를 찍어보면 바뀌기 전 값, 처음이라면 초기값이 찍히게 됩니다. axios .get('/api/pairtrading/heatmap/?country=US&limit=50') .then((response: ServerData) => { const parsedData: ICPData = JSON.parse(response.data); setUsData(parsedData); console.log(parsedData); }) .catch(error => { console.log(error); });여기 console.log(parsedData) 자리에 console.log(usData) 이렇게 적어서 값을 확인하셨다면 {}가 나오는게 정상이며. useEffect 밖에서 호출했다면 처음에는 {} 그 다음 다시 렌더링 되면서 변경사항이 반영된 값이 출력되며 로그가 2개 혹은 그보다 많이 발생했을을 겁니다. 그렇지 않았다면 무언가의 사유로 렌더링 자체가 실패해서 다음 주기로 건너가지 못한 것이 아닐까 생각되네요.

state 값이 초기값에서 변경되지 않는 문제의 정확한 원인은 무엇일까요?

1개의 답변

Q&A 목록