[리액트 입문주차] 1-12~13 State

1-12~13 State(1), (2)

1. State란?

- 컴포넌트 내부에서 바뀔 수 있는 값

- 변경될 수 있는 값은 state로 선언

- UI로의 반영을 위해 필요! - 랜더링을 다시 하기 위해서

2. useState 훅

- useState("초기값")의 반환값은, 초깃값을 가지는 변수와 변수를 다룰 수 있는 메서드를 가진 배열을 리턴해 줌

=> const [state, setState] = useState("초기값")

- hook : 특정한 기능을 수행하는 함수!

3. State 변경하기

- setValue(바꾸고 싶은 값)

예제 1 - props로 변경하기

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
					props.setName("박할아"); // 드디어 받은 setName을 실행합니다.
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 받아서 다시 주고
  );
}

function GrandFather() {
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />; // 주고
}

function App() {
  return <GrandFather />;
}

export default App;

예제 2 -  useState + onClick Event

- 버튼을 누를 때 이름이 변경되는 예제

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("길동이");

  function onClickHandler() {
    setName("누렁이");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

예제 3 - useState + onChange Event

- input 값이 onChange될 때, 이벤트 핸들러로 이벤트의 event.target.value 값을 저장하여 setValue로 값을 바꿔주고, 그 바뀐 값을 input의 value로 넣어주는 예제

- 즉 input값이 바뀔때 마다 바뀌는 값이 input 입력칸 안에서 함께 변경됨

- input과 state 연결 

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

  console.log(value); // value가 어떻게 변하는지 한번 콘솔로 볼까요?

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
      <br/>
      {value}
    </div>
  );
};

export default App;

과제 - 간단한 로그인 구현

- input으로 아이디, 비밀번호를 입력받은 후 버튼을 누르면 alert 으로 입력받은 값을 띄워준 후 초기화

import React, { useState } from "react";

const App = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  const onIdChangeHandler = (event) => {
    const idInput = event.target.value;
    setId(idInput);
  };

  const onPwChangeHandler = (event) => {
    const pwInput = event.target.value;
    setPw(pwInput);
  };

  function login() {
    alert(`고객님이 입력하신 아이디는 ${id} 이며, 비밀번호는 ${pw}입니다.`);
    setId("");
    setPw("");
  }

  return (
    <div>
      <div>
        아이디 :
        <input type="text" onChange={onIdChangeHandler} value={id} />
      </div>
      <div>
        비밀번호 :
        <input type="password" onChange={onPwChangeHandler} value={pw} />
      </div>
      <button onClick={login}>로그인</button>
    </div>
  );
};

export default App;