이글은 초보였던 시기에 작성했었던 글로..
input 핸들링을 잘 못했을 때 정리했던 글입니다.

input에 작성한 것 api로 넘겨주기

👿 input 다루기

• state를 설정해줘야한다.

state = {
	name : '',
}

• 이를 다룰 수 있는 input의 onChange 함수로 이 값을 다뤄줄 수 있어야한다.

<input onChange={this.handleChange} />

input의 value값을 state로 설정을 해주면, e.target.value를 통해 값을 받아올 수 있다.

input에 값을, 입력되는 value에 따라서 화면에 올릴 수 있다.

👿 input 이자식이 여러개다..?

class App extends Component {
	state = {
		name : "".
		email : ""
};

hadleChange = (e) => {
	this.setState({
		[e.target.name] : e.target.value
	});	
}

render() {
	return (
	<div>
        <input
          name="name"
          onChange={this.handleChange}
          value={this.state.name}
          placeholder="이름"
        />
				<input
          name="email"
          onChange={this.handleChange}
          value={this.state.email}
          placeholder="이메일"
        />
)
}

😈배열 데이터 렌더링 및 다루기

자식 컴포넌트가 부모한테 값 전달하기

---

자식 컴포넌트에서 부모에게 값을 전달할 때에는 부모 컴포넌트에서 state를 다룰 수 있는 hadle 함수를 만든 후, 자식에게 props로 전달해서 자식이 이를 호출시켜서 값을 다룰 수 있게 해주면 된다.

import React, { Component } from "react";
import InputForm from "./InputForm"; >> 내 코드로선 모달이다.

class App extends Component {
  handleCreate = (data) => {
    console.log(data);
  }
  render() {
    return (
      <>
        <InputForm onCreate={this.handleCreate} />
      </>
    );
  }
}

export default App;

부모 컴포넌트 App에서 자식에서 내려줄 handle 함수를 props를 통해 내보내준다.

여기서 프롭스를 통해 내보내준다는 것은

{this.handleCreate} 요 부분을 말하는 것이다.

그럼 자식에는 data가 있겠지?? 이어서 자식 컴포넌트(input모달)을 보겠다.

import React, { Component } from "react";

class InputForm extends Component {
/* input의 state를 정해준다. */
  state = {
    name: "",
    email: ""
  };
/* input의 value값을 받아올 수 있도록 설정한다. */
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = (e) => {
    e.preventDefault(); //새로고침 방지
    this.props.onCreate(this.state);
  };

/* render로 돌리기 ~~ */
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="name"
          onChange={this.handleChange}
          value={this.state.value}
          placeholder="이름"
        />
        <input
          name="email"
          onChange={this.handleChange}
          value={this.state.email}
          placeholder="이메일"
        />
        <button type="submit">작성</button>
      </form>
    );
  }
}

export default InputForm;

이런식으로 작성하면 ~ 모달에서 받아온 input 값들을 handle 함수를 호출해서 input 값 즉, 자식의 state 값을 부모에게 나타낼 수 있다.

🤦🏻‍♀️ 배열에 데이터 삽입하기

위에서 단순히 data를 출력만 했는데, 이제부터 본격적으로 이 data들을 배열에 삽입하는 방법을 알아보자.

먼저 App에서 값을 담은 state를 선언해준 후, setState를 통해 값을 삽입하면 된다. 값을 삽입할 때 주의할 점은 불변성을 유지시켜줘야 하는 것이다.

state 선언하기

state = {
	users : []
}

setState로 값 삽입하기

hadleCreate = (data) => {
	this.setState({
	users : this.state.users.concat(data)
})
}

여기까지하면 데이터는 불면성을 유지하며 users배열에 값이 정상적으로 삽입될 것이다.

하지만 보통 이렇게 쓰진 않고 각 데이터에 고유한 id를 삽입하여 사용을 하지,, 으 ㅠㅠ

어떻게 할 수 있을까에 대한 고찰,, 의 끝

일단 넣어줄 id 값이 생성되었다. (id 값은 렌더링될 값이 아니므로 굳이 state를 통해 다루지 않아도 된다고 한다.)

users 배열에 자식에게 받아온 값과 id값을 함께넣기 위해선 이 역시도 불변성을 유지하면서 값을 삽입해야될 것이다. 이를 위해서 여러가지 방법이 있다.

• spread 연산자 활용

handleCreate = (data) => {
	this.setState({
	users : this.state.users.concat({
	...data,
	id : this,id++
	})
})
}

render() //에서 돌리는 방법
return(
	<>
		<inputForm onCreate = {this.handleCreate} />
		{JSON.stringify(this.state.users)}
	</>
)

key값은 리액트에서 배열을 렌더링할 때 업데이트 성능을 최적화해준다.

어쨌든 실전에서 중요한 것은

input마다 name을 데이터에 맞게 각각 알맞게 지정해주는 것,

<Input
     name="id" /* api에 등록되어있는 Name 지정 */
     placeholder="내용을 입력해주세요."
     defaultValue={ID} /* value보단 바뀔 수 있는 defaultValue 설정 */
     onChange={hadleInput} /* 각 타입에 맞는 onChange 설정 */
/>

데이터 이름대로 가져오고 싶다면 set을 해줘서 useState로 초기화해주는 것,

/* 이거는 이전 상태값을 활용하여 새로운 상태를 업데이트하기 위해 함수를 사용한다. name을 키로 하여 상태 객체의 값을 업데이트하는 용도. */
  const hadleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCreate({
      ...create,
      [e.target.name]: e.target.value,
    })
  }

input, select, textarea 각 onChange 핸들러를 만들어줘서 넣을 것

post로 어떻게 넘기느냐가 관건이었다.

일단 버튼을 하나 만들어서 post가 담겨있는 함수를 집어넣는다.

<Button onClick={PostEnroll}>저장</Button>

이렇게 하면 함수안에 modal close 함수도 넣을 수 있고 ~ 뭐 암튼 그래

const PostEnroll = () => {
    PostLicense(create)
      .then((response) => {
        console.log('test : ', response)
        if (response.data === 'SUCCESS') {
          console.log('등록 api ~~ 연결 성공', response)
        } else {
          console.log('staus 에러', response.data.statusinfo.message)
        }
      })
      .catch((error) => {
        console.log('등록 실패', error)
      })
    setModal(false) /* 모달 꺼주는 거 */
  }

버튼안에 넣어준 함수는 이렇게 생겨먹었다.