[5주차] 리액트입문: State

State

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다

 

State 를 쓰는 목적은 무엇인가? 

왜 리액트에서는 변수를 사용하지 않고?

UI를 바꾸기 위해서 = 랜더링을 다시 하려고

 

State 만들기

useState();

useState는 initial value를 인자값으로 받아 초기값을 가지고 있는 변수를 반환함 [state, setState]

 

구조분해할당을 통해 식을 완성하면

const [state, setState] = useState('initial value');

const { state의 이름, set+state이름 } = useState(초기값);

  const [count, setCount] = useState(0);
  const [todoList, setTodoList] = useState([]);

 

---

Hook

기능을 하는 함수 예) useState(0) 또는 useSTate([])

---

State 변경하기

1. 클릭 -> 콘텐츠가 변하는 것

 

클릭 버튼을 누르면, 이름의 초기값(1월의 할아버지)에서 다른 값으로 변하기

// src/App.js

import React, { useState } from "react";


function App() {
  //이름값은 변경되야 하기 때문에 state로 관리
  const [name, setName] = useState('1월의할아버지')

  return (
  <div>
    {name}
    <br />  
    <button onClick={function(){
      setName('2월의할아버지');
    }}>클릭</button>
  </div>);
}

export default App;

 

 

 

2. input 에 입력값을 넣었을 때 -> 콘텐츠가 변하는 것

 

value 값 => input에 입력되는 값

onChange => input 공간에서 입력이 일어날 때 어떤 변화가 일어날 것인가

*onChange에는 항상 인자값으로 event가 들어온다

 

// src/App.js

import React, { useState } from "react";


function App() {
  //이름값은 변경되야 하기 때문에 state로 관리
  const [fruit, setFruit] = useState('');

  return (
    <div>
      과일 : {" "}
      <input
        value={fruit}
        onChange={function(event){
          // console.log("event", event.target.value);
          setFruit(event.target.value);
        }}/>
        <br />
        {fruit}
    </div>
  );
}

export default App;

꼭 이해하기! 

타이핑하는 순간 event 호출이 되면서 event의 value 값인 event.target.value 값이 setFruit으로 들어가서 변하는 값으로 fruit 자리에 세팅이 된다.  그러면 그 세팅된 값이 input 의 value 값으로 재할당이 된다. 

 

 

---

실습

*Task

아이디에 값을 입력하고, 비밀번호에 값을 입력하고 '로그인'버튼을 누르면 alert로 아래처럼 고객이 입력한 값을 알려준다.

"고객님이 입력하신 아이디는 '입력아이디'이며, 비밀번호는 '입력비밀번호'입니다."

 

*조건사항

id 필드와 비밀번호 필드의 값을 state로 관리하고, 변경이 일어날 때마다 setState를 하여 동기화 시키기

alert를 띄우고 나서는 아이디/비밀번호 필드를 초기화 시키기(빈값)

비밀번호는 값이 보이면 안됨

 

// src/App.js

import React, { useState } from "react";


function App() {

  const [id, setId] = useState('');
  const [pw, setPw] = useState('');
  //아이디 필드가 변경될 경우
  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  }
  //비밀번호 필드가 변경될 경우
  const onPwChangeHandler = (event) => {
    setPw(event.target.value);
  }

  console.log('id', id);
  console.log('pw', pw);

  return(
    <div>
      <div>
        아이디 : <input type="text" value={id} onChange={onIdChangeHandler}/>
      </div>
      <div>
        비밀번호 : <input type="password" value={pw} onChange={onPwChangeHandler}/>
      </div>
      <button onClick={function(){
        alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${pw}입니다.` );
        // 아이디와 비밀번호 인풋박스 초기화
        setId('');
        setPw('');
        }}>로그인
      </button>
    </div>
  );
}

export default App;