[React/리액트] form 태그와 input 값 다루기

Form과 form 태그

Form 이란 웹 브라우저에서 사용자와 상호작용하기 위해 존재하는 여러 입력 양식이다. 

그리고 이런 form을 다루는 태그를 form 태그라 부른다. 

여러 입력 양식들을 감싸는 최상위 태그이다. 

 

<form>
  <input/>
  <select>
  	<option />
    <option />
  </select>
</form>

 

input 태그

가장 많이 쓰이는 입력 태그들 중 하나이다. 

<input />

 

textarea 태그

만약 입력값이 길 경우 textarea 를 사용할 수 있다. 

<textarea />

입력값의 속성 설정하기

type 설정

input 태그의 경우 여러 type을 설정할 수 있다. 

 

가장 많이 쓰이는 type은 text 이다. 

<input type='text'/>

text는 type의 기본값으로 따로 type 설정을 하지 않아도 text 속성을 지니게 된다. 

 

checkbox 는 값을 선택할 수 있는 버튼을 생성한다. 

이 외에도 여러 type이 존재하니, 자신이 다루는 값의 종류가 무엇인지에 따라 type 을 설정해주면 된다. 

• password
• button
• password
• radio
• search

 

value 

input 요소의 초기값을 명시하는 역할을 한다. 

<input value='초기값'/>

만약 값을 수정해야할 경우 value 값을 설정하여 사용자에게 기존 값을 먼저 보여줄 수 있다. 

 

name

input 요소의 이름을 정의한다. 

 

placeholder

다음과 같이 input 영역에 보일 미리보기 텍스트를 설정할 수 있는 속성이다. 

 

<input placeholder='입력을 받습니다.'/>

onChange를 통한 값 저장하기

input에 값을 입력할 때마다 값을 저장하고 싶다면 onChange 속성과 이벤트 핸들러를 사용하면 된다. 

 

onChange 이벤트는 사용자가 값을 입력할 때마다 발생한다. 

따라서 setter 함수를 통하여 state의 값을 input의 value 값으로 변경하는 함수를 onChange 이벤트의 이벤트 핸들러로 설정해주면 된다. 

 

  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleTitle = (e) =>{
    setTitle(e.target.value);
    console.log(title);
  };
  const handleContent = (e) =>{
    setContent(e.target.value);
    console.log(content);
  };

  return(
    <S.Wrapper>
      <S.Form>
        <input name='title' value={title} onChange={handleTitle}/>
        <textarea name='content' value={content} onChange={handleContent}/>
      </S.Form>
    </S.Wrapper>
  );

 

입력을 할 때마다 title의 값이 console 창에 잘 출력된다. 

 

여기서 파라미터로 설정한 e 는 이벤트 객체이고, target은 이벤트가 발생한 input DOM 을 가리킨다. 

console 창에 e를 출력해보았다. target 프로퍼티 역시 보인다. 

이를 출력해보면

입력이 발생하는 요소가 잘 출력된다 !

여러 입력값을 하나의 객체로 다루기

현재 title과 content를 각각 다른 state로 설정하였다. 

이를 하나의 객체로 묶어서 관리하면 더 깔끔한 코드가 될 것이다. 

const INITIAL_VALUES = {
  title: '',
  content: '',
};

function Main () {
  const [values, setValues] = useState(INITIAL_VALUES);

  const handleTitle = (e) =>{
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };
  const handleContent = (e) =>{
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };
  
  return(
    <S.Wrapper>
      <S.Form>
        <input name='title' value={values.title} onChange={handleTitle}/>
        <textarea name='content' value={values.content} onChange={handleContent}/>
      </S.Form>
    </S.Wrapper>
  );
}

초기값도 상수로 따로 설정해주었다. 

이벤트 핸들러 역시 하나의 함수로 줄일 수 있다. 

 

const handleChange = (e) =>{
  setValues({
    ...values,
    [e.target.name]: e.target.value
  });
};

 

 

form 요소로 api 연결하기 

onSubmit 로 form 요소값 전송하기

form 태그의 속성으로 onSubmit 이벤트를 지정할 수 있다. 

onSubmit 이벤트를 통하여 요소의 input 값들을 전송할 수 있다. 

<form onSubmit={<이벤트 핸들러 함수>}>
.
.
.
</form>

다른 이벤트 함수들과 마찬가지로 이벤트 핸들러 함수를 넘겨주면 된다. 

 

const handleSubmit = (e) => {
  console.log('저장');
};

 

그리고 이벤트는 버튼과 함께 적용해줄 수 있다. 

form 태그 내부에 button 태그로 버튼 컴포넌트를 생성해주고, 이때 type을 submit 로 변경해주어야 한다.

<S.Form onSubmit={handleSubmit}>
  <input name='title' value={values.title} onChange={handleChange}/>
  <textarea name='content' value={values.content} onChange={handleChange}/>
  <button type='submit'>
    저장하기
  </button>
</S.Form>

 

버튼의 경우에는 따로 버튼 이벤트를 설정해줄 필요가 없다. 

이제 버튼을 누르면, form 요소의 값이 전송이 된다. 

이때 화면이 새로고침이 되는데, 이를 막기 위해서는 이벤트 객체의 메소드인 preventDefault 함수를 호출해주면 된다. 

const handleSubmit = (e) => {
  e.preventDefault();
  console.log('저장');
};

해당 함수는 기본적으로 브라우저의 동작을 중단시키는 역할을 하며, submit이 동작했을 때 새로고침을 막을 수 있다.

formdata로 입력값 전송하기

form 요소들을 전송하기 위해서 formData를 통해 하나의 객체로 만들어 준다. 

 

const formData = new FormData(); //객체 생성
formData.append('title', values.title); //key값과 value값 작성
formData.append('content', values.content);

 

function Main () {
  const [values, setValues] = useState(INITIAL_VALUES);

  const postForm = async (body) => {
    const res = axios.post('<주소>', body);
    return res;
  };

  const handleChange = (e) =>{
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('title', values.title);
    formData.append('content', values.content);

    postForm(formData);
    console.log('저장');
  };

  return(
    <S.Wrapper>
      <S.Form onSubmit={handleSubmit}>
        <input name='title' value={values.title} onChange={handleChange}/>
        <textarea name='content' value={values.content} onChange={handleChange}/>
        <button type='submit'>
          저장하기
        </button>
      </S.Form>
    </S.Wrapper>
  );
}

모두 종합하여 다음과 같이 form 요소들을 api 연결을 통하여 전송할 수 있다 !