redux16 [TIL] 내일배움캠프 React 과정 2022.12.14 Today I Learned React 숙련 과정 개인 과제 수행 Redux로 TO DO LIST 구현하기 Spread Operator 이해하기 1. array에 사용하면 대괄호를 제거해주고, object에 사용하면 중괄호를 제거해준다. 2. 문자열에 사용하면 문자를 하나하나 쪼개 준다. +) 문자도 array처럼 인덱싱이 가능하다! string[0] => 'h' 3. spread를 사용하면 array, object를 복사할 때 값을 공유하지 않고 각각 독립적인 값을 저장하도록 할 수 있다. -> Deep Copy let a = [1, 2, 3] let b = [4, 5] let c = [...a] console.log(c) // [1, 2, 3] let c = [...a, ...b, 8] console.. 2022. 12. 15. [TIL] 내일배움캠프 React 과정 2022.12.13 Today I Learned React 숙련 개인 과제 시작 Redux로 TO DO LIST 구현하기 시작부터 에러 메시지: could not find react-redux context value Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a 라는 에러 메시지가 뜨면서 useSlector 이용해서 state를 불러오는 데 실패하고 있다. // 추가할 코드 import store from "./redux/config/configStore"; import { Provider } from "react-redux"; const root = ReactDOM.createRoot(.. 2022. 12. 14. [TIL] 내일배움캠프 React 과정 2022.12.12_react-router-dom Today I Learned React 숙련 강의 수강 Redux 특강 복습 React 숙련 강의 react-router-dom이란? 페이지 이동을 구현할 수 있게 해주는 패키지. react-router-dom을 이용하면 SPA 기반인 리액트 프로젝트 안에서 여러 개의 페이지를 구현할 수 있다. 사용방법 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 react-router-dom 사용하기 페이지 컴포넌트 생성 pages 폴더를 만들어서 다음과 같이 컴포넌트를 생성한다. Router.js 생성 및 route 설정 코드 작성 // src /shared/Router.js // 1. react-router-dom을 사용하.. 2022. 12. 12. [WIL] 내일배움캠프 여섯째 주_React 공부 시작! 이번 주부터 드디어 리액트 공부를 시작했다. 아직 리액트를 공부한 지 일주일밖에 안 됐다는 게 놀랍기도 하다. 벌써 2주는 지난 거 같은 기분이라서ㅋㅋ 그래도 짧은 시간 안에 리액트와 많이 친해진 거 같다. 처음에 입문 강의 들을 때는 props가 뭐고 state가 뭔지 개념이 이해가 잘 안 됐었는데 개인 과제 수행하면서 구조와 흐름이 처음보다는 이해가 잘 되는 거 같다. 리액트 입문 개인 과제 -> To Do List 만들기 https://github.com/heegeer/React/tree/main/TO-DO-LIST 나름 폰트도 적용하고 튜터님 피드백까지 반영해서 정성 들인 결과물이다 ㅎㅎ 리액트 강의가 입문 -> 숙련 -> 심화 순으로 이루어져 있는데 지금은 숙련 단계에서 리덕스를 배우고 있다. .. 2022. 12. 12. [TIL] 내일배움캠프 React 과정 2022.12.11_Redux Today I Learned React 숙련 강의 수강 React 숙련 강의 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령 내린 일을 수행하고 난 뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 https://velog.io/@annahyr/리덕스-흐름-이해하기 counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) 어떻게 coun.. 2022. 12. 11. [TIL] 내일배움캠프 React 과정 2022.12.09_Redux Today I Learned React 숙련 강의 수강 CS DB 기초 특강 시청 Redux 특강 시청 React 숙련 강의 useState 복습하기 const [state, setState] = useState(initialState); useState는 useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습으로 이루어져 있다. 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 함수형 업데이트 // 기존에 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것. setState((currentNum.. 2022. 12. 9. 이전 1 2 다음
