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

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

 

 

create

 

이번에는 리액트의 생성 기능에 대해 배울 것이다

 

create버튼을 누르면 글을 생성하는 폼이 나오고, 작성하면 글이 등록되는 것을 만들 것이다.

먼저 a태그로 Create 생성,

onClick 이벤트로 먼저 preventDefault 해준다

그리고 클릭하면 mode가 CREATE로 바뀌게 해 준다.

이제 또 새로운 else if문을 추가해 주어야 한다.

 

Create는 꽤 복잡한 ui를 가지고 있기 때문에 별도의 컴포넌트를 만들 것이다.

 

새로운 컴포넌트를 만들어 주었다.

클릭하면 잘 나온다.

폼태그를

   <form>
      <p><input type='text' name='title' placeholder='title'/></p>
      <p><textarea name='body' placeholder='bady'></textarea></p>
      <p><input type='submit' value='Create'></input></p>
    </form>

와 같이 작성해 준다.

Create 태그 안에 onCreate={(title, body) => {}} 함수를 작성한다.

 

다시 컴포넌트로 와서 onSubmit 작성

submit 버튼을 누르면 페이지가 리로드 된다. 이를 방지하기 위해 preventDefault 작성

이제 우리가 만든 폼에 작성된 value값을 가져오게 할 것이다.

 

 

title,body의 value 가져오기

target은 이벤트가 발생한 태그를 가리킨다.

즉, 여기서는 submit을 클릭하면 폼태그에서 이벤트가 발생하는 것이기 때문에 폼태그를 가리킨다.

그 폼태그에 소속된 title값을 가져오려면? .title을 붙이면 된다.

그 title의 value값을 가져오려면 마찬가지로 뒤에 .value 붙임

 

 

Create 컴포넌트에 props 입력

props를 통해 onCreate 함수 호출, 파라미터 값으로 title, body 입력

 

 

topics 배열에다 새로운 값을 추가해주기 위해 useState로 만들어 줌

 

 

 

id값은 별도로 관리해 줄 것이다.

 

 

원래의 배열(topics)와 새로 들어온 배열(newTopics)가 같은지 다른지를 판별하고,

다르다고 인식하면 그때 새로 컴포넌트가 렌더링 되기 때문에 이와 같은 과정을 걸쳐야 한다.

 

그리고 바로 밑에 이렇게 적는다

글이 작성되면 우리가 작성한 글의 상세보기로 바로 이동하게 해주는 과정,

그리고 id값이 자동으로 1씩 늘어나게 해주는 과정이다. (setNextId에 기존의 id값+1을 하게 해주어)

 

 

음.. 너무 어렵다ㅠㅠ

 

강의를 보고 작성하는데도 설명을 잘 못해서(아직 이해를 다 못한 것도 있고)

만약 들어와서 보시는 분이 있다면 꼭 https://www.youtube.com/watch?v=kctNCMFxciQ&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=8

생활코딩 이고잉님 강의를 직접 보길 바란다..

 

강의를 완강하면 한 번 더 강의를 다시 보면서 복습해야겠다.