๊ฐœ์ธ๊ณต๋ถ€/TIL(Today I Learned)

TIL 75์ผ์ฐจ_๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น,object,axios : basic

soon327 2021. 4. 3. 19:55

๐Ÿšจ์˜ค๋Š˜์˜ ์‹ค์ˆ˜
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()