React useEffect, OnChange 새로 고침 질문

Question

안녕하세요. React를 공부하면서 해결하지 못하는 문제가 있어서 질문드리게 되었습니다.select의 option 값을 변경하면 해당 값을 가져와서 API에 넣어서 그에 해당하는 데이터를 가져오고 싶습니다. 우선 코드는 아래와 같이 작성했습니다. (궁금한 부분만 올리겠습니다.) Select.js import React from 'react' import { Options } from './Options' // Select의 Option을 담은 것 const Select = ({setCountry}) => { const changeCountry = (e) => { setCountry(e.target.value) } return ( <> ) } export default Select 그리고 Select 컴포넌트를 가져와서 사용하는 Content.js입니다. import React from 'react' import { useEffect, useState } from 'react'; import axios from 'axios'; import Graph from './Graph' import Select from './Select' import { GraphData } from './GraphData' const Contents = () => { const [confirmedData, setConfirmedData] = useState({}) const [quarantinedData, setQuarantinedData] = useState({}) const [comparedData, setComparedData] = useState({}) const [country, setCountry] = useState("kr"); useEffect(() => { const fetchEvents = async () => { const res = await axios.get(`https://api.covid19api.com/total/dayone/country/${country}`) GraphData(res.data, setConfirmedData, setQuarantinedData, setComparedData); } fetchEvents(); }, [country]) return (

) } export default Contents위 처럼 작성하고 나서 실행하고 나서 Select의 Option중 하나를 선택하면 선택한 옵션값을 API에 넣어서 그에 해당하는 데이터를 잘 가져옵니다.그런데 문제는 옵션값을 변경하면 두 번 새로고침이 되고 나서 가져옵니다.저는 새로고침 한 번에 선택한 옵션값에 대한 데이터를 가져오고 싶습니다.렌더링 최적화 문제인가 싶어서 React.memo를 써봤지만 똑같이 새로고침 두 번이 이루어져야 변한 값의 데이터를 가져옵니다. 이를 해결하기 위해서 함수형 업데이트? 방법을 사용해야 하나요?

notanumber · Answer

저도 리액트를 아직 공부하는 학생이라 정확히는 모르지만예상하기로는 setCountry 때문이 아닐까 싶습니다.useState 의 1번째자리에 있는 setValue를 사용하면 컴포넌트를 다시한 번 리렌더링 한다고 들었습니다. 그니까 Select 컴포넌트에서 onChange로 인하여 setCountry가 변경되면서 Content 컴포넌트가 1번 리렌더링 후country가 변경되기때문에 useEffect에 감지해놓은 country가 발동하면서 한번 더 리렌더링 되는 것 같습니다.

프레드윰 · Answer

객체나 배열이면 전개구문 이용해서 재 렌더링 해보세요

ISA · Answer

개발모드면 리액트 자체에서 디버깅을 용이하게 하기 위해서 일부로 리렌더링 합니다. 자세한 내용은 검색해보세요.

React useEffect, OnChange 새로 고침 질문

3개의 답변

#onchange 목록