개발
-
useReducer개발/react 2020. 12. 22. 20:59
useReducer는 useState랑 비슷하나 state 업데이트 작업을 담당하는 reducer를 직접 넣어 줄 수 있다는 점이 다르다. 아래 코드에서 주석으로 처리된 useState 코드는 두번째 인자로 state 값을 업데이트 하는 작업을 일괄 담당했는데, useReducer를 사용하면 커스텀 reducer를 추가할 수 있어 action의 타입에 따라서 다른 행동을 취하도록 할 수 있다. useReducer도 useState처럼 리턴 값은 배열이며 첫번째 인자는 state 값이고 두번째 인자는 reducer에 액션을 보낼 수 있는 dispatch 함수다. 값을 업데이트 할 때는 dispatch 함수에 action 을 설정해서 업데이트 한다. import React, { useEffect, useRe..
-
useEffect개발/react 2020. 12. 21. 20:27
리액트의 useEffect 라이브러리는 컴포넌트나 state에 변화가 생길 때 호출되는 함수다. 두개의 인자를 받는데 첫째 인자는 변경시 호출할 콜백함수고 두번째 인자는 상태를 변경을 감지할 state를 설정한다. state를 별도로 설정하지 않으면 componentDidUpdate, componentDidMount랑 동일한 역할을 하게 된다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useEffect(() => { console.log('load data') const notesData = JSON..
-
useState개발/react 2020. 12. 21. 20:14
useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 st..
-
connect개발/react 2020. 12. 20. 11:08
connect 함수는 리액트 앱의 하위 컴포넌트에서 redux store를 접근하는 것을 가능하게 해주는 역할을 한다. 이 함수를 이용해서 컴포넌트 단에서 redux store에 접근하고 액션을 호출 할 수 있게 된다. 이번 포스트에서는 간단한 예제로 connect 함수를 통해 redux store를 사용하는 방법을 다뤄보려고 한다. 0. 준비작업 connect 함수 소개를 위해 예제와 텍스트와 숫자를 담당하는 redux를 만들었다. BlogStore.js import { createStore, combineReducers } from 'redux'; const textReducerState = { text: '', name: 'textReducer' }; const textReducer = (state..
-
react router개발/react 2020. 12. 17. 19:52
react 에서는 react-router-dom 라이브러리를 통해 들어 오는 주소 별로 별도의 페이지를 보여줄 수 있는 라우팅 기능을 제공한다. 리액트의 특성에 맞게 이 라이브러리는 어떤 페이지로 진입 했을 때 어떤 페이지를 보여 줄 것인지를 컴포넌트 단위로 뽑을 수 있다. 1. 라이브러리 임포트 리액트와 필요한 라이브러리를 임포트 한다. import React from 'react'; import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom'; 2. Route const AppRouterExample = () => ( (This is DashboardPage)} exact={true} /> (This is Create P..
-
redux개발/react 2020. 12. 16. 20:28
react는 state를 이용해서 컴포넌트의 상태를 관리하는데 state 하나에 들어가는 element가 많아질수록 관리하기가 힘들어지는 문제가 있다. 그래서 react에서는 redux라는 라이브러리를 이용해서 state를 좀더 쉽게 관리할 수 있게 해줬다. 크게 state를 관리하는 store와 store 를 변경하려는 dispatch 그리고 변경 작업을 일괄 관리하는 reducer로 나뉘는데 이번 포스트에서는 각각에 대해서 간단히만 다뤄보려고 한다. 1. createStore redux로 관리할 state 집합을 만드는 작업이다. 함수의 인자로는 reducer를 받는다. const store = createStore(countReducer); 2. action state를 바꾸기 위해 취하는 액션이다..
-
error: internal/modules/cjs/loader.js:883개발/삽질 기록 2020. 12. 14. 09:58
리액트 프로젝트를 복사해서 다시 사용하는데 이런 에러가 발생했다면. internal/modules/cjs/loader.js:883 이전에 사용한 프로젝트의 node_modules에서 만든 경로랑 꼬여서 생긴 문제일 확률이 높다. 이럴때는 모듈 별로 수정하는 방법이 있겠지만 간단하게 node_modules 폴더를 모두 날리고 다시 설치하는게 빠르다. rm -rf node_modules rm -f package-lock.json yarn cache clean yarn install
-
visual code definition 찾고 돌아가기개발/삽질 기록 2020. 12. 13. 16:59
visual code로 작업을 하다보면 어떤 클래스의 정의를 찾고 나서 이전 페이지로 돌아가고 싶은 경우가 있다. Jetbrain계열 IDE만 사용하다 visual code로 들어와서 헤맸는데 이번 포스트에 간단히 정리한다. 거의 게임체인저 급의 단축키임이 틀림 없다. Mac 기준 정의 찾기: command + 마우스 클릭 이전 페이지로 돌아가기: control + - Window 기준 정의찾기: control + 마우스 클릭 이전 페이지로 돌아가기: Alt + 왼쪽 방향키