React Design Patterns [Container] 2.5 -2.6 ResourceLoader DataSurce.js

09/06/2022

• Refactor userLoader => to make a reusable component

ResourceLoader.js

1. create ResourceLoader.js

• instead of user prop, add resourceUrl , resourceName
  

2. change state user => state 상태로

3. endpoint => resourceUrl

4. add setState to reflect the change

5. [] => inside the useEffect array, add resourceUrl
   

6. replace user props to state(current value of the state)
   

afterwards

---

App.js 확인

1. import ResourceLoader
2. replace UserLoader with ResourceLoader

=> 비슷해보이지만, a lot more flexible!🎊
instead of user, product 도 넣을 수 있음

---

!!!

default value 넣거나 && 나 conditional로 코드 짜기!!

---

2.6 DataSource Component

ONE STEP FURTHER!

• replace axios call with a function prop

DataSource.js

App.js

• pass the axios call from ResourceLaoder.js 함수 props으로