이벤트 리스너 추가, useState 훅 사용, 양식 추가 등
버튼에 이벤트리스너 추가하기
오늘은 새로 시작한 리엑트 파일 내에 이벤트리스너를 추가해보았다. 자바스크립트에서는 addEventListner 메서드를 사용했다면, 리엑트에서는 on props를 사용했다.
위 코드는 버튼에 onClick 이벤트리스너가 설정되어있는 코드이다. 이는 해당 버튼을 클릭했을 때 특정 이벤트가 발생되도록 하는 코드이며, 별도 함수를 통해 그 이벤트를 정의할 수 있다.
위 코드가 이벤트 함수인데, 함수 이전에 자바스크립트의 배열 구조분해 방법과 useState 훅을 사용해보았다.
💡 배열 구조분해: 배열을 선언하고 할당할 때, 배열의 요소를 추출하여 개별 변수로 할당하는 것을 배열 구조분해라고 한다. 기존에는 배열의 요소를 인덱스를 사용하여 하나씩 변수에 할당했지만, 구조분해를 통해 할당을 하면 한 번에 여러 개의 변수에 값을 할당할 수 있다.
예를 들어 const numbers = [1, 2, 3, 4, 5];라는 배열이 있을 때, 구조분해를 사용하면 const [a, b, c, d, e] = numbers; 라는 코드를 작성할 수 있다. 이렇게 하면 a는 1 ~ e는 5라는 값이 할당되는 것이다.
💡 useState 훅: 리액트에서 상태(state)를 관리하는 데 사용되는 함수이다. useState 함수는 배열을 반환하며, 배열의 첫 번째 요소는 상태 값이고, 두 번째 요소는 해당 상태 값을 변경할 수 있는 함수이다. 이 함수를 사용하여 컴포넌트 간 상태를 공유하거나, 컴포넌트 내에서 사용자 인터페이스를 변경할 수 있다.
우선, 최종적으로 버튼을 누르면 값이 변경되도록 해야하기 때문에 상태(state) 값을 변경해야 해서 리액트 라이브러리에서 useState 훅을 불러왔다. 그리고 이벤트 함수 이전에 useState 함수를 사용하여 상태 값인 itemName과 상태를 변경할 수 있는 함수인 setItemName을 정의했다. useState 함수의 초기값은 부모로부터 받은 itemName 값으로 설정했다.
여기서 setItemName 함수를 활용하기 위해 buttonHandler라는 이벤트 함수를 만들고, 상태 변경 함수를 불러와서 버튼을 클릭하면 itemName 값이 'TEST'로 변경되도록 했다.
📢 여기서 자바스크립트에서 하는 것처럼 setItemName = 'TEST'; 라고 하면 반드시 오류가 발생한다. 리액트에서는 setItemName('TEST')처럼 값을 괄호 안에 설정해야 한다.
위 코드의 결과로, 위 이미지처럼 itemName의 값이 TEST로 변경되었음을 확인할 수 있다.
그리고 여기서 또다른 중요한 점이 있는데, 변경될 값의 명칭 앞에는 props를 붙이면 안된다는 것이다.
아까 직접 만들어보면서 이 부분 때문에 콘솔에만 TEST가 뜨고 화면에는 표출이 안됐었는데, 그 이유는 itemName 앞에 props가 붙여져 있는 것 때문이었다. 이 state를 사용하면서 기본값은 부모로부터 받으라고 정의를 해놓은 상태에서 값을 TEST로 바꾸고, 반환문으로 들어와 props.itemName 코드를 만나 다시 '커피'라는 값으로 변경된 것이다.
사용자 입력양식 추가하기
위의 이벤트를 만들고 나서, 이 웹페이지의 주요기능 중 하나에 쓰일 사용자 양식을 만들게 되었다. 나중에 이 양식을 통해 지출리스트에 새로운 리스트가 추가되도록 해볼 것이다.
이를 위해 ExpenseUser라는 이름의 파일을 만들었는데, 이 파일의 반환문에 사용자 양식파일을 넣어주었다. 이 사용자 양식파일은 ExpenseUserForm이라는 이름으로 만들었다.
ExpenseUser 파일에서는 이 양식이 무슨 양식인지 알려주기 위해 h2 태그로 제목을 추가해주었다. 제목 다음에는 사용자 양식파일을 넣어주었다.
ExpenseUserForm 파일의 반환문에서는 위 이미지처럼 form을 넣어주었다. 간단하게 세로로 물품명, 가격, 날짜, 버튼 순으로 요소들을 배치해주었다.
이 양식을 추가하고 나서 사용자가 입력하는 내용을 리스닝하는 onChange 이벤트리스너를 추가해주었는데, 이를 위해 함수를 추가했다.
우선 함수 이전에 useState 훅을 불러오고 이 훅의 상태 값으로 3개의 값을 설정해주었고, 각각에는 상태 변경 함수도 정의해주었다. 또, useState 함수의 초기값은 빈 문자열로 설정해주었다.
그 아래 이벤트 함수에서는 사용자 입력을 받기 위해 event 매개변수를 사용했고, 각각의 상태 변경 함수를 불러와서 사용자 입력 값인 event.target.value으로 값을 지정해주었다. 이 함수들은 각각 onChange 이벤트리스너의 값으로 설정해주었다.
위 이미지는 입력한 값을 받고 있는지 확인하기 위해 콘솔로 연결해본 것이다.
