React - 입문 기록 8

React CRUD 구성하기

 

Update 구현

 

화면에 클릭이 가능한 'Update' 텍스트를 넣는다.

이런 식으로 메인화면에 존재하게 되었지만,

어떤 게시물을 업데이트할 것인지 모호하다.

 

HTML, CSS, JavaScript 혹은 추가된 글을 클릭하였을때 나오는 READ 화면에서만

Update 텍스트를 확인하고자 한다.

// ..
function App() {
  // ..
  let contextControl = 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 < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>;
    contextControl = (
      <li>
        <a href="/update">Update</a>
      </li>
      {contextControl}
    );
  // ..
}
// ..

메인 화면에서는 Update 버튼이 보이지 않지만,

 

READ 모드, 상세보기에서는 Update가 보이게 된다.

 

다음으로 Update를 클릭하였을때 현재 보고 있는 내용의 id를 불러오고,

해당 id와 일치하는 배열 topics의 요소의 내용을 수정하도록 한다.

 

모드가 READ일 때의 contextControl의 내용에 id를 포함하도록 수정하고,

클릭 시 UPDATE 모드로 들어가는 속성을 넣는다.

 

UPDATE 모드일때 content가 컴포넌트 Update를 가져오도록 준비하고

 

컴포넌트 Update를 작성한다.

전체적인 흐름은 Crate와 같다.

const 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" />
        </p>
        <p>
          <textarea name="body" placeholder="body" />
        </p>
        <p>
          <input type="submit" value="Update" />
        </p>
      </form>
    </article>
  );
};

컴포넌트 Update가 프롭을 사용할 수 있게 사용자에도 onUpdate 속성을 넣는다.

확인

게시글 상세보기 상태에서 Update를 클릭하면

새로운 titile과 body를 입력할 공간이 나온다.

 

ui는 완료되었다. 기능을 구현한다.

 

Update 클릭 시 title과 body 입력칸에 기존의 내용이 담기게 한다.

 

 

mode가 UPDATE일 때의 내용 수정

현재 id를 불러오는 기능과, 해당 id의 title과 body를 속성 onUpdate에 넣어

컴포넌트 Update의 프롭으로 보내는 기능 추가

// ..
  } else if (mode === "UPDATE") {
    let title,
      body = null;
    for (let i = 0; i < topics.length; i++) {
      if (topics[i].id === id) {
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = (
      <Update
        title={title}
        body={body}
        onUpdate={(title, body) => {
          //
        }}
      ></Update>
    );
  }
// ..

 

컴포넌트 Update의 내용 수정

input과 textarea의 초기값으로 프롭으로 받아온 title과 body를 쓰도록 설정

// ..
const 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} />
        </p>
        <p>
          <input type="submit" value="Update" />
        </p>
      </form>
    </article>
  );
};
// ..

 

확인

게시글 상세보기에서 Update 클릭 시 title과 body 입력 칸에 기존 내용이 들어있는것 확인

하지만 기존 내용을 지우고 새로운 내용을 입력하는 것이 불가능한 상태

컴포넌트 Update의 사용자가 title과 body를 선언함으로 값이 고정되었고,

이 내용을 프롭으로 받아온 컴포넌트 Update가 값을 마음대로 수정할 수 없는 것이 원인

 

컴포넌트 Update의 내용 수정

프롭으로 받아온 title과 body를 state로써 사용하고, 

 

알아둘 것

HTML에서의 onChange는 값이 바뀌고 마우스 포인터가 밖으로 빠져나갈때 변경값이 호출되지만,

React에서는 무엇인가 변경이 발생할때마다 호출된다.

 

즉 키보드에서 무엇이든 입력할때마다 setTitle, setBody 등 set.. 을 호출하여 

기존값 title, body를 변경하고 컴포넌트를 다시 렌더링한다.

 

만약 아래와 같이 변경 내용을 콘솔로 찍는 코드를 적어보면

아래와 같이 매 입력값이 onChange에 들어가고 있는 것을 확인할 수 있다.

이로써 입력칸에서의 내용을 변경할 수 있게 되었다.

하지만 이 상태로는 입력칸안에서만 내용이 바뀌게 될뿐 적용은 되지 않는다.

 

 

다음은 이 새로운 입력값을 서버에 저장하는 기능을 작성한다.

현재 DB연결은 되어있지 않은 상황이니, 변경사항은 메모리에 저장될 것이다.

 

내용 입력 후 Update 버튼을 클릭하여 onUpdate 함수를 호출하는 기능은 이미 있으니

onUpdate에 전달된 인자 title과 body를 배열 topics에 저장하도록 할 것이다.

 

Update의 사용자에서 onUpdate 속성 내용 추가

// ..
    content = (
      <Update
        title={title}
        body={body}
        onUpdate={(title, body) => {
          const newTopics = [...topics];
          const updatedTopic = { id: id, title: title, body: body };
          for (let i = 0; i < newTopics.length; i++) {
            if (newTopics[i].id === id) {
              newTopics[i] = updatedTopic;
              break;
            }
          }
          setTopics(newTopics);
          setMode("READ");
        }}
      ></Update>
    );
// ..

전체적인 흐름은 Create 때와 같다.

 

const newTopics = [...topics];

기존 배열 topics의 복사본을 만든다.

 

const updatedTopic = { id: id, title: title, body: body };

배열에 넣은 요소 updatedTopic을 선언한다.

객체인 요소의 값들은 현재 게시글의 id, 새로 입력받은 title, body 이다.

 

for (let i = 0; i < newTopics.length; i++) {
  if (newTopics[i].id === id) {
    newTopics[i] = updatedTopic;
    break;
  }
}

복사본 newTopics에서 변경할 요소의 id와 일치하는 요소를 찾고,

해당 요소를 변경 내용이 입력된 updatedTopic이라고 선언한다.

배열의 다음 항목은 더 찾을 필요가 없으니 break로 반복문을 빠져나온다.

 

setTopics(newTopics);
setMode("READ");

이제 topics는 위 과정이 적용된 newTopics이다.

변경내용이 잘 적용되었는디 READ 모드로 들어간다.

 

 

확인

내용을 입력하고 Update 버튼을 클릭하면

READ 모드, 상세보기로 들어가며

변경한 내용이 잘 적용되어 있는 것을 확인할 수 있다.