React/Velopert's React (22) 썸네일형 리스트형 [React] Study #17 | useCallback 💡useCallback useCallback은 useMemo와 비슷한 Hook useMemo는 특정 결과값을 재사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 이전에 App.js 에서 구현했던 onCreate, onRemove, onToggle 함수를 확인해보자 const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출.. [React] Study # 16 | useMemo 💡 useMemo? 성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용한다. 첫번째 파라미터 : 어떻게 연산할지 정의하는 함수 두번째 파라미터 : deps 배열 , 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. countActiveUsers라는 함수를 만들고 active값이 true인 사용자의 수를 세어서 화면에 렌더링 해보자! App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; // 활성 사용자 .. [React] Study #15 | useEffect 이번 포스팅은 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때(사라질때), 그리고 업데이트 될때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대한 것이다! 1️⃣ 마운트 / 언마운트 import React, {useEffect} from 'react' // useEffect 불러오기 function User({user, onRemove, onToggle}) { // useEffect 사용! useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return() => { console.log('컴포넌트가 화면에서 사라짐'); } },[]); return( onToggle(user.id)} >{user... [React] Study #14 | 배열 항목 수정하기 #12 배열에 항목 추가 , #13 배열의 항목 삭제에 이어서 하는 배열 항목 수정하기이다! User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌는 기능을 구현해보자! 1️⃣ App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성 추가 App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }) const {username, email}.. [React] Study #13 | 배열에 항목 제거하기 저번 포스팅에서 배열에 항목 추가하기에 이어, 항목을 제거하는 기능을 구현해보겠다! 1️⃣ 삭제 버튼 렌더링 UserList.js import React from 'react' function User({user, onRemove}) { return( {user.username} {user.email} onRemove(user.id)}>삭제 ) } function UserList({users, onRemove}) { return ( {users.map(user => ( ))} ) } export default UserList () => onRemove(user.id) : User컴포넌트의 삭제 버튼이 클릭 될 때, user.id값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출.. 이전 1 2 3 4 5 다음
