반응형 JavaScript/React27 15.useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정 useEffect 라는 Hook 을 사용하여 컴포넌트가 - 마운트 됐을 때 (처음 나타났을 때) - 언마운트 됐을 때 (사라질 때) - 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법 마운트 / 언마운트 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}) onRe.. 2021. 7. 22. 14.배열 항목 수정하기 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 } = inputs; const onChange = e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }; const [users, setUsers] = useState([ { id: 1, .. 2021. 7. 22. 13.배열에 항목 제거하기 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; User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출 App.js import React, { useRef, useState } from 'react'; import UserList .. 2021. 7. 22. 12.배열에 항목 추가하기 CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; 컴포넌트에서는 상태관리를 CreateUser 에서 하지 않고 부모 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용 App.js import React, { useRef } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const users =.. 2021. 7. 22. 이전 1 2 3 4 5 6 7 다음 반응형