React Update Component

 안녕하세요! 오랜만에 리액트 튜토리얼 포스팅입니다. 최근에는 Flask, EC2, RDS를 이용하여 사이트를 배포하는 실습을 하느라 잠깐 리액트 실습을 못 해보고 있었습니다. 저번 포스팅에서는 Create 컴포넌트까지 생성해 보았습니다. 이번 포스팅에서는 제목과 같이 Update 컴포넌트를 만들어 보았습니다. Update 컴포넌트는 쉽게 보고 있었는데 생각한 대로 코딩을 해도 계속 오류만 떠서 시간이 더 걸린 것 같습니다. 그럼 거두절미하고 시작해봅시다.

 

create와 동일하게 update 또한 컴포넌트를 컨트롤하기 위해서 state에 update변수를 하나 넣어주도록 합시다. 제 목적은 update버튼을 누르면 state의 update가 true로 바뀌면서 Read컴포넌트가 아닌 Update컴포넌트를 띄우도록 하는 것이 목적입니다. 그렇게 하기 위해서 우선 새로운 버튼을 만들어 주도록 합시다. 

App.js에 update버튼 코드

create와 동일하게 누르면, true일 때는 false로 false일 때는 true로 바뀌는 간단한 버튼을 만들어줍시다.

 

그다음으로 이제 state.update에 따라서 Read 컴포넌트를 출력해 줄 것이냐, Update 컴포넌트를 출력해 줄 것이냐라는 javascript문을 만들어 주도록 합시다. 

 

App.js에 Update컴포넌트출력

props는 content에 state에 있는 data를 주고 updateData에는 updateData함수를 주도록 합시다. updateData함수는 글 아래에 설명하도록 하겠습니다. 그럼 이제 Update.js를 만들어 보도록 합시다.

 

 

Update.js state

state를 먼저 설명해 드리겠습니다. mode변수는 바꾸고자 하는 data 링크를 눌렀을 때 입력 form태그를 출력할지 여부를 정하는 변수이고, updateData변수는 form에서 받은 입력값을 넣어줄 변수, data는 props에서 contant를 넣어줘서 App.js에 있는 data배열을 넣어 주도록 합시다.

 

 

Update.js의 list생성

render함수 안에 list배열을 설정해줍시다. data길이만큼 돌면서 list.push함수를 사용해서 li태그 안에 a태그를 넣고 내용으로 {this.state.data [i]}를 넣어주도록 합시다. a태그의 속성으로 data-id={i}라는 속성을 주고 클릭했을 때 a태그의 링크 이벤트를 무시하도록 e.preventDefault함수를 실행해준 뒤 handleUpdate함수에 e.target.dataset.id라는 매개변수를 넣고 실행해줍니다. 여기서 처음보는 속성과 dataset이라는 걸 찾았습니다. 저는 저handleUpdate함수에 현재 list의 index를 넣어주고 싶었는데 어째선지 list의 길이만 들어가는 것을 확인하였습니다. 그래서 dataset이라는 기능을 사용하도록 하였습니다. dataset은 HTML에 있는 기능으로 DOM형태로 가지고있어 java script내에서 태그에 접근이 가능하도록 해주는 기능이었습니다. 사용할 때 data-"name"으로 속성을 선언해주고 JS안에서는 e.target.dataset."name"으로 사용해주면 된다고 합니다. 이렇게 하니 성공적으로 index가 들어가더군요! 코드를 보니 이상하다 싶지 않나요?? 어라..왜 선언이 저렇게 되어있지? 맞습니다. (e)=>{}형태로 함수를 선언해주고 있습니다. e.preventDefault를 해줄려고하니까 매개변수가 여러개일 경우에는 함수선언을 (e,i)이렇게 해주니 e를 event로 인식을 하지 않더라구요! 그래서 저런식으로 먼저 e를 이용해서 e.preventDefault를 해준뒤 함수를 사용해주도록 합시다.

 handleUpdate함수는 mode변수를 true로 바꿔줘서 form태그를 출력하도록 해 주고 index변수에 매개변수로 가져온 index를 넣어줍시다. 그리고 form태그에 input 태그에 수정하기 이전의 내용을 보여주기 위해서 updateData변수에 기존의 값을 넣어줍니다.

 

 

 

 

Update.js의 render() return

 

 

가장 위에 js코드로 현재 state의 mode 변수가 true라면 form태그를 함께 보여줄 것이고 false라면 그냥 a태그만 있는 리스트를 보여주는 형식입니다.

update버튼을 눌렀을 때

update버튼을 누르면 위와 같이 a태그로 완성된 list가 출력됩니다. 만약 a태그로 되어있는 list를 클릭하면 어떻게 될까요? 먼저 handleUpdate에 따라서 mode가 변경되고 index와 해당 index의 data가 state에 저장되면서 다시 render를 하겠죠. 그럼 mode가 true가 되었을 테니 이번엔 form태그도 함께 출력이 될 것입니다. 그리고 input text에는 클릭한 a태그의 list내용이 들어가 있습니다. 한번 눌러보도록 합시다.

 

 

 

 

list2를 클릭했을 때

 

list2를 클릭했더니 짜잔! 성공적으로 form태그가 생성되었으며 안에 list2라는 변수가 들어가 있습니다. 짝짝짝

그럼 이제 Submit버튼을 눌렀을 때 어떤 행동을 하는지 확인해 볼까요? 코드상으로는

 

 

 

handleChange, handleSubmit

 

 

handleChange함수는 state의 updateData변수에 현재 input 태그 이벤트의 value값이 변경될 때마다 계속 넣어주도록 합시다.

handelSubmit함수는 submit버튼을 눌렀을 때, 현재 Update컴포넌트의 updateData props를 실행하도록 합니다. 매개변수로 e.target.updatetext.value로 현재 form태그의 id값으로 updatetext를 가지고 있는 태그의 value값을 가져오도록 하였습니다. 그냥 state의 updateData변수를 가져와도 되지만 form태그를 사용하면 이렇게 id를 사용하는 방법도 있어서 해보았습니다. 그리고 두 번째 매개변수로 index값을 주도록 합시다. 이 매개변수들을 통해서 App.js에 있는 state에 data변수를 변경해 줄 것입니다.

 

 

 

 

 

App.js의 updateData함수

 

App.js의 Update컴포넌트의 props를 보면 updateData에 updateData함수가 선언되어있습니다. Update.js에서 선언이 되었고 링크를 클릭하여 input에 내용을 입력하고 submit버튼을 눌렀으면 이제 바뀐 내용과 해당 list의 index가 updateData함수로 넘어오도록 선언을 해줬죠? 그럼 이제 App.js에서는 nextdata에 현재 data배열을 받아오고 해당 index에접근해서 바뀐 text로 바꿔줍니다. 그런다음 setState를 이용해서 data변수에 nextdata변수를 대입해주면 바뀐 내용이 state에 적용이 됩니다. update는 한번만 하면 다시 Read컴포넌트를 꺼내주기 위해서 update변수는 false로 바꿔주고요.물론 안바꿔줘도 상관은 없습니다. 버튼을 통해서 바꾸도록 해도 괜찮겠죠. 그건 코딩을 하는 여러분의 선택입니다. 그럼이제 결과가 반영이 되는지 확인해 보도록 할까요?

 

 

 

update submit버튼을 눌렀을 때

 

와우! 성공적으로 update가 되는 모습이 보입니다. 이렇게 해서 Update Component에 관한 포스팅을 마치도록 하겠습니다. 여러분 어떻습니까? 코딩을 하시면서 재미를 느끼셨나요? 정말 재미있지 않습니까... 서로 연결되고 흐름을 이해하고 그에 맞춰서 상태가 변하니 마치 뭐든 만들 수 있을 것 같은 기분입니다. 마지막으로 Delete Component까지 만들어주면 여러분은 간단한 CRUD시스템을 만들어 낸 것입니다!!! 여러분 생활코딩으로 유명하신 이고잉님이 자주 하신 말씀이 있습니다. 여러분은 작지만 하나의 정상에 오르신 거라고 축하할 일은 많을수록 좋다고 하셨었죠. 여러분은 지금까지 CRUD라는 큰 정상중에 CRU라는 세 개의 정상에 오르신 겁니다. 파이팅해서 마지막까지 가 보도록 합시다! 수고하셨습니다. 여러분 오늘 하루 좋은 하루 보내시길 바라면서 글을 마치겠습니다.

 

어딘가 틀린 부분이나 수정이 필요한 부분 또는 모르시겠거나 알려주고 싶으신 분은 항상 댓글 해주세요! 환영합니다.