배열 항목 추가

홈페이지에서 이름을 작성하고 내용을 작성하고 이것을 등록하려고 할 경우, 엔터를 눌렀을 때 해당 내용이 화면에 보여져야할 경우 사용된다.
처음 만들 때 push를 작성해서 배열에 추가할려고했지만 , 리액트의 특성상 useState를 쓸 경우 push, splice, sort등의 함수를 사용하면 안된다. (기존 배열을 바꾸기 때문)
대신 concat을 쓰거나 useRef를 써야한다.

• 먼저 이벤트를 작성

1.onChange 작성

<input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
<input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
<button onClick = {onCreate}> 등록</button>

const [inputs, setInputs] = useState({
  username: '',
  email: ''
}); //input 에 username 과 email 데이터가 들어가는 초기값

const {username, email} = input // 객체 비구조화(destructuring)
const onChange = e => { // input에 변화가 감지될경우 이벤트 작동
	const {name, value } = e.target; //e.target.name과 e.target.value를 비구조화 할당 문법을 사용
  	setInputs({
    ...inputs, //기존의 내용을 가져오고
      [name]:value //새로 추가된 name과 value를 덮어씌어줌
    })
}

const [user, setUsers] = useState() // 데이터가 들어있는 값을 usestate안에 입력

2. onCreate 작성

const nextId =useRef(4); //useRef 함수를 불러옴
const onCreate = () => {
	const user = {
    	id: nextId.current,
     	username,
      	email
    }
    setUsers([...users, user]) // spread를 이용하여 기존의 user 데이터와 함께 추가	 							//concat을 사용할 경우 users.concat(user)
  
  
  	setInputs({
    	username: '',
      	email: ''
    })
  	nextId.current += 1 // current: 5
}

혹시나 배열 끝에 항목을 추가하고 싶다면 그대로 하면 되지만 배열 앞에 항목을 추가하고싶다면

setUsers([...users, user])

로 바꾸면된다.

useRef 작성

-특정 DOM을 가리킬 때 사용하는 함수

• useRef함수는 current 속성을 가지고 있는 객체를 반환, 인자로 넘어온 초기값을 current 속성에 할당
  current 속성은 값을 변경해도 상태를 변경할때 처럼 React컴포넌트가 다시 랜더링되지않음, 즉 currnet 속성의 값이 유지

const nextId = useRef(4);
const onCreate = () => {
	nextId.current += 1;
}

배열의 고유값 변수로 nextId로 설정해주고 , useRef() 파라미터로 다음 id가 될 숫자 4를 넣어줌, 넣어주면 해당 값이 변수의 current값이 됨

배열 항목 삭제

const onRemove = id => {
	setUsers(users.filter(user => user.id !== id))
};

user.id 가 파라미터로 일치하지 않는 원소 추출해서 새로운 배열을 만들고 user.id가 ide인 것을 제거