React Update

서론

2024.12.27 - [Web framework/React] - React Create

React Create

이전 글에서는 CRUD 중에서 C 즉 Create 부분을 정리했습니다. 이번 글에서는 U에 해당하는 Update를 학습하고 실습한 내용을 정리하고자 합니다.

 

Update 실습하기

Create와 마찬가지로 Update를 하기 위한 링크가 필요합니다. 아래 코드처럼 작성해줍니다.

conetextControl = <li><a href={'/update' + id} onClick={(event)=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a></li>

일단 기본 동작이 실행되지 않도록 막고 UPDATE 모드가 되게 코드를 작성합니다.

 

App() 컴포넌트가 UPDATE 모드가 되었으니 그에 맞는 코드를 작성해줍니다.

else if (mode === 'UPDATE') {
    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 = <Update title={title} body={body} onUpdate={(title, body)=>{
  
  }}></Update>
}

이렇게 작성하고 Update 컴포넌트를 작성해줍니다. Create와 달리 Update는 기존의 내용을 수정하는 기능이기 때문에 기존 내용을 찾아 title과 body로 전달하는 코드입니다.

 

이제 Update 컴포넌트를 작성해줍니다. Update는 Create와 동작이 비슷하기 때문에 Create 컴포넌트를 복사해줍니다.

function Update(props) {
  return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}> 
      <p><input type="text" name="title" placeholder="title" value={props.title}/></p>
      <p><textarea name="body" placeholder="body" value={props.body}></textarea></p>
      <p><input type="submit" value="Update"/></p>
    </form>
  </article>
}

Create 컴포넌트의 내용을 복사한 다음 Create라 작성된 부분을 Update로 변경했습니다. 그리고 App() 컴포넌트에서 받아온 title과 body를 value 로 form 태그에서 값을 출력하도록 작성되었습니다. 하지만 form 태그에서 수정이 되지 않기 때문에 코드를 다음과 같이 수정해야 합니다.

 

props.title과 props.body의 문제로 해당 값을 State로 업그레이드 해야 합니다.

function Update(props) {
  const [title, setTitle] = useState(props.title);
  const [body, setBody] = useState(props.body);
  return <article>
    <h2>Update</h2>
    <form onSubmit={event=>{
      event.preventDefault();
      const title = event.target.title.value;
      const body = event.target.body.value;
      props.onUpdate(title, body);
    }}> 
      <p><input type="text" name="title" placeholder="title" value={title} onChange={(event)=>{
        setTitle(event.target.value);
      }}/></p>
      <p><textarea name="body" placeholder="body" value={body} onChange={(event)=>{
        setBody(event.target.value);
      }}></textarea></p>
      <p><input type="submit" value="Update"/></p>
    </form>
  </article>
}

props를 상태로 업데이트해도 표현식으로 화면에 출력이 가능합니다. 하지만 이 상태에서는 키보드를 아무리 눌러도 값이 변경되지 않습니다. onChange 를 작성하고 event.target.value를 통해서 현재 입력된 값을 받아옵니다. 그리고 나서 해당 값을 setTitle, setBody를 사용해서 useState를 업데이트해서 변경합니다.

 

아직 Lis가 변경되지 않았기 때문에 input 태그는 변경되지만 화면에서 li 는 변경되지 않습니다. 그래서 변경하기 위해 다음과 같이 코드를 작성합니다.

    content = <Update title={title} body={body} onUpdate={(title, body)=>{
      const newLis = [...lis]
      const updateLis = {id : id, title : title, body : body}
      for(let i = 0; i < newLis.length; i++) {
        if(newLis[i].id === id) {
          newLis[i] = updateLis;
          break;
        }
      }
      setLis(newLis);
    }}></Update>

변경된 id를 찾아 해당 부분을 새로운 값으로 변경하면 이미지와 같이 화면이 변경된 것을 볼 수 있습니다.