전체 글
-
-
React - Userdispatch ContextReact 2020. 9. 13. 20:01
React - Context API(전역 값 관리) 이전 코드들에서 UserList는 다리 역할만 하고 있음 User 컴포넌트로 onRemove와 onToggle을 전달하기 위해서 UserList컴포넌트에선 쓰지 않지만 내부에 적어줬음 - UserList.js - function UserList( { users, on.. startersdev.tistory.com 이전 글에서 적어놓은 문제해결 - onToggle() 과 onRemove() 를 전역 값으로 관리 -> Context를 통해 할 수 있지만, 함수내에 dispatch부분만 따로 넘겨줄 수 있다. - App.js - 1. 최상단에 createContext 호출 import React, { useRef, useReducer, useMemo, use..
-
React - Context API(전역 값 관리)React 2020. 9. 13. 20:00
이전 코드들에서 UserList는 다리 역할만 하고 있음 User 컴포넌트로 onRemove와 onToggle을 전달하기 위해서 UserList컴포넌트에선 쓰지 않지만 내부에 적어줬음 - UserList.js - function UserList( { users, onRemove, onToggle }){ // 여기도 return ( { users.map( (user) => ( ) ) } ) } Context API 사용하면, 이렇게 넘겨 받지 않아도 바로 User컴포넌트까지 전달할 수 있다. 본 예제 적용하기 전에 간단한 예제로 테스트 1. ContextSample.js 생성 - createContext와 useContext 선언 import React, { createContext, useContext ..
-
React - 커스텀 hook 만들기React 2020. 9. 13. 19:18
1. useInputs.js 생성하고 input에 관한 함수 만들기 import { useState, useCallback } from 'react'; // initialForm 은 input form에서 관리할 초기값 function useInputs(initialForm) { // form이라는 새로운 상태 선언 - 그 상태의 초기값은 파라미터로 가져온 initialForm const [form, setForm] = useState(initialForm); const onChange = useCallback(e => { const {name, value} = e.target; // form을 업데이트 setForm(form => ({ ...form, [name]: value})); // 의존하는 다른..
-
-
-
-