〰 state
React에선 변수 말고 state를 만들어서 데이터를 저장해서 쓸 수도 있습니다
import React, { useState } from 'react';
❗ 파일에 코드를 추가하여 사용할수있다
〰 useState
const [변수명,변수명변경] = useState('초기값');
❗ useState( 저장할 데이터 ) 이렇게 사용하시면 state에 데이터를 저장하실 수 있습니다.
useState()를 쓰면 데이터가 두개 남습니다. [a, b] 이렇게 생긴 이상한 array가 남습니다.
이걸 각각의 변수명으로 ES6 destructuring 문법을 이용해 저장해서 쓰시면 됩니다.
a라는 변수엔 실제 저장할 데이터가 들어있고
b라는 변수엔 저장할 데이터를 변경시킬 함수가 들어있습니다.
〰 데이터 저장해서 쓰는 이유
❗ 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만들고 싶으면
그럴 때 변수 말고 state에 저장해서 데이터바인딩 하셔야합니다.
리액트는 state가 수정이 일어나면
state가 포함된 HTML을 자동으로 재렌더링 해줍니다.
〰 state변경하는 법
<div onClick={실행할 함수}>❗ () => {} 이 코드는 function (){} 이것의 ES6 신버전 문법입니다.
자바스크립트 신문법에선 function 대신 => 이라는 키워드를 이용할 수 있습니다.<div onClick={ () => { 실행할 코드 } }>
❗ 원래 자바스크립트 내에서 array나 object 자료형은 = 등호로 복사하시면 각각 별개의 자료형이 생성되는게 아니라 값을 공유합니다.\
var data1 = [1,2,3]; var data2 = data1;state도 등호 = 를 이용해서 복사하면 문제가 일어나기 때문에 완전히 개별 복사본을 만들어주는 카피를 하셔야합니다. shallow/deep copy라고 한다
var 새로운어레이 = [...원본어레이]❗ ...이란
spread 연산자라고하는 ES6 신문법입니다. array나 object 자료형 왼쪽에 붙일 수 있으며
뜻은 별거없고 중괄호나 대괄호를 벗겨주세요~ 라는 뜻입니다.
...[1,2,3] 이렇게 쓰시면
그 자리에 1,2,3 이 남습니다. 걍 괄호 벗기기용 연산자입니다.
근데 두번째 용도도 있는데 array나 object 자료형을 shallow/deep copy할 때 많이 사용합니다.
