바코더의 블로그

UseReducer는 useState를 통해서 할 수 있는 작업들을 조금 더 정교하고 복잡하게 처리할 수 있게 해준다. UseReducerComponent.js import React, { Fragment, useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'NameChange': return { ...state, name: action.value }; case 'AgeChange': return { ...state, age: action.value }; default: throw new Error(`${action.type} is not a valid action`); } } export def..

Context 를 이용한 데이터의 공유는 read-only 가 아니다. 즉 어디서든 Context 를 이용해서 Data를 불러올 수 있고, 동시에 어디서든 Context 의 값을 변경할 수 있다는 것이다. UpdateSharedContext.js import React, { createContext, useState } from "react"; export const StatusContext = createContext(); export function StatusProvider({ children }) { const value = useState("init status"); return ( {children} ); } Context를 이용해서 Provider를 만들어 주는데, Context 의 valu..

1.Side-effect import React, { Fragment, useEffect, useState } from "react"; import { Promise } from "bluebird"; Promise.config({ cancellation: true }); function fetchUser() { return new Promise(resolve => { setTimeout(() => { resolve({ id: 1, name: "Adam" }); }, 1000); }); } export default function User() { const [id, setId] = useState("loading..."); const [name, setName] = useState("loading..."..