MysqlDB - 다섯번째 이야기

우리는 이제 db에 저장되는것도 보았고 그것을 불러오는것도 해보았다.
그렇다 api에대해 어느정도 이해하고 사용할줄 알게된것이다.

그렇다면 이제 우리는 서버단에서 말고 clinet에서 우리가 원하는 내용을 서버로 보내고 서버에서 db에 넣은 내용을 가지고 유동성있는 기능을 사용하려고한다.

그러기위해선 우리는 Axios라는 기술에대해 먼저 알아야하는데 Axios는 무엇일까?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.
그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

특징

1. 브라우저를 위해 XMLHttpRequests 생성
2. node.js를 위해 http 요청 생성
3. Promise API를 지원
4. 요청 및 응답 인터셉트
5. 요청 및 응답 데이터 변환
6. 요청 취소
7. JSON 데이터 자동 변환
8. XSRF를 막기위한 클라이언트 사이드 지원

우리는 axios를 사용하기위해 먼저 모듈을 설치해야한다.
명령어는 아래와 같다.

$ npm install axios

자 다시 우리의 코드로 넘어와서 우리가 담을 로그인 정보 또는 새로운 정보를 담을것을 useState를 사용해서 담는다.

여기서 우리는 State라는것을 잠시 집고넘어가자고한다면 State는 동적인 값을 상태(State)라고 부른다.
사용자 인터렉션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요
우리는 이를위해 React Hooks를 통해 상태값을 바꿔줄것이다.

자 개념은 이렇고 우리는 다시 우리의 코드로 넘어가보자

참 여러가지 생각해 보았는데 일단 내가 잘못하고있는것에대해 집어가며 시작해보자

Listener.js(유저회원가입 페이지)

import React, { useEffect, useState } from "react";
import LisenerType from "./LisenerType";
import CountryType from "./CountryType";

const Lisener = () => {
  const [MusicTypes, setMusicTypes] = useState(["Pop", "k-pop", "Trot"]);
  const [Country, setCountry] = useState([""]);
  const [User, setUser] = useState([]);
  const [selected, setSelected] = useState("");
  const [Option, setOption] = useState("");

  useEffect(() => {
    console.log(User);
  }, [User]);

  const handleOnclick = (e) => {
    alert(MusicTypes[selected] + "장르를 좋아합니다.");
    setUser((User) => [
      ...User,
      "장르 : " + MusicTypes[selected],
      "국가 : " + Option,
    ]);
  };

  return (
    <div>
      <div className="music-type">
        <div>좋아하는장르</div>
        <div className="MusicTypeName">장르명</div>
      </div>
      {MusicTypes.map((MusicType, index) => (
        <LisenerType
          id={index + 1}
          key={index}
          name={MusicType}
          setSelected={setSelected}
        />
      ))}
      {Country.map((Country, index) => (
        <CountryType
          id={index + 1}
          key={index}
          name={Country}
          setOption={setOption}
        />
      ))}
      <button onClick={handleOnclick}>회원가입</button>
    </div>
  );
};

export default Lisener;

처음에 나는 client를 이렇게 꾸몄다.
useState를 하나씩 곱씹어보자면

const [MusicTypes, setMusicTypes] = useState(["Pop", "k-pop", "Trot"]);

음악타입을 배열로 넣어주었고

const [Country, setCountry] = useState([""]);

국가를 선택할것인데 그값은 빈배열에 값은 공값을 넣었다.
ps)이때 빈값으로 안주면...select option창이 없어진다..

const [User, setUser] = useState([]);

그리고 유저의 값을 빈배열로 넣었고

이제 그 빈배열값에 우리가 넣어주고싶은 데이터를 넣어줄것이다.

const handleOnclick = (e) => {
alert(MusicTypes[selected] + "장르를 좋아합니다.");
setUser((User) => [
...User,
"장르 : " + MusicTypes[selected],
"국가 : " + Option,
]);
};

이벤트핸들러를 만들고 위에 선언했던 유저의 값을 변환시켜줘야하기때문에 setUser를 통하여 User의 값을 동적으로 변환시켜줄 것이고 그안게 값으로는

      "장르 : " + MusicTypes[selected],

로 선택한 음악의장르를 가져와주고

      "국가 : " + Option,

선택한 국가를 가져와준다.

그것을 빈배열에 추가했고 최종적으로 콘솔창에서 확인한결과는

인덱스는 2가지가 들어가있고 길이는 2가 되어있는것을 확인할 수 잇다. 이제 우리는 클라이언트를 동시실행시켜줄것이다.