[실전 프로젝트] history => Context API / useContext

---

  [ 피드백 ]  

• history → Context API
  전역 음원을 재생 할 때 history에 음원 정보나 audio 객체를 담아서 사용했는 데 history 보다는 Context API를 사용하는 것이 코드도 훨씬 간결 해지고 리펙토링면에서도 좋을 것 같다는 피드백을 받았다.
  
  조건을 바탕으로 history에 담았던 음원 정보들을 Context API와 useContext를 사용하는 것으로 전면 수정했다.
  
  협력사분들께서 말씀 해주신 내용 중에 "사용하시는 도구에 관련된 API가 무엇이 있는 지 살펴보는 게 좋고, React의 버전이 올라가면 새로운 도구가 나왔는 지 살펴보는 것이 좋다."라는 말씀을 남겨 주셨습니다.

---

  [ Context API / useContext 사용한 코드  ]  

shared/ThemeContext.js

Context API를 선언할 js를 하나 만들어 준다.

- 전역으로 관리할 데이터를 최상위 컴포넌트에서 선언 해주기 위해서 App.js에 ThemeContext를 import 해온다.

- <ThemeContext.Provider value={{"전역으로 사용할 변수"}}></ThemeContext.Provicer>로 감싸준다.

(value에 let으로 선언한 변수를 넣었을 때는 동작이 되지 않고, state 변수를 넣어야 작동한다.)

- ThemeContext의 데이터를 불러와 사용하기 위해서 useContext도 함께 import 해온다.

- 필요한 변수들을 불러와서 사용했다.

---

확실히 내가 구현 하고자 하는 기능에 관련된 API들을 숙지 해놓는 것이 좋은 것 같다.

Context API / useContext 알고만 있었는 데 정작 써보니 너무 간편하고 좋은 라이브러리 같다.