상태에 여러 상태 사용 중지

fetch를 사용하여 React에서 API 데이터를 가져올 때 사용자를 업데이트하거나 조건부 코드를 실행할 수 있는 방법이 있을 수 있습니다. 이는 일반적으로 다양한 상태를 선택하여 사용하는 것을 의미할 수 있습니다. 잠재적으로 지저분하고 복잡해질 수 있습니다.

다음과 같은 것을 가질 수 있습니다.

const [data, setData] = useStatus([])
const [success, setSuccess] = useState('')
const [loading, setLoading] = useState('')
const [rejected, setRejected] = useState('')
const [error, setError] = useState('')

차례로 다음과 같을 수 있습니다.

useEffect(() => {

    setLoading('loading') // state 1

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setSuccess('success') // state 2
    })
    .catch(err => {
        setError(err)
        setRejected('rejected') // state 3
    })

}, [])

위와 같이 관리하고 주시해야 할 세 가지 상태가 있습니다. 이것을 조건부로 사용하면 엉덩이가 아플 것입니다. 이 같은.

if (success === 'success') {
    //do something
} else if ( loading === 'loading' ) {
    // do something
} else if (rejected === 'rejected') {
    // do something
}

이제 3개의 다른 상태에 대해 걱정하는 대신 status 상태를 사용하는 것이 더 쉽지 않을까요? const [status, setStatus] = useStatus('idle')와 같은 것을 포함하고 setData 및 setError를 제외한 다른 모든 상태를 제거할 수 있습니다. 오류 메시지 표시를 처리할 수 있도록 오류 상태가 필요합니다.

이제 훨씬 깔끔하고 관리하기 쉬운 다음이 있습니다.

const [data, setData] = useStatus([])
const [error, setError] = useState('')
const [status, setStatus] = useState('idle')

useEffect(() => {

    setStatus('loading')

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setStatus('success')
    })
    .catch(err => {
        setError(err)
        setStatus('rejected')
    })

}, [])

if (status === 'success') {
    // do something
} else if ( status === 'loading' ) {
    // do something
} else if (status === 'rejected') {
    // do something
}

나에게 이것은 작업을 수행하는 훨씬 더 깔끔한 방법이며 여러 상태를 사용하는 것과 크게 다르지 않다는 것을 알고 있습니다. 그러나 처리할 상태는 3개가 아니라 1개뿐입니다.

나는 Kent C Dodds로부터 이런 식으로 일을 하도록 영감을 받았습니다. 추가 정보here