TIL2. React Library, Context API

1. Axios

npm intall axios 로 axios 라이브러리  설치.

그리고 import해서 사용해주면 끝.

이렇게 사용하면 된다. res에 data가 담겨있고 console.log(res) 해서 보면 이 데이터가 어떻게 생겼는 알 수 있을것.

 

2. Context API

Props는 부모에서 자식으로 밖에 전송을 못한다. 그래서 컴포넌트가 복잡해 질수록 props를 관리하기가 어려워진다.

그럴때 사용할 수 있는게 React 기능인 Context API.

createContext로 일종의 State 보관함인 Context1을 만들어준다. 그리고 컴포넌트의 일종인  Context1로 State 공유를 원하는 컴포넌트를 감싸면 된다.

그리고 value에 공유하고 싶은 state를 주면된다. 그리고 사용하기 위해서는 공유받은 컴포넌트로 이동해서 useContext로 state 보관함인 Context1을 열어주면 된다. 이때 Context1을 import해줘야한다. 당연히 Context1도 export해줘야 한다.

useContext()만 사용한다면 어느 컴포넌트에서든 context에 담긴 state를 공유받을 수 있다.

 

하지만 Context API는 잘 사용하지 않는데, 그 이유는 State 변경시 그 state를 사용하고 있지 않은 컴포넌트들도 모두 재렌더링 되기 때문에 비효율적이고 또 State 보관함을 컴포넌트파일마다 import해줘야하기 때문에 재사용성 면에서 좋지않다.

따라서 state 관리를 위해서 외부 라이브러리를 사용하는데 그것이 바로 상태 관리 라이브러리인 Redux, Recoil 등이다.

 

import, export를 쓰면서 한가지 알게된 것이 있는데, 바로 export default와 export의 차이점이다.

export default는 한 파일에서 한 개의 컴포넌트만 export시키고 싶을 때 사용한다. 예를들면 export default App 이렇게 사용하고 만약에 여러개를 export하고 싶다면 export {App, Something, ...} 이렇게 하거나 export 하고싶은 각각의 컴포넌트 앞에 export를 붙여주면 된다.

그리고 export default와 export의 차이점이 또 있는데 바로 import 할 때이다. 이전에는 왜 한 개만 import 할 때 어떤건 {}안에다가 하고 어떤건 그냥 이름만 쓰는지 몰랐는데 export default와 export의 차이점이었다.

export default로 export한 단 한개의 컴포넌트는 {}를 쓰지않고 import App form "App.js" 하면되고 그냥 export한 컴포넌트는 {}안에 써서 import 해야한다.

 

3. Redux

설치

npm install @reduxjs/toolkit react-redux

이때, react 와 react-dom 의 버전이 18이상이어야 한다. package.json 파일에서 확인가능.

그리고 store.js 파일을 만들어준다. 그리고 그 파일안에 

이런식으로 작성해주고 index.js에서 state를 공유하고 싶은 컴포넌트를 Provider 컴포넌트로 감싸주고 store값으로 store.js 파일에서 export한것을 주면 된다.

 

자 이제 실제로 Redux를 사용해보자.store.js에서 useState와 비슷한 createSlice를 사용해서 state를 만들어줄 수 있다.

{ name : 'state이름', initialState : 'state값' }

그리고 export 하는 configureStore에 state를 넣어주면 된다.

{ 작명 : createSlice로만든거.reducer } 

 

State를 만들고 보관해줬으면 이제 다른 컴포넌트에서 사용해주면 된다.

userSelector로 state를 받아올 수 있다.

State를 변경하고 싶으면 어떻게 해야할까?

먼저 store.js 에 state 변경함수를 만들어주고 export해준다. 여기서 user.actions는 (state 변경함수들 모음)

이고 그걸 destructuring 문법으로 받아준 것이다.

 

그리고 state 변경이 일어나는곳에서 함수를 호출해주면 된다. 이때 그냥 호출해줄 수는 없고 useDispatch를 사용해서 호출해줘야 한다.

 

마지막으로 state 변경함수는 parameter를 받을 수 있는데, 첫번째 변수는 state, 다음은 그냥 parameter이다.

주로 action이라는 이름으로 작명하며 뒤에 payload를 반드시 붙여줘야한다.