[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기

 앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계적이지 않다할까? 너무 선택적지도 많고.. 대신 장고공부를 계속 했었다. 장고내에서 CRUD가 되는 게시판을 만들었는데, SSR 즉, 장고내에서  MVT를 이용하여 구성했고 프론트는 기본 HTML에 장고템플릿 엔진을 사용했다. 그렇게 게시판을 끝마치고 든 생각은, 이걸 리액트 즉 CSR에서는 어떻게 사용해야 할까? 이었다. 그래서 일단 머리박치기느낌으로 해보기로 했다. 이 프로젝트에 끝은 나만의 토이 프로젝트를 만들어 보는 것이다. 일단 이것은 1단계 어떻게 리액트를 꾸려야 백엔드API로 장고를 활용할 수 있는지 알기 위해서이다. 간단한 제품 등록 및 삭제를 만들어 보도록 하겠다.

리액트 정말 오랜만에 시작하는데, 엄청 많이 바꼈다. 그래서 아는 선에서 진행했다 ㅠ

최종 결과물

리액트를 다루면서 엄청 많이 해본 간단한 TO DO 어플리케이션이랑 다를게 없지만, 데이터가 장고서버를 통해서 주고 받는다는 점이다. 저렇게 등록한 게시물은 장고의 데이터베이스에 저장되고 또 삭제된다.

---

Post.js와 ItemList.js 두개를 만들어주자. Post.js는 이름과 가격을 입력하고 추가 버튼을 누르면 axios를 통해 서버와 통신할 것이다. ItemList.js는 각 아이템하나하나를 담당할 Item과 ItemList로 안에서 나뉘게 된다. axios는 맨 마지막에 달아주도록하고 프론트으 틀을 먼저 잡아주자. 이제부터 작성될 것은, 내가 프론트코드를 작성하면서 알게됐던 방법들을 중점으로 풀어나가고 당연히 풀 코드가 올라가지않을 수 있다.

 

# 리액트에서 Input태그 여러개 관리하기

const [name,setName] = useState('');
const [price,setPrice] = useState('');

const onNameChange = (e) => {
	e.preventDefault();
    setName(e.tatget.value)
}

const onPriceChange = (e) => {
	e.preventDefault();
    setName(e.tatget.value)
}


return (
    <>
      <h1>포스트입니다</h1>
      <form onSubmit={onSubmitItem}>
        <input placeholder="제품명" type="text" name="name" onChange={onNameChange} value={name}/>
        <input placeholder="가격" type="number" name="price" onChange={onPriceChange} value={price}/>
        <button type="submit">추가</button>
      </form>
    </>
  )

 

이렇게 Inuput이 두개만되어도 각 input의 onChange를 감지하는 두개의 함수를 만들어줘야한다. 그니까 한 input당 무조건 useState한개 onChange 한개 총 두개, 3개의 인풋만 있어도.. 6개나 적어야하고 10개면 20개를 이렇게 적어줘야한다. 저렇게 코딩하면서 느꼈다. 뭔가 방법이 있을텐데 ! 당연히 존재한다. 하나의 useState로 감지하게 하고, onChage또한 하나로 모아서 사용하면 된다.

const [inputs,setInputs] = useState({
    name : '',
    price : '',
  });
  
const onInputChange = (e) => {
    setInputs({
      ...inputs,
      [e.target.name] : e.target.value
    })
  }
  
  return (
    <>
      <h1>포스트입니다</h1>
      <form onSubmit={onSubmitItem}>
        <input placeholder="제품명" type="text" name="name" onChange={onInputChange} value={name}/>
        <input placeholder="가격" type="number" name="price" onChange={onInputChange} value={price}/>
        <button type="submit">추가</button>
      </form>
    </>
  )

한개의 useState로 객체화(?) 시키고 안에다가 적어준다. 핵심은 onInputChange이다. e.target.name과 e.target.value두개를 활용하는건데, e.target.name을 콘솔에 찍어보면서 input태그를 아무거나 선택하고 적어보면 해당 input태그의 이름이 글자를 입려할때마다 찍힌다. e.target.value는 지금 변화가 감지되는 태그의 value값이 찍힌다. 즉 입력하고 있력된 값이 찍힌다. 이걸 이용하는건데 JS의 ... 을 이용하여 현재까지 inputs을 복사시키고 [e.target.name] : e.target.value 을 사용하여 객체를 추가시킨다. 중복된다면 덮어씌워질 것이다. 이렇게 작성하면 하나의 inputs으로 여러개의 input태그를 관리 할 수 있다.

 

# 리액트에서 form 태그

리액트에서 form태그는 순수 HTML과는 조금 다르다. 코드를 비교해보겠다.

###HTML에서의 form

      <form method="POST" action="백엔드 url" >
      	<label for="name">제품명</label>
        <input placeholder="제품명" type="text" name="name" onChange={onInputChange} value={name}/>
        
        <label for="price">가격</label>
        <input placeholder="가격" type="number" name="price" onChange={onInputChange} value={price}/>
        <button type="submit">추가</button>
      </form>

여기서 form은 input에 있는 태그들은 type버튼을 누르면 해당 form이 action에 적은 주소로 전송된다. input에 name옵션을 적어줬는데 이 옵션에 적힌것이 이름으로하여금 따라가게 된다, name="감자" price="10000" 이런식으로 말이다.

 

### React에서의 form

const onSumbitItem = (e) => {
	e.preventDefault() //폼의 기본기능을 막고 내가 커스텀(?)한 행동을 취하게 하기 위해서
    
    const body = {
    	// req.body에 실어서 보낼 것
    }
    
    const header = {
    	//req header에 실어서 보낼것
    	
    }
    
    axios.post('url',body,header)
    	.then((res)=>{
        	//성공시
        })
        .catch((err)=>{
        	//실패시
        })

}


	<form onSubmit={onSubmitItem}>
        <input placeholder="제품명" type="text" name="name" onChange={onInputChange} value={name}/>
        <input placeholder="가격" type="number" name="price" onChange={onInputChange} value={price}/>
        <button type="submit">추가</button>
      </form>

그러나 리액트에서는 이렇게 작동하면 안된다. 리액트는 위와 같이 submit을 누르면 onSubmit에 적은 함수가 실행된다. 그러면 이 함수에서 어떻게 할지를 처리를 해줘야하는 구조이다. 자세히는 이번게시물말고 다음 게시물에서 axios로 백엔드와 통신하도록 설계해야하기 때문에 여기까지만 한다.

다음편에서는 ItemList를 완성시키고, 그 다음편에서는 axios로 백엔드와 통신하기 위한 코드를 적어보도록 하겠다.