[React/리액트] 리액트 기초 공부 #6 (feat.생활코딩)

(생활코딩 React 2022년 개정판의 총 10개의 강의 중 9편을 보고 작성하였다.)

 

오늘은 UPDATE 기능을 배우게 된다

 

UPDATE

UPDATE = CRATE + READ

UPDATE는 CREATE와 READ를 하이브리드 해서 구현하게 된다

 

먼저 update 태그를 만들어 주고, 보기좋게 ul>li태그로 감싸서 목록화시켜 준다.

 

이렇게 화면에 출력된다.

업데이트 기능은 상세보기 페이지로 들어갔을 때만 노출되고, 웰컴페이지에서는 보이지 않는 게 세련된 구현..!!

일단 방금 적었던 Update 태그를 잘라내고,

 contextControl이라는 지역변수를 만들고 

mode === READ일 때만 나오게 하기 위해 해당 조건문 안에

contextControl = <li><a href="/update">Update</a></li>를 넣어 준다. (방금 잘라냈던 코드 붙여넣기)

 

그러면

첫화면에는 업데이트가 보이지 않지만

상세보기로 갔을 때는 update가 나타난다.

 

 

update를 클릭했을 때, 주소에다가 update의 고유한 id값을 넣어주기 위해 이와 같은 형태로 바꾼다.

 

그다음, onclick 이벤트를 추가해 주고

크리에이트랑 동일하게 prevent해주고

setMode('UPDATE')를 입략해서 UPDATE로 이동하게 한다.

 

 

mode가 UPDATE일 경우를 만들어주기 위해 밑에 else if문을 하나 더 추가한다.

그리고 <Update></Update> 컴포넌트가 출력되게끔 작성한다.

 

 

이제 업데이트 컴포넌트의 내용을 구현해야 한다.

Create랑 거의 비슷하기 때문에 일단 복붙하고 내용에 맞춰서 수정해 준다.

 

onSubmit이 됐을 때, props.onUpdate해주게 하고

컴포넌트에도 프롭을 전달하게 하기 위해

<Update> 안에다 onUpdate={(title, body) => {}} 작성

 

그리고 update는 내용을 수정하여 업데이트하는 것이기 때문에,

폼 안에 기존의 내용이 담겨 있을 필요가 있다.

그러기 위해서는

READ의 이 부분을 복사하고(이전에 READ일 때, 이 코드를 통해서 title과 body의 값을 알아냈다)

Update 컴포넌트가 시작되기 전 부분에 붙여넣기 한 다음

컴포넌트 안에 title={title} body={body} 작성해서 prop값을 부여해 준다.

 

이 즈음에서 중간에 에러가 나서 고치느라 코드가 꼬여버려서;;(에러가 났는데 도저히 원인을 못 찾겠어서 그냥 쭉 강의를 들으며 코드를 따라치다가 강의를 끝까지 다 들어서야 찾게 됐다 결론은 위위위위위쪽 사진에 있는 onClick을 onclick으로 써서였다............ㅎㅎ)

생활코딩 강의 캡쳐로 대체...

ㅠㅠ

 

 

그다음 prop을 통해 들어온 값을 주기 위해

Update 함수로 와서

title 부분에는 value={props.title}

body부분에는 value={props.title}

의 형식으로 입력

 

 

그러면 본문이 나타난다.

하지만 수정이 되지 않는다.

리액트에서 props라는 것은, 사용자가 이 컴포넌트로 전달한 일종의 명령이다.

비유하자면 왕의 어명 같은 거라고 한다.

그렇기 때문에 폼에서 내용을 수정하려고 한다 해도 props의 값은 여전히 html과 html is... 이기 때문에 바꿀 수 없는 것이다.

이것을 해결하기 위해선, 이전에 배웠던 state를 이용하는 것이다.

prop은 외부자가 내부로,

state는 내부자가 사용하는 데이터

state는 컴포넌트 안에서 얼마든지 바꿀 수 있는 것.

 

const [title, setTitle] = useState(props.title);

const [body, setBody] = useState(props.body);

작성

그리고 value의 값을 props가 아닌 state에서 가져온다.

 

그리고 onChange를 작성해 줘야 한다.

리액트의 onChange는 html에서의 onChange와는 다르게 작동한다.

html에서는 값이 바뀌고 마우스 포인트가 바깥으로 빠져나갈 때 호출되는데, 리액트는 값을 입력할 때마다 호출된다.

 

props에서 들어온 title이 state로 환승,

state를 value값으로 줌

onChange에서 새로운 value로 키워드를 입력할 때마다 setTitle의 값을 지정, 그리고 그때마다 title의 값이 바뀌고 컴포넌트가 다시 렌더링 되어서 새로운 값이 다시 value값으로 오는 과정이다.

 

와 진짜 복잡한데 저번에 한번 들었다고 뭔가 이해가 되는 것 같다

 

 

이제 title과 body의 변경된 값으로 topics 부분을 수정해 주면 된다

우리가 바꾸려고 하는 topics는 데이터가 배열 안에 객체가 있는 식으로 되어 있다.

그렇기 때문에 topics를 복제하는 과정을 거쳐줘야 한다.

 

그리고 기존의 topics에서 아이디가 일치하는 것을 찾아야 한다.

 

for 문을 이용해서 이런 식으로 찾아 준다.

id를 찾는다면 뒤에는 더 이상 보지 않아도 되니 break를 이용해서 좀 더 효율적으로 해 줌.

 

그리고 상세보기 페이지로 넘어가도록 하기 위해 setMode를 READ로 바꿔준다.

 

UPDATE에서 주의할 것은

기존의 값이 value값으로 주입되었을 때는 prop에서 state로 갈아타야 한다.

그리고 값이 바뀔 때마다 바뀐 값을 state로 바꿔서 그 값을 다시 피드백받게 해야 한다.

 

끝