이벤트 처리

웹문서에서 고객 데이터를 전송하는 양식을 공부한다.

 

서버와의 통신목적의 라이브러리인 axios를 설치해본다.

 

cd client

npm install --save axios

 

 

새로운 component이므로 CustomerAdd.js파일을 추가한 다음 

axios , react를 import 한다.

 

폼양식을 디자인을 제외하고 빠르게 만든다.

폼에서 name값은 서버에서 구별하기 위한 변숫값이다.

class CustomerAdd extends React.Component {

    constructor(props){
        super(props);

        this.state = {

            file : null,
            userName : '',
            birthday : '',
            gender : '',
            job : '',
            fileName : ''

        }

    }
    
  }

각 기본값을 설정해준 뒤 사용자의 입력하면 이벤트를 처리하도록 한다.

<form onSubmit={this.handleFormSubmit}>
<h1>고객 추가</h1>
프로필 이미지 : 
<input type="file" name="file" file={this.state.file} value ={this.state.fileName} onChange={this.handleFileChange}/><br/>
이름 : 
<input type="text" name="userName" value={this.state.userName} onChange={this.handleValueChange}/><br/>
생년월일 :
<input type="text" name="birthday" value={this.state.birthday} onChange={this.handleValueChange}/><br/>
성별 : 
<input type="text" name="gender" value={this.state.gender} onChange={this.handleValueChange}/><br/>
직업 :
<input type="text" name="job" value={this.state.job} onChange={this.handleValueChange}/><br/>
<button type="submit">추가하기</button>
</form>

 

보통은 AJAX로 폼 전송을 할 일이 없는데 이미지를  AJAX로 업로드하는 경우 폼 전송이 필요합니다.

페이지 전환 없이 폼 데이터를 제출하고 싶다면 FormData객체를 이용합니다.

window.FormDate에 위치하며 append메서드로 키와 값 형식을 추가해줄 수 있습니다.

 

 

    addCustomer = () => {

        const url= 'api/customers';
        const formData = new FormData();
        formData.append('image', this.state.file)
        formData.append('name', this.state.name)
        formData.append('birthday', this.state.birthday)
        formData.append('gender', this.state.gender)
        formData.append('job', this.state.job)


        const config = {
            headers : {
                'content-type' : 'multipart/form-data'
            }
        }

        return post(url, formData, config);
    }

여기서 config 객체는 파일을 전송할 경우 헤더에 multipart/form-data형식을 추가해주기 위한 객체이며 ,

axios의 post를 이용해 서버에 요청합니다.

 

 

변경되면 감지할 수 있도록 onChange함수의 구현.

 

    handleFormSubmit = (e) =>{
        e.preventDefault();
        this.addCustomer()
            .then( res => console.log)
    }

    handleFileChange = (e) => {
        this.setState({

            file: e.target.files[0],
            fileName : e.target.value
        })
    }

    handleValueChange = (e) => {

       let nextState = {};
       nextState[e.target.name] = e.target.value;
       this.setState (nextState);
       
    }



    addCustomer = () => {

        const url= 'api/customers';
        const formData = new FormData();
        formData.append('image', this.state.file)
        formData.append('name', this.state.name)
        formData.append('birthday', this.state.birthday)
        formData.append('gender', this.state.gender)
        formData.append('job', this.state.job)


        const config = {
            headers : {
                'content-type' : 'multipart/form-data'
            }
        }

        return post(url, formData, config);
    }

기본적으로 이벤트를 막아 에러를 막아야 합니다.

e.preventDefault();

 

nextState는 객체인데 자바스크립트는 객체를 생성한 뒤 나중에 속성을 추가할 수 있는 미친 짓이 가능하므로

변경될 때 속성을 추가해 state속성에 더해준다.

 

지금까지는 cilent에서 server에 데이터를 전 송하기 위한 준비를 했다 

실행화면은 다음과 같다.