[React] ๋ฐ์ดํฐ ํ๋ฆ์ ์ดํด์ ๋น๋๊ธฐ ์์ฒญ ์ฒ๋ฆฌ
์ดํ์ ๊ฑธ์ณ ๋ฐ์ดํฐ์ ํ๋ฆ, state์ํ ๋์ด์ฌ๋ฆฌ๊ธฐ์ useEffect AJAX์์ฒญ์ ๋ํด ๊ณต๋ถํ๋ค.
๋ฆฌ์กํธ์ ์ปดํฌ๋ํธ๋ 1๊ฐ์ง์ ์ผ๋ง ํ๊ณ ๋จ๋ฐฉํฅ์ ๋ฐ์ดํฐ ํ๋ฆ์ ๊ฐ์ง๋ค.
๊ทธ๋์ ๋ฐ์ดํฐ๋ฅผ ์ด๋์ ๋ด์์ค์ผํ ์ง ์ ํด์ค์ผํ๋ค.(๋ฐ์ดํฐ์ ์)
๋ถ๋ชจ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์์์๊ฒ props(์ฝ๊ธฐ์ ์ฉ)๋ก ๋ด๋ ค์ค๋ค(์ธ์ ํน์ ์์ฑ์ฒ๋ผ ๋ด๋ ค์ค)
์์์ ๋ฐ์ดํฐ๋ฅผ ๋ด๋ ค๋ฐ์ง๋ง ๋ฐ์ดํฐ๊ฐ ์ด๋์์ ์๋์ง๋ ์์ง๋ชปํ๋ค.
[์ํ๋์ด์ฌ๋ฆฌ๊ธฐ]
๋ฐ์ดํฐ์ ํ๋ฆ์ด top-down ๋ฐฉ์์ด์ง๋ง, ์์์ปดํฌ๊ฐ ๋ถ๋ชจ์ปดํฌ์ ์ํ๋ฅผ ๋ฐ๊ฟ์ผํ๋ ๊ฒฝ์ฐ์๋
(์. ์์์ปดํฌ์ ์ ์ก๋ฒํผ์ด ์์ด ํด๋ฆญ์ ๋ถ๋ชจ์ ๋ฐ์ดํฐ ๋ชฉ๋ก์ด ์ ๋ฐ์ดํธ ๋์ด์ผ ํ๋๊ฒฝ์ฐ)
๋ถ๋ชจ์ปดํฌ๋ด์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ํจ์๋ฅผ ๋๊ณ ์์์ปดํฌ์ ์ด ์ํ ๋ณ๊ฒฝํจ์๋ฅผ props๋ก ์ ๋ฌํด์ ํด๊ฒฐํ๋ค.
์ฝ๋ฐฑํจ์์ ์ฌ์ฉ๋ฒ๊ณผ ์ ์ฌํ๊ฒ ์ฌ์ฉ๊ฐ๋ฅํ๋ค.
๋ด๊ฐ ์ ๋ฆฌํ ์๋์ (์์ ์ปดํฌ์ ๋ฒํผ์ด ์๋ค๋ ๊ฐ์ ํ์)
1. ๋ถ๋ชจ์ปดํฌ์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ํจ์๊ฐ ์๊ณ <์์์ปดํฌ /> ๋ฅผ ๋ฆฌํดํ๋ค.
2. ์์์ปดํฌ์ <์์์ปดํฌ ์ ๋นํํจ์๋ช ={๋ถ๋ชจ์ ์ํ๋ณ๊ฒฝํจ์} /> ๋ก ํจ์๋ฅผ ์ ๋ฌํ๋ค.
3. ์์์ปดํฌ์ ์ธ์๋ก ์ ๋นํํจ์๋ช ์ ์ธ์๋ก ๋ฐ๋๋ค. ex. function ์์์ปดํฌ({์ ๋นํํจ์๋ช })
4. ์์์ ๋ฒํผ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฌ๊ณ ํธ๋ค ํจ์๋ฅผ ๋ง๋ ๋ค.
5. ํธ๋ค ํจ์๋ด์ ๋ด๋ ค๋ฐ์ ์ ๋นํํจ์๋ช (); ์ ๋ฃ์ด์ค๋ค.
[useEffect]
๋ฆฌ์กํธ์ ์ปดํฌ๋ํธ๋ ์์ํจ์๋ฅผ ๊ฐ์ง๋ค. ํ์ง๋ง ajax์์ฒญ์ด๋ LocalStorage ๋๋ ํ์ด๋จธ์ ๊ฐ์ React์ ์๊ด์๋ API๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ ์ ์๋๋ฐ ๋ฆฌ์กํธ์ ์ ์ฅ์์๋ ์ ๋ถ Side Effect๋ก ๋ฐ๋๋ค. Side Effect๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ Hook์ด useEffect์ด๋ค.
useEffect๋ ์๋ฅผ ๋ค์ด ๋น๋๊ธฐ ํจ์์ธ ํจ์น๋ฅผ ์ฌ์ฉํ ๋ ๋ฐ๋ก console.log(ํจ์น์ ๊ฐ)์ ํ ๊ฒฝ์ฐ ํจ์น๊ฐ ๋ค ์งํ๋์ง ์์
์ํฉ์์ ์ฝ์์์ฒญ์ด ๋ค์ด์ค๊ธฐ ๋๋ฌธ์ ใ ใ ใ of defined ์๋ฌ๋ฅผ ๋์ฐ๋๋ฐ, useEffect๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ '๋ฆฌ์กํธ๊ฐ ์์์ ๊ธฐ๋ค๋ ค์ ๊ฐ ๋ฐ์ํ ๋ ์ ๊ฒฝ์ฐ์ง๋ง' ๋ผ๋ ๋๋์ผ๋ก ์ผ์ ์ฒ๋ฆฌํด์ค๋ค๊ณ ํ๋ค.
๋ณดํต,
useEffect( () =>{
//side Effect๋ฅผ ์คํํ๋์์
})
},[์ข
์์ฑ ๋ฐฐ์ด])
์ด๋ฐ์์ผ๋ก ์์ฑํ๋๋ฐ ์ข ์์ฑ ๋ฐฐ์ด์ด ์๋ค๋ฉด ํด๋น ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง ์คํํ๊ณ , ๋น๋ฐฐ์ด์ด๋ผ๋ฉด 1๋ฒ๋ง ์คํํ๊ณ ,
์์ ๋น์๋๋ค๋ฉด ์ต์ด์๋ง ์คํํ๋ค.
[AJAX์์ฒญ] - Asynchronous JavaScript And XML
fetch๋ ES6๋ถํฐ JavaScript์ ๋ด์ฅ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ค์ด์๊ณ ,
promise๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ก๋ค. ๋ด์ฅ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๋ ์ฅ์ ์ผ๋ก ์ธํด ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ ์์๋ค.
resolve,reject๋ฅผ ๋ฐํํ์ฌ ์๋ฌ ์ฒ๋ฆฌ์๋ ์ฉ์ดํ๋ค.
fetch๋ฅผ ์ฌ์ฉํ์ฌ URL์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋๋ฐ
๊ฐ๋จํ๊ฒ
export function getFlight(filterBy = {}) {
let query = ''
if(filterBy.departure){ // ๋ฐ๋ก ๋ฐ์์์ผํ๋ ๋ฐ์ดํฐ๊ฐ ์์ด ์กฐ๊ฑด๋ฌธ์ผ๋ก ๊ฑธ๋ ๋ค
query = query +'departure='+ filterBy.departure +"&";
}
if(filterBy.destination){
query = query + 'destination='+filterBy.destination;
}//query parameter(/flight?departure=ICN&destination=CJU)๊ฐ ์ ์ ์
//์์ฒญ์๋ฐ๋ผ ์ ๋์ ์ผ๋ก ๋ณํด์ผ ํด์ endpoint์ ๋ฐฑํฑ์ ์ฌ์ฉํ๋ค.
let endPoint =
`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${query}`
return fetch(endPoint) //URL์ ๋ฐ์ json()ํด์ค.
.then(res => res.json());
์ฒ๋ฆฌํ๋ค.
fetch๋ promise์ async await์ฎ์ด์ ๋ค์ ์ ๋ฆฌํด์ผ๊ฒ ๋ค.
์ค๋์ ์ฌ๊ธฐ๊น์ง
'TIL -์ผ๊ฐํ์ต๊ธฐ๋ก > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Use effect ์ defendency array ์ ๋ํ์ฌ (0) | 2022.05.23 |
---|---|
API, UseEffect๋ก ๊ด๋ฆฌํ๊ธฐ (0) | 2022.02.17 |
Weather API & data component (0) | 2022.02.05 |
[React ์์ต์] Tic Tac Toe.. (0) | 2022.02.03 |
[TodoList]create react app ์ค์น (0) | 2022.01.30 |
๋๊ธ