[React] 5주차 스터디 - (입문) 폼 / axios

11 폼

1) 폼이란 무엇인가?

• 사용자로부터 입력을 받기 위해 사용한다.
• 텍스트, 체크박스, 셀렉트 등 사용자가 무언가 선택을 해야 하는 것을 모두 폼이라고 한다.

2) 제어 컴포넌트

• 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다.
• 즉, 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트이다.

function NameForm(props) {
	const [value, setValue] = useState('');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
    }
    
    const handleSubmit = (event) => {
    	alert('입력한 이름: ' + value);
        event.preventDefault();
    }
    
    return (
    	<form onSubmit={handleSubmit}>
        	<label>
            	이름:
                <input type="text" value={value} onChange={handleChange} />
            </label>
            <button type="submit">제출</button>
        </form>
    )
}

• useState(): 함수 컴포넌트에서는 해당 훅을 사용해 state를 관리한다. state는 모든 데이터를 관리한다.
• value={value}: 리액트 컴포넌트의 state에서 값을 가져다 넣어 준다.
• onChange={handleChange}: 입력값이 변경되었을 때 변경된 value를 state에 저장하는 handleChange 함수가 호출된다.

3) textarea 태그

• 여러 줄에 걸쳐서 텍스트를 입력받기 위한 HTML 태그이다.
• 리액트에서는 value라는 attribute로 입력된 값을 관리한다.

...
<textarea value={value} onChange={handleChange} />
...

4) select 태그

• 드롭다운 목록을 보여주기 위한 HTML 태그이다.
• multiple이라는 속성값을 true로 하고 value로 배열을 넣어 주면 여러 개를 선택할 수 있다.
• 리액트에서는 value라는 attribute로 선택된 옵션의 값을 관리한다.

...
<select value={value} onChange={handleChange}>
	<option value="apple">사과</option>
	<option value="banana">바나나</option>
	<option value="grape">포도</option>
	<option value="watermelon">수박</option>
</select>
...

5) File input 태그

• 디바이스의 저장 장치로부터 사용자가 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그이다.
• 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용한다.
• 읽기 전용이기 때문에 리액트에서는 비제어 컴포넌트가 된다.

<input type="file" />

6) 여러 개의 입력 다루기

• 컴포넌트에 여러 개의 state를 선언하여 각각의 입력에 대해 사용한다.

...
const [haveBreakfast, setHaveBreakfast] = useState(true);
const [numberOfGuest, setNumberOfGuest] = useState(2);
...

7) Input Null Value

• value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶을 경우, 값에 undefined 또는 null을 넣어 사용한다.

...
<input value={null} />
...

---

+ Axios

1) Axios란?

• Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다.

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경

2) 설치

npm 사용하기:

$ npm install axios

yarn 사용하기:

$ yarn add axios

3) 대표 메서드

• GET

// user에게 할당된 id 값과 함께 요청한다.
axios.get('/user', {
	//옵션을 주고자 할 때
    params: {
      ID: 12345
    }
  })
  // 성공했을 때
  .then(function (response) {
    console.log(response);
  })
  // 오류가 발생했을 때
  .catch(function (error) {
    console.log(error);
  })
  // 항상 실행되는 함수
  .finally(function () {
  
  });

• POST

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    // 성공했을 때
    .then(function (response) {
        
    })
    // 오류가 발생했을 때
    .catch(function (error) {
        
    })

• PUT

axios.put("url", {
        username: "",
        password: ""
    })
    // 성공했을 때
    .then(function (response) {

    })
    // 실패했을 때
    .catch(function (error) {

    })

• DELETE

axios.delete('/user?ID=12345',{
	// query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때
    data: {
      post_id: 1,
      comment_id: 13,
      username: "foo"
    }
  })
  // 성공했을 때
  .then(function (response) {
    console.log(response);
  })
  // 실패했을 때
  .catch(function (error) {
    console.log(error);
  })

4) 응답 데이터

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
})
.then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

• response.data
  • {}, 서버가 제공한 응답
• response.status
  • 200,  서버 응답의 HTTP 상태 코드
• response.statusText
  • 'OK',  서버 응답으로 부터의 HTTP 상태 메시지
• response.headers
  • {}, 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공
• response.config
  • {}, 요청에 대해 `axios`에 설정된 구성(config)