이다닷

➡️React.memo를 사용하여 리렌더링을 방지하여 리렌더링 성능 최적화 해주기 📌React.memo 함수 사용법 : React.memo(함수 명); ex) export default React.memo(UserList); CreateUser.js 수정 전 export default CreateUser; 수정 후 export default React.memo(CreateUser); UserList.js 수정 전 export default UserList; 수정 후 export default React.memo(UserList); 이렇게 바꾸고 코드를 실행해보면, 한가지 문제가 있다는 것을 알 수 있다. 📢User 중 하나라도 수정하면 모든 User들이 리렌더링 되고, CreateUser도 리렌더링이 된..

📌useCallback useCallback는 useMemo와 비슷한 Hook 함수이다. useMemo는 특정 결과값을 재사용하는 반면, useCallback는 특정 함수를 재사용 할 수 있게 해준다. 📢사실 지금까지 사용되던 onCreate, onRemove, onToggle 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어지고 있다. 사실 함수를 새로 만드는 것이 리소스를 많이 차지하는 일은 아니지만 한번 만든 함수를 재사용하는 것은 여전히 중요하다. -> 그 이유는, 추후에 컴포넌트에서 props가 바뀌지 않으면 Virtual DOM에 새로 렌더링 하는 것을 하지않고, 컴포넌트의 결과물을 재사용하는 최적화 작업을 할때, 함수를 재사용 해야하기 때문이다. 📢useCallBack를 사용할 때에는 함수..

➡️APP 컴포넌트에서 countActiveUsers라는 함수를 만든 후, active 값이 true인 사용자의 수를 세어서 화면에 렌더링하기 APP.js 변경 import React, { useRef, useState } from 'react'; import UserList from './qoffhvjxm/UserList'; import CreateUser from './qoffhvjxm/CreateUser'; // function countActiveUsers (users) { console.log("활성 사용자 수를 세는중.."); return users.filter(user => user.active).length; } // function App() { const [inputs, setInput..

➡️마운트/언마운트/업데이트 시 수행할 작업 설정하기 📌마운트/언마운트 마운트 : 컴포넌트가 나타나는 상황을 마운트라고 한다. 언마운트 : 컴포넌트가 삭제 될 때는 언마운트라고 한다. UserList.js 변경 import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { // useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); // return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭..

➡️onToggle을 추가해서 active 값에 따라 폰트의 색상 바꾸기 + cursor 필드에 마우스 오버시 커서 모양 바꾸기 APP.js 변경 import React, { useRef, useState } from 'react'; import UserList from './qoffhvjxm/UserList'; import CreateUser from './qoffhvjxm/CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name, value } = e.tar..

➡️삭제버튼 추가 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; 변경사진 ➡️특정 id를 가진 객체를 삭제하는 기능을 가진 onRemove 함수 만들기 📌filter 함수 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만들어주는 함수이다. APP.js 변경 import React, { use..

📌저번시간에 useRef를 배울때 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용한다고 했다. 그 이외에도 ref의 사용법은 있다. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다. App.js 변경 import React from 'react'; import UserList from './qoffhvjxm/UserList'; function App() { const users = [ { id: 1, username: 'dndhk', email: 'dndhk@gmail.com' }, { id: 2, username: 'Lee', email: 'Lee@gmail.com' }, { id: 3, username: 'dada', email: 'dada@gmail.com' } ];..

추가내용 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}) {us..