210316_ TIL / next.js, redux

오늘 할일

• next.js 스토어 설정
• 회원가입 페이지 그리기
• 리덕스 설치

---

next.js with redux - 리덕스 설치

가장 사용률이 높은 상태관리 라이브러리이다. 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜서 효율적으로 관리할 수 있고, 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있게 해준다.

npm install redux react-redux

//Next에서 react를 연결하기 위해서는 next-redux-wrapper가 필요하기 때문에 설치를 해준다.
npm install next-redux-wrapper

//redux를 사용할 때 유용한 redux devtools를 사용하기 위해 redux-devtools-extension을 설치해준다.
npm install -D redux-devtools-extension

next-redux-wrapper가 필요한 이유

Next를 사용하는 순간 리덕스 스토어가 여러개가 될 수 있다. Next.js는 유저가 요청할때마다 redux store를 새로 생성한다.

그리고 Next.js가 제공하는 getInitialProps, getServerSideProps등에서 리덕스 스토어에 접근할 수 있어야 한다. next-redux-wrapper가 없다면 이것이 불가능하다

참고자료- https://simsimjae.medium.com/next-redux-wrapper가-필요한-이유-5d0176209d14

---

리덕스 스토어 생성

https://react-redux.js.org/introduction/quick-start

리덕스를 사용하기 전에는 컴포넌트끼리 props로 전달해줘야 하는 불편함이있다. 리덕스를 사용함으로써 그 문제가 해결된다.

리덕스는 정말 이해가 안된다 .. 너무어렵다

내일할일

• 회원가입 유효성검사
• 액션타입 만들기