먼저 CreateUser.js라는 컴포넌트를 만들어주자
우리는 총 4개의 props를 받아올건데
기본적으로 유저의 이름과 이메일을 받아오고
onChange는 input의 텍스트값이 바뀌었을때 호출할 이벤트 처리함수이고
onCreate는 버튼을 눌렀을때 새로운 항목을 등록해주는 함수다
이렇게 기본적으로 넣어줄 유저의 이름과 이메일 등등
적히면 바뀌어야할 값들을 넣어주고 다시 app.js로 넘어가자
하단으로 내려와서 만들어놓은 userList 컴포넌트에 app.js에 있는 유저리스트의 정보를 props로 받자
우리는 이제 input을 자유롭게 다뤄볼건데
여러개의 input값을 다룰땐 useState를 사용하는데
값이 늘어날때마다 useState를 만드는게 아닌, useState를 객체 형태로 만들고 공백값을 넣어주어서 사용할 기본값을 정해주자
그리고 하단에 보면 const {username, email} =inpust;
라고 되있는데 이거는 "inputs에서 username이랑 email만 따로 빼주세요~"
하는거다
이제 onChange 기능을 손볼건데
e값을 가져오고(input에 입력되는 값)
아까 CreateUser컴포넌트에 만들어 놓았던 name과 value를 기억하는가? 이거를 e.target으로 가져온다고 설정하자.
그리고 이제 데이터를 받아오는 경로는 설정을 했으니 inputs 값을 실질적으로 바꿔주려면? useState를 사용할때 우리는 항상 변경함수를 이용해서 바꿔준다는걸 알고있으니 setInputs를 사용하자
setInputs에서 먼저
기존에 있던inputs의 값을 가져오기 위해 spread를 사용하자(...)
이렇게 가져온 데이터와
위에서 받아온 name값을 value로 덮어씌워주자
약간 이해가 안갔으나 name = value라고 생각하니 쉬웠다
우리가 만들어놓은 name값은
username 과 email을 동시에 가르키고있기 때문에
우리가 바꾸는 name값이 username이면 username을 바꾸게 되고
바꾸는 name값이 email이면 email값이 바뀐다. 말이 비슷해서 이상하지만
value값을 통해 우린 이렇게 사용할수있다
그러면 이제 input 기능이 제대로 작동해야하니
만들어놓은 CreateUser 컴포넌트에 다 넣어주도록 하자
아! 우리는 버튼을 누르면 항목은 추가되고 input 입력란은
깨끗하게 싹 비워주고 싶다 !
그럴땐 이렇게 onCreate 함수에 setInputs의 설정값을 공백으로 넣어주면
저 함수(버튼)가 실행될 때 마다 입력란은 비워진다
그리고 또 한가지는 지금 우리의 users의 배열은
컴포넌트의 상태로 관리가 되고있지 않은데
이걸 컴포넌트로 상태관리 해주려면? 아주 간단하다
useState를 사용해서 감싸주면 된다
이렇게 감싸주고 추출해주면 끝 !
그럼 이제 우리는 배열에 변화를 줘보자 !
우리는 예전에 딥카피에 대한걸 배웠다
배열에 불변성을 주며, 새로운 항목을 추가하는 방식을 사용해보자
먼저 버튼이 눌려야 작동해야하니 onCreate 부분으로 가서
"버튼이 눌리면 새로운 유저를 기존 배열에 추가해줘~" 라고 적어보자
새로운 유저는 const user로 만들어주고
id값은 우리가 기존에 useRef를 통해
"다음값은 4부터 시작하게해줘~" 라고 해놓은걸 기억하는가? 그걸 이용해nextId.current를 사용해 지정해주고
username은 현재 inputs이 가르키고있는 값이 되겟다
email또한 동일하다
이렇게 새로운 유저 객체를 만들고나면
우리는 기존 배열에 추가해주는 방식으로 넣어줘야한다
...users로 기존 정보를 가져오고! user를 추가해주면
그러면 기존에 배열은 복사하여 넣고, 새로운 배열을 만들어줌으로써
뒤에는 user라는 새로운 항목이 추가가 된다
이러한 방법이 있고, 또 한가지 새로운 복사방법이 있는데 !
concat이라는 함수를 쓰면 데이터를 합쳐준다
이런 기능이라고 알고있자 !
이렇게 사용하고나면 "새로운 users 항목을 만들어주고
그 뒤에 user라는 항목을 붙여준다" 라는 말이 됩니다
이렇게 다른 복사방법을 사용할수있다.
