[React] useState로 데이터바인딩하기

1. 데이터바인딩할때 state에 보관하거나, 변수에 보관하는 방법이 있다

App.js 맨 위에

 import React, { useState } from 'react'; 

를 추가한다.

리액트에 있는 내장함수를 쓰겠습니다. 라는 뜻이다!

useState함수를 사용할 수 있다.

 

2. 리액트의 데이터 저장공간 state 만드는 법

useState('운동화 추천'); 실행하면 array가 나오는데, array 안에는 a, b가 있다.

[a, b] 

a: 진짜 데이터

b: 운동화 추천 state 정정해주는 함수

[state데이터, state데이터 변경함수]

 let [글제목, 글제목변경] = useState('운동화 추천'); 

 

정리

state는

1. 변수 대신 쓰는 데이터 저장공간이며,

2. useState()를 이용해 만들어야한다.

3. 문자, 숫자, array, object 다 저장가능하다.

 

State의 장점?

웹이 App처럼 동작하게 만들고 싶어서이다.

 

글제목이 바뀔 수도 있고, 제목을 정렬할수도 있고, 데이터가 바뀔 수 있는데, 

state는 변경되면, 새로고침없이도 !!! HTML이 자동으로 재렌더링이 된다. (스무스하게 변경됨)

post와 같이 변수로 데이터를 저장하면, 자동으로 재렌더링이 되지 않는다.

 

자주 바뀌는 중요한 데이터는 변수 말고 state로 저장하면 된다.

 

참고

터미널에 뜨는 warning eslint 보기 싫으면, 

/* eslint-disable */ 을 맨 위에 추가해주면 된다.