๐จ์ค๋์ ์ค์
API๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ ์ฒ๋ฆฌํ ๋,
ํญ์ mutableํ์ง immutableํ์ง ์๊ฐํ๊ณ ์ฒ๋ฆฌํ์!
๋ฐ์ดํฐ๋ ์ฃ๊ฐ์์๋ค..๋ค ๋ดํ์ด์ค.
๊ตฌ์กฐ๋ถํดํ ๋น์์ ํด๋น property์ ๋ณ์์ด๋ฆ ์ค์ ํ๊ธฐ
API๋ก ๋ฐ์์จ ๋ฐ์ดํฐ์ ํํ๊ฐ ๋ค์๊ณผ ๊ฐ์ ๋,
{data:
{results: [์ํ๋ ๋ฐ์ดํฐ]
}
}
์ํ๋๋ฐ์ดํฐ๋ฅผ ๋ฐ์ดํฐ์ ์ ์ฅ๋ results๊ฐ ์๋,userdata
๋ผ๋ ์ํ๋ ๋ณ์์ ํ ๋นํ๊ณ ์ถ๋ค๋ฉด ๋ค์๊ณผ๊ฐ์ด ์์ฑํ๋ฉด ๋๋ค.
const{ data: {results: userdata }} = API๋ก ๋ฐ์์จ ๋ฐ์ดํฐ ์ ์ฒด
์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด๋ฅผ ์ถ์ฝํ์ผ๋ก ํ ๋นํ ์ ์๋ค.
this.setState({
userData,
loginData
})
this.state
์ userData
๋ผ๋ property์ userData
๋ฅผ ํ ๋นํ๊ณ ์ถ๋ค๋ฉด ์์ฒ๋ผuserData
๋ง ์
๋ ฅํด๋ userData: userData
๋ก ์ธ์ํ๋ค.
axios base config ์ค์ ํ๊ธฐ
๊ธฐ๋ณธ์์
//api.js
const api = axios.create({
baseURL: "https://abcde.com/3/"
params: {
api_key: "1238538e9dj3",
language: "en-US"
}
})
//์์ฒญ๊ฒฝ๋ก: https://abcde.com/3/test/recent
export const testApi = {
testData: () => api.get("test/recent")
}
์์ ๋ฉ์๋๋ ๋ค๋ฅธ ํ์ผ์์ ๋ค์๊ณผ๊ฐ์ด ์ฌ์ฉํ๋ฉด ๋๋ค.
import {testApi} from './api.js'
//๋ฉ์๋ ์ฌ์ฉ
testApi.testData()
'๊ฐ์ธ๊ณต๋ถ > TIL(Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
TIL 77์ผ์ฐจ_Redux hooks: useSelector(), useDispatch() (0) | 2021.04.05 |
---|---|
TIL 76์ผ์ฐจ_redux:basic (0) | 2021.04.04 |
TIL 74์ผ์ฐจ_React Router : withRouter (0) | 2021.04.02 |
TIL 73์ผ์ฐจ_React Router (0) | 2021.04.01 |
TIL 72์ผ์ฐจ_React hook : basic (0) | 2021.03.31 |