React Memo

Fetch 코드 패턴

프론트엔드 단 개발에서 밥 먹듯 사용하는 데이터 요청 코드입니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(result => setPeople(result))
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}

위의 코드도 좋지만, 다음 코드가 더욱 좋습니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        const getPeople = async () => {
            const response = await fetch("https://jsonplaceholder.typicode.com/users")
            const result = await response.json()
            setPeople(result)
        }
        getPeople()
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}