React Create

서론

2024.12.25 - [Web framework/React] - React State

React State

이전 글에서는 state에 대해서 학습하고 실습한 내용을 정리해서 작성했습니다. 이번 글에서는 대부분의 애플리케이션에 존재하는 기능인 CRUD 중에서 C 그러니까 Create에 대해서 학습하고 실습하려고 합니다.

 

Create 실습하기

일단 Create 를 사용하기 위해서는 Create 페이지로 이동하기 위한 링크가 필요합니다. 이를 위해 다음과 같이 App() 함수에 작성합니다.

<a href="/create" >Create</a>

 

이제 useState가 WELCOME으로 되어 있는데 클릭 시 Create 모드로 바뀌게 링크에 onClick 이벤트를 사용해야 합니다.

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

이벤트를 작성하는데 a 태그가 url 이동을 하지 못하게 preventDefault 함수를 사용해서 막고 setMode를 CREATE로 설정합니다. 그러면 App() 컴포넌트가 재실행하면서 CREATE로 설정됩니다.

 

이제 CREATE 모드일 때 화면에 보여질 코드를 작성합니다.

else if (mode === 'CREATE') {
    content = <Create onCreate={(title, body)=>{
    
    }}></Create>
}

Create 컴포넌트를 화면에 보일 수 있게 작성했고 추가하기 위해 title과 body를 입력 받습니다.

 

이제 Create 컴포넌트를 작성합니다.

function Create(props) {
  return <article>
    <h2>Create</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      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"/></p>
    </form>
  </article>
}

일단 submit을 하게 되면 페이지가 재실행되면서 url이 변경되게 됩니다. 이를 막기 위해서는 form 태그에 onSubmit prop를 작성합니다. 일단 페이지 이동을 막는 preventDefault 함수를 사용하고 사용자가 입력한 데이터를 전달하기 위해서 title과 body를 작성합니다. event.target은 현재 동작이 발생한 from 태그를 의미하고 title과 body 는 태그를 의미합니다. 여기서 값이 필요하기 때문에 value를 붙여 값을 가져오고 위에 코드에서 onCreate prop을 사용했기 때문에 사용하기 위해 props.onCreate를 작성해서 가져온 title과 body를 전달하게 됩니다.

 

function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [lis, setLis] = useState([
    {id : 1, title : "html", body : "html is"},
    {id : 2, title : "css", body : "css is"},
    {id : 3, title : "javascript", body : "javascript is"}
  ]);
  let content = null;
  if(mode === 'WELCOME') {
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  }
  else if (mode === 'READ') {
    let title, body = null;
    for(let i = 0; i < lis.length; i++) {
      if(lis[i].id === id) {
        title = lis[i].title;
        body = lis[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
  }
  else if (mode === 'CREATE') {
    content = <Create onCreate={(_title, _body)=>{
      const newLis = {id : nextId, title : _title, body : _body}
      const newLISS = [...lis]
      newLISS.push(newLis);
      setLis(newLISS);
      setMode('READ');
      setId(nextId);
      setNextId(nextId+1);
    }}></Create>
  }
  return (
    <div>
      <Header title="React" onChangeMode={()=>{
        setMode('WELCOME');
      }}></Header>
      <Nav lis={lis} onChangeMode={(_id)=>{
        setId(_id);
        setMode('READ');
      }}></Nav>
      {content}
      <a href="/create" onClick={(event)=>{
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>
  );
}

일단 Id를 추가하기 위해 state로 만들어서 nextId로 설정하였습니다.

그리고 나서 기존의 Lis 를 useState로 변경하여 상태로 만들어 줍니다.

하지만 여기서 바로 newLis를 배열에 추가하면 문제가 발생합니다. 기본형 string, number 같은 자료형은 상관이 없지만 object, array 같은 형식은 배열을 복제하고 난 뒤에 추가해야합니다. 자바스크립트에서 배열 등을 복제할 때는 ... 을 사용하면 됩니다. 복제된 배열에 새로 만든 객체를 추가해서 setLis를 해서 변경해 줍니다.