[React 기본] 8. Update (CRUD)

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

이 포스팅은 이전의 포스팅과 이어집니다.

2022.07.08 - [Develop/react] - [React 기본] 7. Create (CRUD)

[React 기본] 7. Create (CRUD)

 

 

+ 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다.

영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.!

https://opentutorials.org/course/4900

React - 생활코딩

 

 

---

UPDATE

create와 비슷하게 새로운 탭을 만들어 update를 구현해보자.

 

 

이를 위해 a태그를 이용한 Update를 만들어주자.

 

 

update는 항상 보이기보다 mode가 READ일 경우에만 보이도록 하는 것이 사용자에게 UX적으로 

 

더 좋은 만족감을 선사할 수 있으므로, mode가 READ일 경우에만 보이도록 코드를 짜보자.

 

 

일단 update의 상태를 관리하기 위한 변수를 새롭게 만들어준다.

 

 

이후 READ일 경우에만 update가 보일 수 있도록 했다.

 

READ일 경우 contentControl의 값을 설정해준다.

 

 

이후 update가 어떠한 데이터를 바꾸는지 알 수 있도록 하기 위해, 

 

a태그의 주소는 update + id의 형태로 변경해준다.

 

 

이후 update를 클릭할 시 mode가 변경되도록 한다.

 

클릭시 mode의 상태를 UPDATE로 바꾸도록 한다.

 

이후 mode가 "UPDATE" 일 경우의 분기를 새롭게 만들어준다.

 

mode가 UPDATE일 경우 content는 Update 컴포넌트가 되도록 한다.

 

 

이후 Update 컴포넌트를 추가해준다.

 

그런데 기본적으로 update는 수정의 기능을 가지기 때문에 form에 기존의 데이터 값들이 들어있을 필요가 있다.

 

따라서 기존의 값을 가지고 있기 위해서는 Update 컴포넌트가 title과 body를 가지고 있어야 한다.

 

 

그럼 데이터를 어떻게 넣어주어야 할까?

 

답은 바로 이전 READ에서 사용한 id 값을 이용하면 된다.

 

해당 id를 이용하면 된다.

 

따라서 id를 이용해 id가 일치하는 값을 찾아 인자로 넘겨주면 된다.

 

 

이제 update 컴포넌트로 넘어와보자.

 

기본적인 틀은 Create와 동일하며, 해당 input들의 value만 props로 넘어온 값을 채워주면 된다.

 

 

 

이제 페이지를 확인해보자.

 

 

데이터가 정상적으로 들어와 있는 모습을 확인할 수 있는데, 이상하게도 이 데이터는 수정이 되지 않는다. (입력이 안됨)

 

따라서 이것을 해결하기 위해 props를 state로 바꿔줘야 한다.

 

(props => state // 내부자가 사용하는 데이터로 바꿔주어야 한다.)

 

title과 body를 state로 바꾸어 주고,

 

value는 state의 값, 변경은 onChange를 활용하여 데이터가 바뀔 때마다 title과 body를 바꿔줘야 한다.

 

이 과정을 정리해보자면.

 

 

props로 들어온 title

 

=> state로 변경하여 value 값으로 준다.

 

=> state는 컴포넌트 안에서 변경이 가능하므로, onChange 이벤트를 사용하여 새로운 값이 들어올때마다 setTitle을 사용.

 

=> setTitle이 작동하므로 재랜더링이 된다.

 

=> 브라우저의 값이 바뀐다.

 

이러한 일련의 과정을 거친다.

 

 

 

 

 

이제 값을 변경해주었으므로, 해당 값을 이용하여 수정하는 과정을 거치면 된다. (만들어 놓은 onUpdate 활용)