Redux를 블로그에 정리하는 이유는?
우선 내가 이렇게 redux를 블로그에 정리한 이유는 부트캠프 모든 일정이 끝나고 구직활동을 위해서 다양한 react기반 프론트엔드 취업 공고를 찾아보았다. 그리고 항상 공통적으로 언급되는 것이 redux라는 리엑트 상태관리 라이브러리였다. 처음에는 "언젠가 쓰겄지~"라는 생각이였지만, 막상 취업면접을 나가고 공통적으로 들었던 질문이 바로 이 리덕스였다. 간단한 기술스텍에 관한 질문(물론 이것도 자신감만 있었던 거 같기도 하고🥹), 팀원들과 함께 만들었던 프로젝트에, 나의 장단점 등을 말할 때 자신감 넘치던 내 모습은 어느새 쭈글이가 되어있었고, 나는 앞으로의 면접에서든 취업을 해서든 리덕스는 잘 쓸 수 있어요!! 라는 자신감 넘치는 모습을 보여주고 싶어졌다...그래서 쓰는거다...ㅠ
Redux란?
우리는 기본적으로 리엑트에서 usestate를 변수처럼 활용하고 그것을 통해 데이터의 값을 변화시키는 작업을 한다. 우리는 이 state를 props를 통하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하고 그것을 사용할 수 있게 해준다. 그러나 예를 들어보자. 1.내가 하위 컴포넌트에서 선언한 state를 어떻게 상위 컴포넌트로 올려줄 것인가? 2.내가 상위 컴포넌트에 있지만 자식 컴포넌트 > 자식 컴포넌트 > 자식 컴포넌트... 를 통해서 props로 데이터를 넘겨줘야 하는 상황이라면?
이걸 보완하기 위해 있는 것이 바로 리덕스다!!!
리덕스는 여러개의 state를 전역적으로 관리하고 보관한다. 그리고 리덕스에서 state를 보관하는 것을 통(바구니) 역활을 하는 녀석을 우리는 store라고 한다.
그리고 이제부터 리덕스를 사용하는 방법에 대해서 간단히 적어보겠다.
- 리덕스 설치 npm install @reduxjs/toolkit react-redux
- 초기세팅
1.store.js 파일을 만들고, 아래와 같이 코드를 작성한다.
2.index.js에서 provider와 아까 만든 store.js를 임포트하고 아래처럼 Provider에 store={store}를 선언하고 다른 컴포넌트들을 감싼다. 그러면 리덕스를 사용할 초기세팅은 끝났다.
- store에 state를 저장하고 전역에서 사용하는 방법
1.store.js 파일에서 변수로 선언한 createSlice() 함수 안에 name을 지정해주고, initialState를 통하여 값을 저장함.
2.아래 render{} 안에 내가 선언한 내용을 변수명: 변수.reducer 담아줌
3. 사용할 컴포넌트 안에서 useSeletor hook을 호출하고, 아래와 같이 useSelector((state)=>{return state}) 쓰면 store에 내가 저장한 state를 사용할 수 있음.
실제 console.log 찍은 데이터 형식과 코드, 화면에 표출된 모습
*참고로 store에서 내가 원하는 값만 아래 사진과 같이 호출도 가능
- useState처럼 store의 데이터 변경하는 방법
1.store.js에서 reducer라는 키 값으로 변경 함수를 작성하고, return 값에 변경될 내용을 작성한다. 그 후 export를 해줌으로써 사용할 준비를 하고 이때 뒤에 state선언 변수.action을 꼭 작성해주어야 한다.
2.컴포넌트.js 로 돌아와서 아까 export한 변경함수를 import한다.
3.useDispatch를 변수로 선언해준다.
4.그 후 사용할 코드 위치에서 호출해준다.
버튼 클릭 시 import한 함수가 실행하면서 state변경 값이 적용됨
리덕스 정리를 마치며,,,
정말,,,정말,,,이건 간단하게 정리한거지만 좀 더 딥하게 들어가면 어려울 거 같다...그치만 한번 배워두면 전체 컴포넌트에서 데이터 활용을 좀 더 자유자재로 할 수 있을 거 같아서 벌써부터 설렌다!!!!(나 정말 코딩에 미친거니?)
라는 헛소리는 그만하고, 개인적인 주의점이나 전체적인 생각을 정리를 해보려고 한다.
- 부모 컴포넌트에서 하위 컴포넌트로 바로 넘길 수 있는 데이터는 굳이 리덕스를 사용하지 않고 작업하는 것이 효율적이지 않을까?
- store에서 변경함수를 여러곳에서 사용한다면 그에 맞게 여러개를 만들어서 사용하는 컴포넌트마다 다르게 부여하는게 맞는 거 같다.
- 내가 지금 공부한 것을 리덕스의 일부다. 현업에서 많이 사용하는데는 정말 이유가 있을거고 좀 더 딥하게 공부해보자 아자자ㅏㅏㅏㅏㅏㅏ
