본문 바로가기

FRONT

 (31)
[React] userReducer - useReducer 란 ? : 상태를 업데이트 할 때에는 useState 를 사용. 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법 -> useReducer 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. - useReducer vs useState : 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 useState 로 관리 편함 : 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리 편함 - 사용법 const [state,..
[React] useMemo, useCallback, React.memo 란 ? useMemo : 연산된 값을 재사용하기 위함 useCallback : 특정함수를 재사용하기 위함 React.memo : 렌더링 된 결과를 재사용하기 위함 1. useMemo 활성 사용자 수를 세는건, users 에 변화가 있을때만 세야되는건데, input 값이 바뀔 때에도 컴포넌트가 리렌더링 되므로 이렇게 불필요할때에도 호출하여서 자원이 낭비되고 있다. 이를 해결하기 위해 useMemo를 사용한다. - App.js import React,{useRef, useState, useMemo, useCallback} from 'react'; function countActiveUsers(users){ console.log('활성 사용자 수를 세는중..'); return users.filter(user =>us..
[React] useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정 1. 배열에 값이 없는 경우 (deps에 빈배열: 처음에만 함수 호출) [ ] useEffect(() =>{ { //마운트 //props => state, REST API, D3 Video.js, setInterval, setTimeout console.log('컴포넌트가 화면에 나타남'); -> ui가 화면에 나타난 상태 이후 return () => {//언마운트 //clearInterval, clearTimout, 라이버리 인스턴스 제거 , useEffect 반환되는 함수는 cleanup 함수 (뒷정리) console.log('컴포넌트가 화면에서 사라짐'); -> 등록했던 작업을 제거 할 때 , deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출 } }, []); 2. 배열..
[React] 배열에 항목 수정하기 1. active이용 1) App.js 에 active 추가 const [users, setUsers] = useState([ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com', active: true }, { id: 2, username: 'tester', email: 'tester@example.com', active: false }, { id: 3, username: 'liz', email: 'liz@example.com', active: false } ]); 2) userLisrt.js 부분에 style추가 function User({ user, onRemove }) { return ( {user.username} ({user.e..
[React] 배열에 항목 제거하기 1. 삭제 ui 와 아이디를 가제와서 삭제하는 함수 만들기 1) userList.js -- User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 한다 () => Remove(id) 함수로 새로 만들지 않고 onRemove(id)를 적용한다면 렌더링 된 순간 함수 호출된다. import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(u..
[React] 배열에 항목 추가하기 1. username, eamil, 등록하기 버튼 ui 준비 - createUser.js import React from "react"; function CreateUser({username, email, onChange, onCreate}){ return( 등록 ); } export default CreateUser; 2. 배열에 항목 추가하기 구현 - App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App_4() { //CreateUser에서 필요한 props 준비 const [inputs, setInputs..
[React] 배열 렌더링 하기 1. 배열 렌더링 하기(기본) 1) UserList.js - 기본 배열 정렬 import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username..
[React] useRef 로 특정 DOM 선택하기 " 초기화 버튼 눌렀을 때, 커서가 '이름' 인풋박스로 선택되게 하기 " 1) App,js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 2) InputSample.js - import React, { useState, useRef } from 'react'; - const nameInput = useRef(); - const onReset = () => { setInputs({ name: '', nickname: '' }); nameInput.current.focus(); }; - import React, { useState, useRef..

티스토리툴바