Language76 [React] 배열에 항목 제거하기 import React from 'react'; function User({ user, onRemove }){ // User 컴포넌트는 onRemove를 그대로 받아와야 합니다. const { username, email, id} = user; return( {username} {email} onRemove(id)}>삭제 {/* 버튼이 눌렸을 경우에 이러한 함수를 호출할 것이다. 이 함수에는 props로 받아온 onRemove를 id값을 받아서 파라미터로 호출해줄 것이다*/} ) } function UserList({ users, onRemove }){ return( { users.map( user => ( ) ) } ); } export default UserList; 기존 UserList에 onRem.. 2020. 12. 28. [React] 배열에 항목 추가하기 import React from 'react'; function CreateUser({ username, email, onChange, onCreate}){ return( 등록 ) } export default CreateUser; 4개의 props를 받는데 username, email 과 이벤트 값이 바뀔 때 처리할 onChange함수, 버튼을 눌렀을 때 새로운 항목을 추가할 수 있는 onCreate 함수를 이용할 것입니다. 필요한 값들을 props 받아서 사용할 것입니다. const [inputs, setInputs] = useState({ username: '', email: '', }); 제일 먼저 input의 상태를 관리하는 것이 필요합니다. 여러개의 input을 관리하는데 useState를 사.. 2020. 12. 28. [React] 배열 렌더링하기 function UserList(){ const users = [ { id: 1, username: 'kim', email: 'kim@naver.com' }, { id: 2, username: 'test', email: 'test@naver.com' }, { id: 3, username: 'aa', email: 'aa@naver.com' } ] return( {users[0].username} {users[0].email} {users[1].username} {users[1].email} {users[2].username} {users[2].email} ); } 현재 위 코드는 배열을 랜더링하는데 똑같은 코드를 사용하고 있습니다. import React from 'react'; function User(.. 2020. 12. 28. [React] 라이플 사이클 구현 하기 - skipping effect componentDidUpdate(prevProps, prevState){ if (prevState.count == this.state.count){ document.title = `You clicked ${this.state.count} times`; } } class로 구현했을 때 componentDidUpdate가 실행될 때는 props 또는 state가 바뀔 때마다 실행되었습니다. 그 때의 인자로 이전의 props 값과 이전의 state값을 전달하는데 이전의 값과 이후의 값이 변경된 값을 비교해서 다를 때 작업을 처리하면 불필요한 처리를 하지 않음으로써 성능을 더욱 높일 수 있습니다. var numberState = useState(props.initNumber); var number = numb.. 2020. 12. 27. 이전 1 ··· 7 8 9 10 11 12 13 ··· 19 다음