State

데이터를 저장하는 방법은 두 가지가 있다.

1. 변수에 넣거나

2. state에 넣거나

리액트의 저장공간인 state를 만드는 방법은 먼저 상단의 import React from 'react';에 useState를 추가해준다.

import React, { useState } from 'react';

이런 식으로 쓴 후, useState('데이터'); 이렇게 사용한다. 이 함수를 실행하면 여기에 어레이 [a, b]가 남고

여기서, a는 데이터가 그대로 들어가고, b는 이 데이터를 수정하기 위한 함수를 생성해준다. 

그래서, 총 2가지 데이터가 남기 때문에, 신문법을 이용해 각각 a,b에 

let [a,b] = useState('남자 코트 추천');//ES6 destructuring 신문법
//destructuring이란 var [a,b] = [10,100] 이런 식으로 a에 10을 b에 100을 넣어주세요 하는
//문법이며 어레이나 오브젝트의 자료를 변수로 넣어주는 문법이다.

이렇게 담아줄 수 있다. 

구체적으로 써보면, 블로그를 만드는 글로 예를 들면,

let [글제목,글제목변경] = useState('남자 코트 추천');

이렇게 보통 관습적으로 사용한다.

 

즉, state는 변수 대신 쓰는 데이터 저장공간이며, useState를 이용해 만들어야 한다. 그리고, 문자 숫자 array object다 저장가능하다. 변수 대신 state를 쓰는 가장 큰 이유는 state는 변경되면 HTML이 자동으로 재렌더링되어 즉각적으로 바뀌기 때문이다. 따라서 자주 바뀌는 중요한 데이터는 state를 사용한다.

 

 

예외로, 리액트에서 코딩하다보면 터미널 창에

이런 warnings이 뜰 때가 있는데, eslint라고 해서 문법사항을 바로잡는 것인데, 거슬리면 상단에

/*eslint-disable*/  이렇게 쓰면 더이상 뜨지 않는다.