2024/07/21 2

리덕스 기본 개념 이해하기

메타는 리액트를 처음 발표할 때 플럭스라고 부르는 앱설계 규격을 함께 발표했다. 플럭스는 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법이다. 이후로 플럭스 설계 규격을 준수하는 오픈소스 라이브러리가 등장했는데, 리덕스는 그중에서 가장 많이 사용되는 패키지이다.리덕스 관련 필수 패키지npm i redux @reduxjs/toolkit react-reduxredux와 @reduxjs/tookit(RTK 패키지) 은 프레임워크와 무관하므로 앵귤러나 뷰에서도 사용할 수 있다. 앱 수준 상태useState 훅은 컴포넌트가 유지해야 할 상태를 관리하는 용도로 사용된다. 그런데 여러 컴포넌트가 상태들을 함께 공유하는 형태로 만들 때가 많은데, 이처럼 앱을 구성하는 모든 컴포넌트가 ..

Javascript/React 2024.07.21

useContext

컨텍스트란?컴포넌트의 속성은 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용되는 메커니즘이다. 그런데 부모 컴포넌트가 직계 자식이 아닌, 손자나 증손자 컴포넌트에 정보를 전달하려고 하면 번거로운 속성 전달을 해야 한다.리액트는 이런 속성 전달의 번거로움을 해소하고자 컨텍스트라는 메커니즘을 구현해놓았다. 리액트나 리액트 네이티브에서 컨텍스트는 createContext와 useContext 훅으로 이뤄진다.컨텍스트 기능을 사용하는 리액트와 리액트 네이티브 코드는 항상 이름에 'Provider'가 있는 컴포넌트와 'use컨텍스트_이름()'형태의 커스텀 훅을 사용한다. 컨텍스트 기능을 구현한 react-native-paper와 같은 패키지 또한 항상 Provider란 이름이 있는 컴포넌트와 ..

Javascript/React 2024.07.21