Starters Starters

BUTTON 1 2 3 4

다른 레포지토리 연결할 때 [Git] remote: Repository not found. fatal: repository 'URL'' not found 이런 에러 뜨면, 아래와 같이 입력하면 해결 git remote set-url origin https://{githubId}@URL git remote remove origin git remote add origin http://{githubId}@URL

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

언제 사용? - react 컴포넌트가 처음 화면에 나타날 때 - 사라질 때 - 컴포넌트의 상태가 업데이트될 때 - 리렌더링 될 때마다 어떤 작업 반복할 때 ※ 마운트 / 언마운트 - 마운트는 컴포넌트가 나타나는 것 - 언마운트는 사라지는 것(삭제 같은 것 수행할 때) - UserList.js - 1. 상단에 useEffect 선언 import React, { useEffect } from 'react'; 2. useEffect 사용 - 마운트될 때 function User({ user, onRemove, onToggle }){ const {username, email, id, active} = user; useEffect(() => { console.log('컴포넌트가 화면에 나타남'); }, []); ..