32일차 프론트엔드 공부 - State

- 프론트엔드 공부 32일차 -

React의 핵심 

Component란?

UI 또는 기능을 부품화해서 재사용 가능하게 하는  것

 

함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단하다

하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없다.

그래서 React에서 `함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었는데, 이 도구를 Hooks(훅) 이라고 부른다.

 

Hooks란?

use로 시작하것들

 

useState?

State를 만들어준다

 

state?

컴포넌트에서 사용하는 변수

 

1. 변수 만드는 방법 비교

let count = 0

const count = 0

 

const[ count, setCount ] = useState(0)

const[ 변수명, 변수바꾸기 ] = 변수만들기(초기값)

 

2. 변수 바꾸는 방법 비교 

let count = 0

count = 5

 

const[ count, setCount ] = useState(0)

setCount(5)

 

State를 사용하는 이유?

document.getElementById()... 와 같은 복잡한 것들을 사용하지 않을 수 있다.

 

ex)

기존 방식

export default function CounterLetDocumentPage() {
  function onClickCountUp() {
    const result = Number(document.getElementById("qqq").innerText) + 1;
    document.getElementById("qqq").innerText = result;
  }

  function onClickCountDown() {
    const result = Number(document.getElementById("qqq").innerText) - 1;
    document.getElementById("qqq").innerText = result;
  }

  return (
    <div>
      <div id="qqq">0</div>
      <button onClick={onClickCountUp}>카운트 올리기</button>
      <button onClick={onClickCountDown}>카운트 내리기</button>
    </div>
  );
}

 

State 방식

import { useState } from "react";

export default function CounterLetDocumentPage() {
  const [count, setCount] = useState(0);

  function onClickCountUp() {
    setCount(count + 1);
  }

  function onClickCountDown() {
    setCount(count - 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={onClickCountUp}>카운트 올리기</button>
      <button onClick={onClickCountDown}>카운트 내리기</button>
    </div>
  );
}

 

참고사항

 

State 사용방법

최상단에 import {useState} form `react` 호출

 

useState를 사용하면 js에서 사용하는 변수를 html에서 사용가능하다.

js : const [count, setCount] = useState(0);

html : <div>{count}</div>

 

React에서는 버른 눌렀을때 동작을 onclick={onClickCountUp()} 가 아닌 onClick={ onClickCountUp } 로 사용한다.

 

 

실습

회원가입 페이지

import { allowedStatusCodes } from "next/dist/lib/load-custom-routes";
import { useState } from "react";

export default function SignUpStatePage() {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [emailerror, setEmailError] = useState("");

  function onChangeEmail(event) {
    setEmail(event.target.value);
  }

  function onChangePassword(event) {
    setPw(event.target.value);
  }

  function OnclickSignup(event) {
    // 1. 검증하기
    if (email.includes("@") === false) {
      //   document.getElementById("emailerror").innerText ="이메일이 올바르지 않습니다.";
      //   alert("이메일이 올바르지 않습니다.");
      setEmailError("이메일이 올바르지 않습니다.");
    } else {
      // 2. 백엔드에 정보 보내기

      // 3. 성공 알람
      alert("회원가입을 축하합니다!");
    }
  }

  return (
    <div>
      이메일: <input type="text" onChange={onChangeEmail}></input>
      {/* <div id="emailerror"></div> // 이전방식 */}
      <div>{emailerror}</div>
      비밀번호: <input type="password" onChange={onChangePassword}></input>
      <button onClick={OnclickSignup}>회원가입</button>
    </div>
  );
}

기본 화면

올바르지 않은 이메일 형식 입력

      이메일: <input type="text" onChange={onChangeEmail}></input>

 

onChange란?

입력 혹은 삭제할마다 변경되는 이벤트를 감지한다.