state, useState

리액트에서 데이터를 넣는 방법은 2가지가 있다.
1. 변수에 넣는다.
2. state에 넣는다.

리액트에서는 1번보다 2번의 경우를 많이 사용한다.

<state를 사용하는 방법>
내장함수 useState를 import 한다.

import React, { useState } from 'react';

변수 대신 굳이 state를 쓰는 이유?

state의 장점이 있기 때문!
web이 App처럼 동작하게 할 수 있다.
무언가 수정할 경우 새로고침 없이도 HTML이 자동으로 재랜더링이 된다. (화면이 부드럽게 변경된다.
그냥 변수로 만들 경우 새로고침이 되어야 재랜더링이 된다.
그래서 자주 바뀌는, 중요한 데이터는 변수보다는, state로 저장해서 쓰는 것이 좋다.

예시

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집','판교 원룸']); 

        <h4>{ 글제목[0] }</h4>  // 남자 코트 추천

변수나 state를 사용할 때에는 { } 로 감싸주어야 데이터바인딩이 된다.

버튼을 누르면 글제목 state의 0번째 데이터를 '여자 코트 추천'으로 바꾸기

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집','판교 원룸']);

    function 코트변경(){                                                   
    	var array = [...글제목];
    	array[0] = '여자 코트 추천';
    	글제목변경(array);
	}
    <button onClick={코트변경}>코트변경</button>

버튼을 클릭하면 코트변경 함수가 실행된다.

array 변수에 값 공유가 아닌 깊은 복사를 해주기 위해 [...]을 통해 넣어준다.
복사가 된 값이 들어간 array의 0번째 부분만 '여자 코트 추천'으로 수정해준다.
변경함수인 글제목변경을 통해 array를 글제목 State에 넣어준다.