[ Review ] 클론코딩 - 인스타 로그인페이지

리액트 로그인 페이지 후기

자바스크립트를 이용해서 만든 로그인페이지 HTML과 CSS를 리액트로 가져와서
리액트에서는 CSS를 SCSS(SASS)로 바꿔서 사용해주고 거의 기능구현 부분만
리액트를 사용해서 디자인적으로는 어려운 부분이 없었지만,
기능구현 부분이 이제서야 자바스크립트를 익혔는데, 리액트를 처음부터 배워서 시작하느라
이제와서 생각해보면 별거아닌 간단한 작업인데도 불구하고 시간이 너무 오래걸렸다.

Mission 📌

• 사용자 입력 데이터 저장
• 로그인 버튼 활성화 (validation)
  • ex. ID - @ 포함 / PW - 5글자 이상 버튼 색상 변경

---

리액트로 로그인 기능구현

1. 초기값 세팅해주기

id: "" id가 들어갈 인풋값을 넣어주는 초기값
pw: "" pw가 들어갈 인풋값을 넣어주는 초기값

class Login extends Component {
  constructor() {
    super();
    this.state = {
      id: "",
      pw: "",
    };
  }

---

2. input안에 value가져오기

처음했던 input안에 value 가져왔던 방법

//함수선언
handlePwInput = (event) => {
        this.setState({
            pw: event.target.value
        })
    }

handlePwInput이라는 함수를 만들어서 event가 들어올때마다
(event는 input 안의 값이 변경될 때에 발생되는 이벤트를 뜻한다.)
this.setState로 초기값으로 만들어준 pw:'' 값을 pw: event.target.value 값으로 바꿔준다.
(event.target.value는 인풋값안에 작성해준 값을 뜻한다.)

//인풋영역
<input
    className="password"
    type="password"
    placeholder="비밀번호"
    onChange={this.handlePwInput}
    value={pw}
/>

인풋영역에 onChange={this.handlePwInput}와, value={pw}를 작성해준다.
(onChange는 input 안의 값이 변경될 때에 발생하는 이벤트!)
value안에 {pw}는 내가 state값으로 설정해준 이름으로 적어준다.

처음 내가 한 방법대로 id와 Pw의 각각의 함수를 만들어서 사용해줄 수 있는 방법도 있지만,
더 깔끔한 방법으로 과제를 끝낸 마지막에 리팩토링해주었다.

리팩토링한 방법

handleInput = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,
    });
  };

handleInput이라는 함수를 만들어서 event가 들어올때마다
(event는 input 안의 값이 변경될 때에 발생되는 이벤트를 뜻한다.)
this.setState로 각 인풋에 이름을 지정해주어서 이름을 불러주면 그 해당하는 이름이 불린 인풋안의 값으로 변경해주는 것이다.

const { name, value } = event.target;
이건 무슨뜻이냐 객체구조분해할당으로
[event.target.name] : event.target.value로 풀어쓰는 것을
조금이라도 줄여서 쓰기 위해 사용해주는 것으로 사용했다.

---

3. 인풋값이 들어오면 버튼 색상 활성화 하기

<button
	className={id.includes("@") && pw.length >= 5 ? "on" : "off"}
    	onClick={this.goToMain}>

버튼안에 className을 만들어서 그 안에 조건을 만들어서 넣어준다.
조건은 만약 아이디인풋에 @이가 들어있고, pw의 길이가 5글자이상이면
css의 on클래스를 적용시키고 그게 아니라면 css의 off를 실행시킨다.

.on {background-color:#0094f6;}

.off {background-color:#0094f64b}

---

4. 백엔드와 협업을 해보자!

백엔드와 협업하지않고 버튼을 누르면 메인으로 넘어가려고 한다면

goToMain = () => {
	this.props.history.push("/maindh");
  };

goToMain이라는 함수를 만들어서 this.props.history.push("/maindh");
를 넣어주고 버튼에 goToMain 함수를 onClick으로 넣어주면 끝이다.

하지만 우리가 실제로 구현할 방법은 백에서 허락된 값이 입력되어야
메인페이지로 넘어갈 수 있게 구현해야한다.

goToMain = () => {
    fetch("http://10.58.2.229:8000/users/login", {
      method: "POST",
      body: JSON.stringify({
        account: this.state.id,
        password: this.state.pw,
      }),
    })
      .then((res) => res.json())
      .then((result) => {
        console.log(result);
        if (result.MESSAGE === "SUCCESS") {
          localStorage.setItem("Token", result.Token); //토큰받아오기
          alert("로그인성공!");
          this.props.history.push("/maindh");
        } else {
          alert("🤬IT'S YOUR FAULT!🤬");
        }
      });
  };

account,password : 백엔드가 정해준 키 이름
this.state.id / pw : state에서 정해준 id/pw 값
(result.MESSAGE === "SUCCESS") : 백엔드가 보내는 성공 메세지
localStorage.setItem("Token", result.Token); : 로컬스토리지에 토큰 받아오기

이렇게 되면 서버와 연결됐을때 조건 값에 따라 알림창이 뜨거나, 메인페이지로 넘거가게 된다.