728x90 반응형 SPA148 [React] 함수형 컴포넌트에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 Redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 글을 작성하기에 앞서 redux가 무엇인지 궁금하신 분들은 여기를 참고하시길 바랍니다. Redux 설정 이번에 redux를 설정하여 해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터로 넘어오는 값만큼 num값을 증가시키는 액션 함수 정의 파라미터로 넘어오는 값만큼 num값을 감소시키는 액션 함수 정의 view에서 store에 저장되어 있는 num값을 확인하며 실시간으로 변경까지 되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux redux-devtools-extension [ 2. action함수 저장 파일 생성 ].. 2021. 7. 17. [React] Flux와 상태관리, 그리고 Redux 안녕하세요. J4J입니다. 이번 포스팅은 redux와 관련된 개념들에 대해 적어보는 시간을 가져보려고 합니다. Flux 패턴 redux를 알기 전에 가장 먼저 flux패턴이 무엇인지에 대한 개념이 잡혀있으면 좋다고 생각합니다. flux패턴의 등장배경에는 페이스북의 일화가 있습니다. 한때 페이스북에서 알림이 와있다고 표현되고 있지만 막상 알림을 클릭하게 되면 어떠한 알림도 오지 않았던 버그가 있었다고 합니다. 버그를 수정하고 수정을 해도 계속적으로 버그가 재 등장함에 따라 이 문제를 명확하게 해결할 수 있는 방안을 고안했고 그 결과 새로운 아키텍처인 flux패턴을 만들어 해결했다고 합니다. flux패턴은 기존에 사용되던 mvc패턴의 단점을 보완하고자 등장한 패턴입니다. mvc패턴은 사용자 인터페이스와 비즈.. 2021. 7. 14. [React] Router를 이용한 페이지 이동 안녕하세요. J4J입니다. 이번 포스팅은 Router를 이용하여 페이지 이동하는 방법에 대해 적어보는 시간을 가져보려고 합니다. ※ 추가 → 해당 글은 react router v6 업그레이드 이전에 작성된 글입니다. 현재 최신 버전을 설치할 경우 다른 점이 존재할 수 있으니 변경점에 대해 확인이 필요하신 분들은 [React] React Router v5와 v6 비교하기를 참고해주시길 바랍니다. ※ 추가 → react router v6 업그레이드된 사항에 맞게 새롭게 정의된 router 사용 방법이 필요하신 분들은 [React] react-router 사용하기를 참고해주시길 바랍니다. Router 설정 [ 1. 패키지 설치 ] $ npm install react-router react-router-dom .. 2021. 7. 13. [React] CRA 없이 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 아래와 같은 부가정보들을 입력해줘야 합니다. 각 행마다 원하는 정보들을 입력해주면 되고 괄호로 덮여있는 부분은 아무것도 입력하지 않고 엔터를 입력할 경우 괄호에 해당하는 값으로 지정되는 것을 의미합니다. package name: (init) react_init version: (1.0.0) description: react init description entry point: (index.js) index.jsx test command: git repository: keywo.. 2021. 7. 12. 이전 1 ··· 6 7 8 9 다음 728x90 반응형
