7. Create

 

https://www.youtube.com/watch?v=kctNCMFxciQ&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=8

리액트를 이용하여 CRUD를 할 것이다.

R은 이미 했으니 C U D를 앞으로 구현할 것이다.

 

1. create 링크 만들기

//App.js

<a href='/create' onClick={event=>{
	event.preventDefault();
	setMode('CREATE');
}}>Create</a>

링크를 만들기 위해서 a태그를 이용하였고, 기본 동작을 막기 위해 event.preventDefault(); 를 해줬다.

setMode를 통해 링크를 누르면 mode 값이 'CREATE'로 바뀌게 해줬다.

 

2. function Create 만들기

 //...
 function Create(props) {
  return <article>
    <h2>Create</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value; //target의 데이터를 가져오는 방법
      const body = event.target.body.value;
      props.onCreate(title, body);
    }}>
      <p><input type="text" name="title" placeholder="title"/></p>
      <p><textarea name="body" placeholder='body'></textarea></p>
      <p><input type="submit" value="Create"></input></p>
    </form>
  </article>
}

//...
 
 else if (mode === 'CREATE') {
    content = <Create onCreate={(_title, _body)=>{
      
    }}></Create>
  }
 //...

앞서 작성한 조건문에 mode가 'CREATE'일 때를 추가해주고, content에 prop으로 onCreate 함수를 만들어 준다.

파라미터로는 title과 body를 받도록 해준다.

 

Create 함수에서 form 태그를 이용해서 데이터를 받아오게 한다.

 

form 태그에서 submit을 하면 페이지가 리로드 되니, event를 이용해서 기본 동작을 막아준다.

그 다음 form 태그에 입력한 데이터를 받아오기 위해서

      const title = event.target.title.value;
      const body = event.target.body.value;

이렇게 입력한다.

event.target.NAME.value; 를 하면 태그에 NAME 값의 데이터를 불러올 수 있다.

데이터를 불러온 다음 props.onCreate로 불러온 데이터를 넘겨준다.

 

else if (mode === 'CREATE') {
    content = <Create onCreate={(_title, _body)=>{
      const newTopic = {id:nextId, title:_title, body:_body};
      const newTopics = [...topics];
      newTopics.push(newTopic);
      setTopics(newTopics);
    }}></Create>
  }

여기서 중요한 개념이 등장한다.

state는 초기에 설정한 변수의 타입에 따라 데이터를 변경하는 방법이 다르다.

사진에서 보듯이 문자열, 정수, 불린값은 이전 포스팅에서 했던 것처럼 바로 setValue(value)로 데이터를 변경할 수 있다.

하지만 배열, 리스트, 오브젝트 같은 경우는 기존 값을 복사해서 다른 변수에 저장하고, 복사한 변수를 조작한 다음 setValue(Value)로 넘겨야 데이터를 변경할 수 있다.