State

State

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

UI를 바꾸기 위해서 사용.

리액트에서 변경되야 하는 값은 반드시 State로 선언해야 함.

 

App.jsx

import {useState} from 'react';
import "./App.css";

function App() {

  const [name, setName] = useState('김할아버지');

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

export default App;

 

 

---

App.jsx

import {useState} from 'react';
import "./App.css";

function App() {

  const [fruit, setFruit] = useState("");

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

export default App;

event.target.value

 

---

App.jsx

import {useState} from 'react';
import "./App.css";

function App() {

  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;

input값과 State값 동기화

---

실습

아이디 비번 입력받아 state로 관리해주고 변경이 일어날 때마다 setState로 동기화

alert를 띄우고 아이디와 비밀번호 영역을 초기화 해주세요!

비밀번호는 보이면 안됩니다.

 

App.jsx

import {useState} from 'react';
import "./App.css";

function App() {

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

  return (
    <div>
      아이디 : <input
        value={id}
        onChange={function(event) {
          // console.log('event', event.target.value);
          setId(event.target.value);
        }} 
      />
      <br />
      비밀번호 : <input
        type='password'
        value={pw}
        onChange={function(event) {
          // console.log('event', event.target.value);
          setPw(event.target.value);
        }} 
      />
      <br />
      <button onClick={function() {
        alert(`고객님이 입력하신 아이디는 '${id} 이며, 비밀번호는 '${pw}'입니다.`)
        setId("")
        setPw("")
      }}>로그인</button>
      <br />
      {id}
      <br />
      {pw}
    </div>
  );
}

export default App;

---

불변성 & 순수함수

컴포넌트의 생명주기

render..

 

불변성 : 메모리에 있는 값을 변경할 수 없는 것.

 

원시데이터 

원시데이터 : 숫자, 문자, 불리언 ... → 불변성이 있다.

원시데이터가 아닌 것들 : 배열, 객체, 함수 ... → 불변성이 없다.

 

객체는 불변성이 없습니다.

 

Component를 바뀌기 위해서 Rendering을 한다.

Rendering 기준 : State 변할 때!