들어가며 저번주 금요일(08/25)부터 3주간에 걸쳐 진행될 [Chapter 3] 주특기 주차가 시작되어 Lv.1 ~ 5 까지 페어 프로그래밍으로 과제가 진행될 예정입니다. 저번주는 Lv.1 개인과제로 React 를 통해 todolist 를 만들어 보는 과제를 수행했습니다. 이번주 Lv.2 페어과제는 비슷한 시간에 제출한 분들 중 한 분과 페어를 이루어 1주차에서 만든 todolist 를 2주차인 숙련주차 강의시간에서 배운 Redux, Router-dom, Styled-Components패키지를 이용해 디벨롭시켜보는 과제였습니다. 과제 요구사항 todos(할 일들) 데이터는 Redux 를 사용해 전역상태로 관리 모듈 구현 시 Ducks 패턴 사용 Router-dom 을 이용해 todo 상세페이지 생성 및..
학습 목표 1. Redux 에서 reducer 에 값을 넘기는 방식인 payload 를 이해할 수 있습니다. 2. Ducks 패턴에 대해 이해할 수 있습니다. Payload 란? 새로 만들 기능 이전 챕터에서 +1 또는 -1 기능을 만들었습니다. 근데 만약 1로 정해진 기능을 만드는 것이 아니라 증가시킬 숫자를 카운터 프로그램을 사용하는 사용자가 직접 정할 수 있게 기능을 만들어보려고 합니다. 다시 말해, 5를 더하고 싶으면 어떤 input 에 5를 입력해서 버튼을 누르면 5가 더해지고, 10을 더하고 싶으면 10을 입력하고 버튼을 눌렀을 때, 10이 더해지는 프로그램입니다. Payload 란? 이전까지 만든 기능은 리듀서에게 "더 해" 라고만 말을 했습니다. 1이라는 것은 임의적으로 정해서 리듀서에게 ..
본격적으로 리덕스를 이용해 카운터 프로그램을 만들기 전, 리덕스의 흐름을 도식화 한 UI 를 살펴보겠습니다. View 에서 액션이 일어납니다. dispatch 에서 action 이 일어나게 됩니다. action 에 의한 reducer 함수가 실행되기 전에 middleware 가 작동합니다. middleware 에서 명령내린 일을 수행하고 난 뒤, reducer 함수를 실행합니다. reducer 의 실행결과, store 에 새로운 값을 저장합니다. store 의 state 에 subscribe 하고 있던 UI 에 변경된 값을 줍니다. counter.js 모듈의 state 수정 기능 만들기(+1 기능 구현해보기) counter.js 모듈에 있는 state 의 값이 변경되는 과정 useState() 를 사용해..
학습목표 useState 를 통해서 만들었던 count 프로그램을 리덕스를 사용해 다시 만들 수 있습니다. 리덕스 설정 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 합니다. VScode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치합니다. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지입니다. yarn add redux react-redux === # 아래와 같은 의미 yarn add redux yarn add react-redux 폴더 구조 생성하기 좌측의 의미지와 같이 폴더 구조를 생성합니다. src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더 생성 config..
리덕스가 필요로 하는 이유 useState 의 불편함 어떤 컴포넌트에서 생성한 state 를 다른 컴포넌트로 보고자 할 때 Props 를 통해 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었습니다. 근데 Props 로 State 를 공유하는 방법에는 불편한 점이 있습니다. 1. 컴포넌트에서 컴포넌트로 State 를 보내기 위해서는 반드시 부-모 관계가 되어야 합니다. 2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모 컴포넌트를 거쳐야만 합니다. 즉, 정작 부모 컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미합니다.(조부모 → 부모 → 손자) 3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없습니다. 이러한..
학습목표 향후 리덕스 프로젝트를 구축하기 위한 기본 설정을 완료할 수 있습니다. 리덕스 설정 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 합니다. VScode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치합니다. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지입니다. yarn add redux react-redux === # 아래와 같은 의미 yarn add redux yarn add react-redux 폴더 구조 생성하기 좌측의 의미지와 같이 폴더 구조를 생성합니다. src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더 생성 config 폴더 안에 configSt..
