이벤트 핸들링, state의 활용, 양식 추가하여 입력 리스닝하기

 

리액트에서의 이벤트 핸들링과 state의 활용

 

오늘은 어제까지 만들어본 연습용 웹페이지를 조금 더 동적으로 바꾸기 위한 작업을 해보았다. 이를 위해 사용자가 클릭했을 때나 입력했을 때 같은 이벤트가 발생했을 때 그것을 핸들링 할 수 있는 방법에 대해 알 수 있었다.

 

저번에 자바스크립트를 배우면서 이벤트리스너를 추가하기 위해 해당 요소를 자바스크립트와 연결하여 이벤트리스너라는 메서드를 이용하였다. 리액트에서는 이것보다 코드가 훨씬 간결했다.

이벤트리스너의 추가(위)와 이벤트의 적용

리액트에서는 on으로 시작하는 이벤트 핸들러를 사용하는데, 위 이미지의 위쪽 코드에서 onClick을 추가하여 사용자가 버튼을 클릭했을 때 이벤트가 발생하도록 하고있다.

 

그리고 이 이벤트 역시 함수로 구성하는데, 이를 위 이미지의 아래쪽 코드처럼 구성해주었다. 함수 선언 이전에 useState 함수를 사용하여 title을 설정하고, 변경될 title명을 setTitle에 설정한 clickHandler 함수를 통해 title을 변경해주고 있다.

 

state는 컴포넌트 내부에서 변경 가능한 데이터를 저장하게 된다. state를 사용하여 컴포넌트의 UI를 변경할 수 있고, 이 state를 변경할 때마다 컴포넌트는 다시 렌더링된다. 이를 통해 동적 UI를 구성할 수 있게 된다.

또, state는 useState와 같은 리액트 훅을 사용하여 컴포넌트 내부에 생성할 수 있다. useState는 초기값을 인자로 받으며 배열을 반환한다. 인자같은 경우 첫 번째는 현재 state 값을 뜻하고, 두 번째는 state 값을 변경하는 함수를 뜻한다. 이 함수를 호출하면 컴포넌트가 다시 렌더링되고, 변경된 state 값을 가지고 다시 실행되는 것이다.

 

위 이미지에서는 useState의 첫 인자로 title을 받고 두 번째로 'Updated!'라는 내용으로 변경된 state 값을 가진 setTitle 함수를 받았다. 

타이틀 변경 전(위쪽)과 후(아래쪽)

위 이미지에서는 클릭 이벤트핸들링이 적용된 버튼을 클릭했을 때 타이틀이 변경되는 모습을 보여주고 있다.

 

이처럼 변경 가능한 데이터를 저장하기 위해 state를 사용하려면 반드시 추가해야 할 코드가 있다.

위 이미지가 해당 코드이다. 이 코드는 리액트 라이브러리에서 useState 함수를 불러와서 사용하기 위한 코드이다. 이 import 구문에서 중괄호 안에 useState를 가져온 이유는, 리액트 모듈 내에서 useState를 비롯한 여러 함수, 클래스 등을 내보내기 위해 export 구문으로 내보낸 것이기 때문이다. 이처럼 중괄호를 사용하여 해당 모듈에서 내보내는 함수나 클래스를 선택적으로 불러와서 사용할 수 있다.

 

양식 입력 추가하고 입력한 데이터 리스닝하기

 

오늘은 이 웹페이지에 사용자가 직접 입력할 수 있는 form을 추가해보았다. 

form을 추가한 NewExpense.js 파일

이를 위해 파일을 두 개로 나눴는데, 하나는 폼이 추가될 구조가 있는 NewExpense 파일이고 하나는 form 코드만 있는 ExpenseForm 파일이다. 각각에는 해당하는 css 스타일파일도 적용해주었다.

form이 들어있는 ExpenseForm.js 파일 (좌->우)

ExpenseForm 파일에서는 사용자가 입력한 값을 표출하기 위해 state를 사용할 것이기 때문에 리액트 라이브러리에서 useState 함수를 불러왔고, title과 amount, date로 구성된 폼에 초기값을 빈 문자열로 지정한 useState 함수를 활용하여 사용자가 입력칸에 입력하는 값인 event.target.value가 변경될 값이라는 것을 지정해주었다.

 

또한, 이렇게 변경되는 값은 title, amount, date 각 항목에서 onChange를 사용하여 해당 항목의 함수명을 입력해주었다. 리액트에서 onChange는 input 요소에 사용자가 입력한 값을 상태(state)에 반영하기 위해 사용하는 이벤트 핸들러이다.