reactjs의 꽃, state를 알아보자

1. 개요

• state가 뭐냐면 변수랑 거의 똑같음
• 변수는 수정되어도 html에 바로바로 반영이 안됨(재랜더링 안됨)
• state는 수정되면 html에 바로바로 반영 됨(재랜더링 됨)
• 하나의 페이지에서 모든 것을 보여주는게 리액트의 특징임
• 그래서 페이지 재랜더링 없이도 현재 페이지에서 보여주는 값을 바꿀 수 있어야 하기 때문에 state를 씀

2. state 사용 방법

import {useState} from 'react';

• 위 코드를 상단에 적어줘야 함

let [a,b] = useState(데이터);

• 위 코드를 function 안에다가 넣어주면 됨
• 그럼 이제 state를 쓸 수 있게 되는 것.
• a는 변수명처럼 쓰면 되고, b는 state 변경을 도와주는 함수
• 데이터는 어레이([’ㄱ’, ‘ㄴ’, ‘ㄷ’]) 형태로 저장해도 됨
• 꺼내쓸때는 a[0] 형태로 쓰면 되고

3. state 변경 방법

• state 변경 함수를 써야 실시간 state 변경 사항이 적용 됨

let [따봉, 따봉변경] = useState(0);

function 좋아요(){
    // state 변경 함수를 사용해야 state값 실시간 변경 가능
    // 변경함수(변경값); 형태로 사용
    따봉변경(따봉++);
}

• 따봉변경이라는 state변경함수를 이용해서 따봉이라는 state의 값을 변경시켜주는거임

<h4>{글제목[0]}<span onClick={좋아요}>👍</span>{따봉}</h4>

• 좋아요 버튼 누르면 따봉이라는 state가 1씩 증가됨