본문 바로가기

갬발자의 프로그래밍/React12

리덕스 에러상황 가끔 리덕스 사가를 이용하거나 리덕스를 이용할때 수정시 코드에 이상이 없는데 디스패치가 안되는 경우 해결방법: 코드를 지웠다가 다시 해보거나 위치를 옮겨보거나 해보자. 2020. 2. 11.
리액트 에러 상황 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 이란 애러가 발생했다면 해당 컴포넌트의 import를 다시 하거나 연결되어있는 컴포넌트들 중에 대소문자가 달라서 발생했을수도 있다. Cannot read property 'search' of undefined 이런 식으로 해당 프롭스의 locat.. 2020. 1. 28.
리덕스 미들웨어 알아보기 리덕스 미들웨어를 알아보려고 한다. 액션이 리듀서로 보내지기 전에 미들웨어의 작업 설정해서 보낼 수 있다. 그러면 이 작업 들을 실행하게 되는데 리덕스로 비동기 작업을 할 때 그 효과가 크다. 이제 기본적인 비동기 미들웨어 thunk를 알아보자. thunk를 설치한다. $ yarn add redux-thunk 전에 만들었던 MovieRankAPI 를 복사해서 MovieMiddleware로 만들어 본다. lib폴더를 만들고 api 파일을 만든다 (앞에서 영화 api를 가져오는 주소) import axios from "axios"; export const getBoxOffice = query => axios.get( `http://www.kobis.or.kr/kobisopenapi/webservice/res.. 2020. 1. 20.
REDUX 알아보기 Redux는 점점 더 프로젝트 규모가 커지면 상태 값이 업데이트될 때 혼란이 올 수 있는데 이러한 복잡함을 해소해주는 라이브러리라고 한다. 리덕스를 사용해보자 사용할 부분을 전에 만들었던 todo를 상태 관리해보려 한다. 리덕스 라이브러리 설치 yarn add redux react-redux 설치가 다 되었으면 Todo를 복사해서 reduxTodo라고 이름을 바꾼다. 또 리덕스 모듈 폴더와 컨테이너 폴더를 만들어서 사용할 것이다. todo.js에 액션 정의와 액션 생성 함수, 리듀서 함수를 만든다. modules/todo.js const INSERT = "todo/INSERT"; const CHECK = "todo/CHECK"; const REMOVE = "todo/REMOVE"; const initia.. 2020. 1. 16.