[React 기본] 7. Create (CRUD)

 

 

 

 

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

 

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

2022.07.07 - [Develop/react] - [React 기본] 6. state

[React 기본] 6. state

 

 

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

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

https://opentutorials.org/course/4900

React - 생활코딩

 

 

 

---

Create

이번 포스팅에서는 Create. 즉 무언가를 만들어내는 코드를 작성해볼 것이다.

 

현재 우리가 만들었던 다음의 페이지에서 input에 데이터를 입력하면 li에 추가 되도록 할 것이다.

 

 

 

 

 

 

기본적인 세팅

기본적으로는 안보이다가 a태그로 만들어진 Create를 클릭하면, 입력을 할 수 있는 input이 나오게 할 것이다.

 

우리의 코드를 보면, 현재 mode가 WELCOME과 READ일 경우 2가지 나누어져 있는데. 여기에 CREATE를 추가할 것이다.

 

먼저 a태그를 이용해 CREATE를 만들어주고, a태그의 작동을 막으면서 모드를 바꾸어주었다.

 

 

 

코드를 추가함으로서 페이지에 create가 생겼음을 볼 수 있다.

 

이제 mode가 Create일 경우 input이 나오도록 해주면 된다.

(새로운 컴포넌트 이용)

 

mode가 CREATE일 경우의 분기를 추가해주고,

 

Create 컴포넌트를 추가해주었다.

 

이제 데이터를 입력할 칸을 만들어 주었으니 submit을 했을 때 데이터가 추가되도록 해주면 된다.

 

 

 

데이터 추가하기

데이터를 추가하기 위해, Create 컴포넌트에서 props를 이용해보자.

 

 

 

코드의 실행은 다음의 순서를 따르게 할 것이다.

 

=> 들어오는 데이터 변수에 담기

 

=> <Create> 에 있는 함수 onCreate 만들어주기

 

=> onCreate가 작동했을 때, Topics에 데이터 추가 하기

 

onCreate가 실행되도록 하는 과정

 

 

onCreate를 새롭게 만들어주었다.

 

 

데이터가 추가되면 바로 재랜더링을 해주기 위해 topics를 useState로 만들어주었다.

 

 

코드를 자세히 보면, newTopic을 만들고, topics에 object를 설정해주는데 id값이 없는 것을 확인할 수 있는데

 

이는 id값을 다루는 새로운 state를 만들어 다뤄줄 것이다.

 

추가되는 topic을 위한 id를 담은 state (이미 3번까지 있으므로 4번부터 시작함)

 

object에 넣을 id state까지 만들어 주었으니 코드를 다시 다듬어 보자

 

새로운 배열을 만들어 기존의 topics를 복제해주고, 여기에 newTopic을 넣어 topics를 대체해준다.

 

코드를 보면 기존의 topics에 newTopic을 push하지 않고, 

 

기존의 topics를 복제한 newTopics를 만들어주고, 이에 newTopic을 넣은 다음 setTopics를 하는 것을 볼 수 있는데,

 

이는 원본데이터를 건들지 않기 위해서이다.

 

(state가 array // object이면 독립적 카피본을 만들어 수정해야 함)

 

독립적 카피본을 만들어 수정하는 이유.

 

state 변경 함수의 특징 중 하나는

 

기존의 state와 신규 state가 같을 경우에는 재랜더링을 하지 않는다는 것이다.

 

그런데 array나 object 자료구조의 특성상, 이 변수들은 해당 데이터를 가지고 있는 것이 아닌.

 

해당 데이터를 가리키고 있는 화살표(가칭)를 저장하고 있는 자료형이므로,

 

오리지날 데이터를 수정하거나, 추가했을 경우 화살표는 바뀌지 않기 때문에 

 

재랜더링이 일어나지 않는다.

 

따라서 이를 해결하기 위해 배열이나 객체의 경우에는 기존의 데이터를 복제한

 

독립적인 사본을 만들어 화살표까지 새롭게 만든 다음에 state를 변경해주는 것이다.

 

---

 

이상 CRUD 중 Create에 대해서 알아보았다.