[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 3. redux, useState 으로 input 값 집어넣기

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

* (11/6) useState보다 useSelector 사용을 더 추천합니다.

 

 

 

 

이번에는 게시글 저장을 구현해보려고 한다.

 

RegisterPage.js 의 form 태그 안에 button을 만들어준다.

 

 

 

나는  RegisterPage를 게시글 등록뿐만 아니라 수정할 때도 재사용 것이기 때문에 react hook인 useState와 onChange 이벤트를 사용할 것이다.

 

 

es6, es7 code snippet extension을 이용하게 되면 각종 라이브러리의 hook 들을 손쉽게 쓸 수 있다.

 

 

 

위의 사진처럼  useState를 입력했을 때 첫번째 자동완성은

 

 

const [state, setState] = useState(initialState)

 

이 식을 만들어주고

 

 

 

 

두번째 자동완성은

 

 

import React, { useState } from react;

 

import 문에 useState를 자동으로 추가해준다.

 

 

 

 

 

일단  useState로 TitleValue, ContentValue를 만들어주고 해당 name을 갖고 있는 태그에 value로 넣어준다.

 

 

// RegisterPage.js

import React, { useState } from "react";

function RegisterPage() {

  const [TitleValue, setTitleValue] = useState("")
  const [ContentValue, setContentValue] = useState("")
  return (
    <div>
      <form onSubmit>
        <br />
        <label>Title: </label>
        <input onChange value={TitleValue} type="text" name="title" />
        <hr></hr>
        <div>
          <textarea onChange value={ContentValue} name="content"/>
        </div>
        <button onClick>Submit</button>
      </form>
    </div>
  );
}

export default RegisterPage;

 

 

 

이렇게 작성하고 저장하게 되면 input과 textArea 의 초깃값이 '""로 지정되어있기 때문에 아무리 입력하려 해도 값이 들어가지 않는다.

 

 

 

 

 

value property를 defaultValue로 바꾸면 입력이 가능하지만 나는 이 대신 onChange 이벤트를 사용할 것이다.

 

 

<input onChange defaultValue={TitleValue} type="text" name="title" />

<textarea onChange defaultValue={ContentValue} name="content" />

 

 

 

 

onTitleChange와 onContentChange를 추가하고 console.log 로 값이 어떻게 들어가는지 확인해 보자

 

 

// RegisterPage.js

import React, { useState } from "react";

function RegisterPage() {
  const [TitleValue, setTitleValue] = useState("");
  const [ContentValue, setContentValue] = useState("");

  const onTitleChange = (event) => {
    setTitleValue(event.currentTarget.value);
  };
  console.log(TitleValue);

  const onContentChange = (event) => {
    setContentValue(event.currentTarget.value);
  };
  console.log(ContentValue);
  return (
    <div>
      <form onSubmit>
        <br />
        <label>Title: </label>
        <input
          onChange={onTitleChange}
          value={TitleValue}
          type="text"
          name="title"
        />
        <hr></hr>
        <div>
          <textarea
            onChange={onContentChange}
            value={ContentValue}
            name="content"
          />
        </div>
        <button onClick>Submit</button>
      </form>
    </div>
  );
}

export default RegisterPage;

 

 

 

 

 

 

 

보통은 input, textarea의 onChange 이벤트는

 

 

const onChange = (event) => {
  const { name, value } = event.target;
  if (name === "title") {
    setTitleValue(value);
  } else if (name === "content") {
    setContentValue(value);
  }
};
  
<input onChange={onChange} value={TitleValue} type="text" name="title" />
<textarea onChange={onChange} value={ContentValue} name="content" />

 

 

 

 

이런식으로 사용겠지만 나중에 효과를 다르게 넣을 수도 있고 그럴 경우 위와 같은 방식은 가독성이 떨어지기 때문에 onChange 함수를 title과 content 별로 따로 두는 것이 낫다고 판단하였다.

 

 

 

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial