react usestate re-render 질문드립니다.

React
1

안녕하세요
react usestate re-render에 관해 질문드립니다.
api를 두번부르고, 각각의 결과를 state에 담고싶어요
그러면

  1. 첫번째 initial 렌더링
  2. 1번 api 결과 값 저장 시 렌더링
  3. 2번 api 결과 값 저장 시 렌더링
    이렇게 3번을 렌더링하게되는데 이게 맞는지…
    아니라면 어떻게 코드를 작성해야하는지 궁금합니다.
    대충 예시를 들어볼게요
    const [data1, setData1] = useState(null)
    const [data2, setData2] = useState(null)

useEffect(()=> {
const getPromiseData1 = async () => {
let response = await axios.get(’/api/data’)
setData1(response.data)
}
const getPromiseData2 = async () => {
let response = await axios.get(’/api/data’)
setData2(response.data)
}

getPromiseData1()
getPromiseData2()
},[])

이러면 initial한번, setData1할때 한번, setData2할때 한번 이렇게 3번 렌더링이 되더라구요…
어떻게 코드를 작성해야 좋을지 답변 부탁드립니다

미리 감사드립니다!!

2

몇가지 질문을 통해 좀 더 구체화 시켜보겠습니다.

1. Data1을 가져오는데 1초가 걸리고 Data2를 가져오는데 30초가 걸린다면, Data1만 있는 상태로 컴포넌트가 렌더링이 되어야 하나요?

  1. 만약 Data2가 불러와지지 않은 상태로 렌더링이 되어야 한다면? 지금처럼 3번 렌더링 되는 것이 맞는 흐름으로 보입니다.

  2. 만약 Data1, Data2가 둘 다 있을 때에만 렌더링이 되어야 하는 상황이라면 다음과 같이 코드를 바꾸어 볼 수 있습니다.

const [data1, setData1] = useState(null)
const [data2, setData2] = useState(null)

useEffect(()=> {
  const getPromiseData1 = async () => {
    let response = await axios.get(’/api/data’)
    return response.data
  }
  const getPromiseData2 = async () => {
    let response = await axios.get(’/api/data’)
    return response.data
  }

  Promise.all([
    getPromiseData1()
    getPromiseData2()
  ]).then(([data1, data2]) => {
    // async await을 쓰셔도 됩니다.
    setData1(data1)
    setData2(data2)
  })
},[])

2. getPromiseData1과 getPromiseData2는 동시에 실행되어도 되나요? 아니면 순차적으로 실행되어야 하나요?

예시 코드에서는 동시 실행 가능한 것으로 보여서 (1)의 예시에서 동시실행 예시를 작성했습니다.

만약 동시에 실행하지 않고 순차적으로 실행해야 한다면, await이나 Promise.prototype.then으로 두개의 비동기 동작을 순차적으로 실행한 뒤 setData1, setData2를 같이 호출하시면 됩니다.

1개의 좋아요
3

답변감사합니다!

1개의 좋아요