Starters Starters

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..

이전 코드들에서 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 ..

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})); // 의존하는 다른..

React - useReducer 이전에는 useState로 상태 업데이트 해줬음 useReducer로도 할 수 있음 useState는 setValue(5); 와 설정하고 싶은 다음 상태를 직접 지정해줘서 업데이트함 useReducer는 action이라는 객체를 기반으로 상태를 � startersdev.tistory.com 1. App 컴포넌트에서 사용할 초기 상태를 컴포넌트 밖에 선언해 줌 const initialState = { inputs: { username: '', email: '', }, users: [ { id: 1, username: 'starters', email: 'public.starters@gmail.com', active: true, }, { id: 2, username: 'tes..

이전에는 useState로 상태 업데이트 해줬음 useReducer로도 할 수 있음 useState는 setValue(5); 와 설정하고 싶은 다음 상태를 직접 지정해줘서 업데이트함 useReducer는 action이라는 객체를 기반으로 상태를 업데이트 - action객체는 업데이트 할 때 참조하는 객체 type을 통해 지정하거나, 업데이트할 때 필요한 참조할 다른 객체 추가할 수 있음 -> useReduce - 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음 reducer - 상태를 업데이트 하는 함수 -> action 객체를 함수로 받아와서 그 상태를 반환 useReducer 사용법 파라미터로 reducer함수와 기본값 넣어줌 number 는 현재 상태 dispatch 는 action을 발생시키는..

컴포넌트의 리렌더링 성능 최적화 export default React.memo(UserList); 컴포넌트 내보낼 때 React.memo() 로 감싸주면 됨 CreateUsers도 마찬가지 -> UserList.js의 User 컴포넌트는 한 파일에 있는 또 다른 컴포넌트이기 때문에 함수 자체를 React.memo로 감싸준다 const User = React.memo(function User({ user, onRemove, onToggle }){ const {username, email, id, active} = user; useEffect(() => { console.log(user); return () => { console.log('user 값이 바뀌기 전'); console.log(user); } ..

현재 App.js 에서 onCreate() 등 함수들은 컴포넌트가 매번 리렌더링 될 때마다 새로운 함수 만들고 있다. -> 사실상 메모리에 부하에는 큰 영향 주지않음 하지만 함수 재사용할 때, props가 바뀌지 않았다면, virtual DOM 이 하는 리렌더링 작업조차 안하도록 만들 수 있음 사용법 - App.js - 1. useCallback 상단에 선언 import React, { useRef, useState, useMemo, useCallback } from 'react'; 2. onChange() 함수 변경 const onChange = useCallback(e => { const {name, value} = e.target; setInputs({ ...inputs, [name]: value ..

주로 성능 최적화에 사용 이전에 만든 컴포넌트에서 active가 true인 값들의 수를 세는 것 만들기 React - useEffect Hook 언제 사용? - react 컴포넌트가 처음 화면에 나타날 때 - 사라질 때 - 컴포넌트의 상태가 업데이트될 때 - 리렌더링 될 때마다 어떤 작업 반복할 때 ※ 마운트 / 언마운트 - 마운트는 컴포넌트가 나�� startersdev.tistory.com - App.js - 맨 위에 함수 추가 function countActiveUsers(users){ console.log('활성 사용자 수를 세는 중...'); return users.filter(user => user.active).length; }; 함수 사용 const count = countActiveUse..