지난 시간 우리는 useState를 이용하여 함수형 컴포넌트에 상태를 부여하기에 대해서 알아보았다. Show 하지만 지난 시간 useState에 대해서 맛만 봤기 때문에 아직 실전에서 useState를 사용하기에는 턱없이 부족할 것 같다는 느낌을 받았다. 오늘은 useState에 대해서 확실히 이해해보고 어떻게 사용할 수 있을지 알아보는 시간을 가져보자. 최종 결과물우리가 이번 시간 최종적으로 만들 것은 사용자 입력에 따라서 배열을 만들고 이를 출력하는 화면을 구성해 볼 것이다. 결과물은 아마 이렇게 나올것이다. 순서
입력 폼 생성 (input form)우선 입력 폼을 만들어야 하기 때문에 아래와 같이 코드를 작성해보자.
여기서 useState가 쓰였다. 우리는 여기서
input 폼의 onChange 메서드 구현이제 input 폼과 state를 연결시켜야 한다고 했으니, input의 onChange 메서드를 구현해보자. onChange 메서드는 사용자의 입력에 따라 각각의 state (username, userAge)를 변화시키는 것이다.다음과 같이
그리고 input에 값을 넣으면 아래와 같이 동작한다. 하지만 여기서 조금 생소한 문장이 나타났다.
여기 보면 여기서 말 하는 e는 이벤트 속성인데, Event 속성은 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생하는 속성이다. 그 속성에는 여러 값들이 담겨있는데, 그 중에서 우리는 event가 전달한 객체의 name으로 식별할 것이므로 우리가 입력한 값은 input 태그의 value값으로 지정되기 때문에 우리는 그럼 위의
이제 사용자가 입력한 값을 사용할 수 있다! useState를 이용하여 state 변경하기그럼 아까 우리가 onChange를 통해 얻게된 사용자의 입력 값을 state로 저장해보자. 우리에겐 2개의 state가 있다.
을머 각각의 state를 변경시키기 위한 onChange 메서드가 2개가 필요하다.
여기서 각각의 state를 setState를 이용해서 변경하면 된다.
하지만 만약 입력 폼이 100개라면 100개의 handle 메서드를 만들어야 할까?? 너무 멋지지 않다. 그래서 우리는 하나의 방법을 생각해 낼 수 있는데, 입력 폼을 객체로 만들어버리고
너무 멋진 생각인 것 같다. 하지만 그 전에 알아야 할 것이 있다. 바로 여기서 ES6 문법이 사용된다. ES6 문법까지 이야기하자면 너무 커지므로 ES6 문법은 여기에서 학습하는 것을 추천한다. 그래서
사용자 추가 버튼의 onCLick 구현하기이제 input을 다뤘으니 사용자를 추가하는 버튼의 onClick을 구현해보자. 일단 사용자가 저장될 users state를 만들어보자. 그리고 onClick이 실행되면 기존에 있던 입력폼의 값들은 지워져야 하므로 Inputs를 비우는 함수도 넣을 것이다.
user state를 만들고,
다음과 같은 onClick 메서드를 만들자. 여기서 3가지가 사용되었다.
이제 마지막으로 배열 렌더링을 통한 출력을 해보자. 배열 렌더링배열을 렌더링하기 위해 새로운 컴포넌트를 만든다.
이 User 컴포넌트는 user를 프롭스로 받아와서 렌더링 해줄 것이다.
그럼 우리가 아까 원하고자 했던 결과가 출력된다. 사실상 이번 포스팅에는 많은 오류가 있다. 배열 렌더링을 위한 key 값을 주지 않는다던가, 혹은 너무 많은 렌더링으로 성능 이슈라던가 많은 부족한 점이 있지만 이번 글은 useState에 초점을 맞췄기 때문에 깊은 내용에 대해선 생략했음을 알린다. |