이벤트
React에서는 이벤트를 등록할때 camel-Case 형태로 작성해야 합니다.
초기 세팅
작업을 시작하기에 앞서 위와 같이 세팅을 해두었습니다.
onChange 이벤트
이런식으로 onChange 이벤트를 주어서 input의 값이 변경될때 마다 console.log( )로 값이 찍히는것을 확인할 수 있습니다.
이때 setState( )를 사용해서 state를 변경해주면 onChange 이벤트가 실행될때 마다 state를 변경해줄 수 있습니다.
input의 value도 업데이트된 state를 바로바로 불러와 사용자의 입력값을 바로바로 화면에 렌더링해줍니다.
onChange 이벤트가 발생될 때 마다 console.log( )로 값이 찍히는 모습
onSubmit 이벤트
form 태그에도 onSubmit 이벤트를 주어서 submit 이벤트가 발생될 때 input의 onChange 이벤트에 의해 업데이트된 state의 value console.log( )로 state의 value값이 찍히게 됩니다.
onSubmit 이벤트가 발생할 때 console.log( )로 업데이트된 state의 value 값이 찍히는 모습
State 끌어올리기
이제 위에서 작업한 내용의 Form 컴포넌트의 state를 App 컴포넌트에 끌어올리는 작업을 해볼것입니다.
작업하기에 앞서 state를 끌어올리는 이유에 대해 보다 잘 이해하고자 Form 컴포넌트의<h3>를 따로 컴포넌트를 생성해서 작업을 해보겠습니다.
Value
onChange이벤트로 상태가 변경되었을때 업데이트된 값을 불러 오도록 설정해주었습니다.
Form
변경된 부분을 살펴보자면
<h3>를 Value 컴포넌트에 넣어줬기에 삭제하였고, state를 App 컴포넌트에서 정의하려고 하기에 state를 삭제하고 state에서 업데이트된 값을 가져오는것을 App 컴포넌트에서 props로 보낸 상태를 가져와서 사용할 것입니다.
App
Form 컴포넌트에서 state를 삭제하고 App 컴포넌트에 state를 추가하였습니다.
Form 컴포넌트에서 state를 변경해줘야 하니 changeValue 메서드를 props로 보내줍니다.
그리고 업데이트된 state도 보내줘야하기 때문에 value에 업데이트된 state의 value를 담아서 props로 보내줍니다.
업데이트된 state를 Value 컴포넌트에도 보내주어 바뀐 value값을 보여줄 수 있도록 합니다.
결과
input에 onChange 이벤트가 실행될 때마다 state를 업데이트 해주고 그 업데이트 된 값을 바로바로 리렌더링 해주는 모습입니다.
state를 끌어올려 작업하는 이유
만약 state를 App에 저장하지 않고 Board에 저장을 했을때는 Board 와 Value가 같은 선상에 있는 컴포넌트이기 때문에 props로 값을 전달해줄 수 없게 됩니다.
그렇기 때문에 상위 컴포넌트인 App 컴포넌트에서 state를 관리해야 Board 와 Value에게 업데이트된 state를 전달해 줄 수 있게됩니다.
리스트
state의 값을 화면에 보여주도록 하겠습니다.
App
List
List 컴포넌트의 state에 board 라는 가라데이터를 넣어줍니다. 나중에는 직접 axios를 통해 값을 가져올 수 있습니다.
list라는 변수에 state의 board 가라 데이터를 map( )을 사용해서 return의 내용을 뱉어주어 새 배열로 만들어줍니다.
이때 React에서 기존의 state와 새 배열로 만든 state가 다르다는것을 알고 화면을 리렌더링 해줍니다.
이제 render( ){ } 부분에 list 변수를 넣어주면 끝입니다.
결과
state의 데이터가 변경될경우 React에서 변경된 부분만 바로바로 리렌더링을 해줍니다.
