React Context는 오랫동안 사용이 가능했지만 이번에 React hooks이 나오면서 더 좋아졌다. 이전에는 redux
라는 third-party libraries를 사용해서 React Apps의 상태를 관리했었다. 이 개발자가 redux에 대한 내용 을 작성했는데, redux를 사용할 개발자들은 이 해당 포스트를 참고해도 좋을것 같다. (참고로 이 코드를 React context hook 으로 리팩토링을 진행했음
React Redux를 사용할때
나는 react-context-hook을 사용하고 싶으니... 이 코드의 흐름을 이해해보려고 한다. 이전 redux를 사용할때는 component, container, ilb/api, modules를 각각 생성했었는데, 코드 관리가 어려웠다. 하나의 API를 추가하려면 너무 많은 작업이 필요했고, 여러 파일을 변경하면서 수정하는게 보통 쉬운게 아니다. 내가 모듈에 작성했던건지.. lib/api에 작성했던건지 나도 기억이 안나니.. 보통 Redux를 사용하면 Component에 내가 원하는 UI를 표시하고, Container안에 component를 넣고 container에서는 데이터를 lib/api, modules을 통해 가져온다. 역할로 나눠보면 lib/api, modules은 데이터 처리를 해주고, container에서는 데이터 처리의 상태를 확인하다가 변경된 부분이 있다면 데이터를 업데이트를하고, component에서는 container에서 업데이트된 데이터를 화면에 출력을 한다.
위 작업을 하기 위해서는 첫번째로 component를 작성하고, 두번째로 lib/api, module을 작성을 한뒤에 컴포넌트에 데이터가 정상적으로 들어가는지 확인하고, 이후에는 변경되는 데이터를 확인하고 업데이트하는 container를 작성해 최종적으로 component가 아닌 container를 pages에 추가했었다. 이방법이 정답은 아니겠지만 내가 본 책에서는 그랬다. 지금 다른 코드를 보면 이 책도 예전 방식을 따라했던것 같다. 너무 빠르게 변화함..
React Context를 사용하면
React Context를 사용하면 context, container, component를 생성하면된다.
- Context
- reducer를 구현해 어떤 액션 타입이 왔을때 어떻게 데이터를 리턴할지에 대해서 명시
- 추가로 article에 대한 articleContext.js를 생성하고, 그 안에는 ArticleProvider를 정의한다. 이 Provider는 값을 전달하는 역할을 한다.
- Container
- container는 context를 이용해 article의 내용을 가져오는 역할을 한다.
useContext(ArticleContext
를 통해 articles을 가져오고 article을 화면에 출력할 내용을 생성한다. (출력할때 component에 미리 Article 을 만들어놓으면 여기서 사용)
- container는 context를 이용해 article의 내용을 가져오는 역할을 한다.
- Component
- 위 container에서 작업할 Article을 만든다.
- ArticleAdd.js를 생성하는데 여기서도
useContext(ArticleContext)
을 이용해dispatch
를 가져온다.newAddArticle
과 같은 함수를 호출한다.- 호출되는 함수에서는 dispatch를 통해 새로운 Article이 추가되었다고 알린다.
- App.js
- 최종 앱에는 아래 같은 하위 구성을 정의한다.
- ArticleProvider (context)
- AddArticle (component)
- Articles (container)
- ArticleProvider (context)
- 최종 앱에는 아래 같은 하위 구성을 정의한다.
참고
'Web 개발 > React' 카테고리의 다른 글
[React] searchkit 사용해보자 (0) | 2020.03.02 |
---|---|
[React] Route에 React Context Provider 적용하는 방법 (+소스코드) (0) | 2020.03.01 |
[React] 앱을 작업하는 순서 (Conext, Provider, App.js, ...) (0) | 2020.02.29 |
[React] 유용한 컴포넌트 리스트 (0) | 2020.02.29 |
[React] Dashboard 좋은 재료들 모음 (0) | 2020.02.29 |