[React] State

State란?

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

function App() {

  let [a, aChange] = useState('스테이트 예제1');
  let [b, bChange] = useState(['스테이트 arr 1 ','스테이트 arr 2']);



  return (
    <div className="App">
      <div>
        <h1>{ a }</h1>
        <h2>{ b }</h2>
        <h3>{ b[0] }</h3>
      </div>
    </div>
  );
}

export default App;

• 먼저 'react'에서 React와 { useState }를 import해줘야한다.
• useState를 사용해서 선언할때는 보통 destructing을 적용한 변수를 생각하면된다
  • var [a, b] = [1, 2]; 일때 
  • a==1, b==2
• let [a , aChange] = useState('스테이트 예제');
  
  • 기본 선언은 이렇다. 여기서 a='스테이트 예제'; 와 같다
• let [b, bChange] = useState(['스테이트 arr 1 ','스테이트 arr 2']);
  
  • 변수 b에 배열을 넣을 수도 있고 배열값을 자유롭게 표시할 수도 있다.

위 코드와 같이 입력하면 아래와 같은 결과가 나온다.

 

Chage함수

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
  let [num, numChange] = useState(0);


  return (
    <div className="App">
      <div>
        <h1>{ a[0] } <span onClick={ () => { numChange(num+1) } }>❤</span> { num } </h1>
        <h1>{ a[1] }</h1>
        <h1>{ a[2] }</h1>        
      </div>
    </div>
  );
}

export default App;

 

• 하트를 누르면 num이 1씩 증가하도록 하는 함수
• addEventListener같은 기능. onClick={ }이 안에 생성한 함수명을 적어주거나 새로운 함수를 생성해서 입력하면된다.
• state의 두번째 변수 기능은 num을 바꾸는 것
  
  • numChange( ) 괄호 안에 적어줄 내용은 num의 내용이다.
  • numChange함수 자체가 function numChange(a){ num=a; } 이런 느낌
  • 이러한 변경기능과 state자체의 재렌더링 기능이 합쳐져서 하트 누르면 바로 +1된 num이 표시된다.

 

배열형태의 State를 수정하려면

1. 복사본생성 - 이때, deep copy로 해야 기존 배열과 값 공유가 되지 않는다

2. 복사본변경 

3. change함수(복사본)

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
  let [num, numChange] = useState(0);

  function changeA0(){
    var tmp = [...a];
    tmp[0] = '변 경 한 것';
    aChange(tmp);
  }

  return (
    <div className="App">
      <div>
        <h1 onClick={ changeA0 }>{ a[0] }</h1>
        <h1>{ a[1] }</h1>
        <h1>{ a[2] }</h1>        
      </div>
    </div>
  );
}

export default App;

 

결과 - > state1을 클릭하면 변경된다.