Language/React25 [React] 커스텀 Hooks 만들기 input 입력을 처리하는 등 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 자신만의 Hook으로 작성하여 로직을 재사용할 수 있습니다. 만드는 방법은 useEffect, useState 등의 Hook을 사용해서 원하는 기능을 구현하고 , 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됩니다. input을 관리하는 커스텀 훅을 만들기 위해 useInputs.js 파일을 만들어줍니다. useInputs.js import { useState, useCallback } from 'react'; function useInputs(initialForm){ const [form, setForm] = useState(initialForm); // Form이라는 새로운 상태를 선언하게 되는데, 그 상태의 초기값은 ini.. 2020. 12. 28. [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. 이전 1 2 3 4 ··· 7 다음