분류 전체보기
-
debugger개발/nodejs 2020. 12. 24. 20:58
nodejs 도 android studio 나 jetbrain 처럼 강력한 디버깅 툴을 지원한다. 이번 포스트에서는 간단한 사용법을 정리해본다. 1. 코드 내에 중단점 넣기 작업을 중단하고 싶은 특정 위치에 debugger 라는 코드를 끼워 넣는다. nodejs 기본 라이브러리기 때문에 별도의 module 추가는 필요 없다. const fs = require('fs') const chalk = require('chalk') const addNote = (title, body) => { const notes = loadNotes() const duplicateNote = notes.find((note) => note.title === title) debugger if (!duplicateNote) { no..
-
useContext개발/react 2020. 12. 22. 21:09
useContext를 사용하면 하위 컴포넌트에서도 상위 컴포넌트에서 전달하는 값을 공유 받을 수 있다. props를 통해서 전달하지 않고 동일한 Context를 넘겨 받은 인자를 통해서 공유가 가능하다. 이 함수를 이용해 state 값과 이를 업데이트 하는 dispatch 함수를 컴포넌트끼리 공유 할 수 있다. 1. Context 만들기 하위 컴포넌트에서 공통적으로 공유할 수 있는 React Context를 만든다. import React from 'react'; const NotesContext = React.createContext() export { NotesContext as default } 2. Context 공유하기 공유를 시작하려는 가장 상위 컴포넌트에서 태그를 씌워준다. value 안에 ..
-
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를 바꾸기 위해 취하는 액션이다..