์์ค๋ก ์ดํดํ๊ธฐ
1. fetch()์ ์ฒซ ๋ฒ์งธ ์ธ์๋ ๋ฐฑ์ค๋์์ ๋ง๋ API์ ์ฐ๊ฒฐํ๋ ๊ฒ์ ์๋ฏธํ๋ค.
2. ๋๋ฒ์งธ ์ธ์๋ก๋ ์์ฒญํ๋ ๊ฐ์ ์๋ฏธํ๋ค.
- method๋ ๋ณด๋ด๋ ๋ฐฉ์์ ์๋ฏธํ๋ค. ex) POST / GET
- header๋ ํด๋น request์ ๋ํ ์ถ๊ฐ ์ ๋ณด(addtional information)๋ฅผ ๋ด๊ณ ์๋ ๋ถ๋ถ์ด๋ฉฐ, ์ค๋ช ๊ฐ์ ๋ด์ฉ์ด ๋ค์ด์๋ ๋ฉํ ๋ฐ์ดํฐ๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
HTTP Header์ ์ฐ์ด๋ Content-Type์ด๋ ๋ฌด์์ผ๊น?
request์ ์ค์ด ๋ณด๋ด๋ ๋ฐ์ดํฐ(body)์ type์ ์ ๋ณด๋ฅผ ํํํ๋ค.
ex) text/css, text/javascript, text/html, text/plain
Content Type์ Request์ ์ค์ด ๋ณด๋ด๋ data์ type์ ๋ฐ๋ผ ์ ์ ํ๊ฒ ์ ํ์ ํด์ฃผ๋ฉด ๋๋ค.
3. body์์๋ ํด๋น API์(์๋ฒ์) ๋ฐ์ดํฐ ๊ฐ๋ค์ ๋ณด๋ธ๋ค๊ณ ์๊ฐํ๋ฉด ๋๋ค.
JSON์ ์ผ๋ฐ์ ์ธ ์ฉ๋๋ ์น ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ฒ์ด๋ค.
์น ์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ ๋์ ๋ฐ์ดํฐ๋ ๋ชจ๋ ๋ฌธ์์ด์ด์ด์ผ ํ๋ค.
JSON.stringify()์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐ์ดํฐ๋ค์ ๋ฌธ์์ด๋ก ๋ฐ๊ฟ์ค๋ค๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
4. then()์ ๋ณดํต ์๋ฒ์์ ์๋ต์ด ์์ ๋ ์ฌ์ฉํ๋ฉฐ, "๊ทธ๋ฌ๊ณ ๋์"๋ผ๋ ์๋ฏธ์ด๋ค.
์๋ต์ด ์์ ๋ ๋ฐ์ดํฐ ํ์์ ๋ชจ๋ JSONํ์์ด๊ธฐ ๋๋ฌธ์. JSON์ ์ด์ฉํด์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ๊ฟ์ค์ผ ๊ทธ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ํ์ฉํ ์ ์๋ค.
5. response.Authorization์
๊ทธ ํ ํฐ ๊ฐ์ Authorization์ ๋ด์์ ๋ณด๋ด ์ค ๊ฒ์ด๋ค.
์ด ํ ๊ทผ ๊ฐ์ ํตํด์ ๊ฐ๊ฐ์ ํ์๋ค์ ๊ตฌ๋ถํ ์ ์์ ๊ฒ์ด๋ค.
'Frontend๐ฑ > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[๊ธฐ์ด๐ฑ] React ๋ฆฌ์กํธ ์ค์นํ๋๋ฒ (1) | 2023.05.22 |
---|---|
[React] ๊ณต๋ถ ์์ ๋ฐ ๊ธฐ์ด๊ณต๋ถ ์ถ์ฒ (0) | 2023.05.22 |
React - useEffect๋? (4) | 2023.04.23 |
[React] ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ Props (0) | 2023.04.20 |
[React] ๋ฆฌ์กํธ State๋? (0) | 2023.04.20 |