[React] 사용자 입력을 통한 새로운 글 포스팅

이번 포스팅에서는 사용자의 입력을 받아 새로운 글을 업로드 하는 과정을 살펴보겠다.

input 태그

코드를 먼저 살펴보자.

function App() {
  let [inVal, setInVal] = useState('');
  return (
  	<div>
    	<input onChange={ (e) => { setInVal(e.target.value); }} />
    </div>
  )
}

하나하나 살펴보면 다음과 같은 정보들을 얻을 수 있다.

🎯 e.target 은 input 을 입력하는 공간을 의미한다.

🎯 e.target.value 는 input 값을 의미한다. 정확히는 e.target.value 은 input 을 입력하는 공간에 기입된 값을 의미하는데, 이는 input 값과 동치이기 때문이다.

🎯 onChange 는 input 값이 변경될 때마다 call 되는 함수이다. 위 코드는 input 값이 변경될 때마다 setInVal() 이 call 되는 기능을 수행한다.

Ex. 사용자 입력을 통한 새로운 글 업로드

사용자 입력을 통해 새로운 글을 업로드 하는 코드를 작성해보자.

코드는 다음과 같다.

input 태그에 있는 onChange 와 button 태그에 있는 onClick 을 유심히 살펴보면 잘 이해할 수 있을 거다.

import React, {useState} from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  let [title, setTitle] = useState(['나이키', '아디다스', '퓨마']);
  let [thumb, setThumb] = useState([0, 0, 0]);
  let [inVal, setInVal] = useState('');
  return (
    <div>
      {
        title.map(function(e, i) {
          return (
            <div key={i}>
              <h3> { e }
                <span onClick={ () => {
                  var temp = [...thumb];
                  temp[i] = temp[i] + 1;
                  setThumb(temp);
                }}>👍</span> { thumb[i] }
              </h3>
            </div>
          )
        })
      }
      <input onChange={ (e) => { setInVal(e.target.value); } }></input>
      <button onClick={ () => {
        let _title = [...title];
        _title.unshift(inVal);
        let _thumb = [...thumb];
        _thumb.unshift(0);
        setTitle(_title);
        setThumb(_thumb);
      }}>버튼</button>
    </div> 
  )
}

export default App

결과 화면은 다음과 같이 출력된다.