dukDukz

성능 최적화를 위해 연산된 값을 재사용하는 방법을 알아보자 이때 useMemo 를 사용하게 된다. 1. active 값이 true 인 사용자 수를 세어보자 이전 코드에서 2022.01.25 - [수업/React] - [React] 배열 수정 하기 [React] 배열 수정 하기 2022.01.25 - [수업/React] - [React] 배열에서 항목 삭제하기 [React] 배열에서 항목 삭제하기 배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전 dukdukz.tistory.com 추가된 내용을 보자 App.js import React, { useRef, useState } from 'react'; import UserList from '...

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다. 그리고, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다. 주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다. props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이브러리 사용 (D3, Vi..

import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [count, setCount] = useState(1); const [name, setName] = useState(""); const handleCountUpdate = () => { setCount(count + 1); }; const handleInputChange = (e) => { setName(e.target.value); }; // 렌더링 될때 마다 매번 실행됨 useEffect(() => { console.log("렌더링 됨!"); }); // 마운트 될때 + count 가 업데이트 됐을 때 실행되게 ..

2022.01.25 - [수업/React] - [React] 배열에서 항목 삭제하기 [React] 배열에서 항목 삭제하기 배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전편을 보고오면 2022.01.25 - [수업/React] - [React] 배열에 항목 추가하기 [React] 배열에 항목 dukdukz.tistory.com 삭제와 마찬가지로 수정시에도 배열 원소 값의 id가 필요하다. 추가된 부분만 보겠다. const onToggle = (id) => { setUsers( users.map((user) => (user.id === id ? { ...user, active: !user.active } : user)), ); }; retu..

배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~! 플젝 하면서도 진짜 많이 썼다. 이전편을 보고오면 2022.01.25 - [수업/React] - [React] 배열에 항목 추가하기 [React] 배열에 항목 추가하기 App.js import React, { useRef, useState } from 'react'; import './App.css'; import UserList from './\bUserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = u.. dukdukz.tistory.com 코드가 이어지니까... UserList.js 부분에 추가할 부분이 있다..

App.js import React, { useRef, useState } from 'react'; import './App.css'; import UserList from './\bUserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '', }); const { username, email } = inputs; const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }; const [users, setUse..

# useRef를 사용해서 DOM 요소에 접근하기 우리가 이전에 썼었던 document.querySelector 와 같은 기능을 할 수 있도록 DOM요소에 접근해보자. import React, { useEffect, useRef } from 'react'; function TestRef4() { const inputRef = useRef(); useEffect(() => { console.log(inputRef); inputRef.current.focus(); }, []); const login = () => { alert(`환영합니다 ${inputRef.current.value}`); inputRef.current.focus(); }; return ( 로그인 ); } export default Test..

1. useState 와 useRef import React, { useRef, useState } from 'react'; function TestRef() { const [count, setCount] = useState(0); const countRef = useRef(0); const increaseCountState = () => { // 누르면 즉시 렌더링됨 setCount(count + 1); }; const increaseCountRef = () => { // 눌러도 컴포넌트가 렌더링 되지 않음 countRef.current += 1; console.log('ref == ', countRef.current); }; return ( state :{count} Ref :{countRef.cur..