React State란, 데이터바인딩한 변수 값 변경하기

https://logical02.tistory.com/27

React 기본 사용법 JSX 문법 기초

 

저번에 html 안에 변수를 넣는 데이터바인딩을 알아보았다

그런데 데이터바인딩한 변수를 바꾸면 어떻게 될까?

일반적으로 let이나 var로 선언한 변수는 변수 값을 바꿔도 html 안에 데이터바인딩했던 글자가 바뀌지 않는다.

그 이유는 렌더링이 이미 끝나고 변수가 바뀔 때 재랜더링이 되지 않기 때문.

 

따라서 React 에서는 페이지 재랜더링을 해주어 정보가 변할 때 표시되는 html도 바뀌게 하기 위해 State라는 문법을 이용한다.

 

let [a, b] = useState('변수안에데이터');

여기서 let 뒤에 괄호는 Destructuring 문법인데

 

let a = 100;
let b = 200;

원래 이런 문법을

let [a, b] = [100, 200];

이렇게 썼다고 보면 된다

 

여튼 다시 돌아와서

 

저렇게 State를 선언해주면 useState 함수가 ['변수안에데이터', State변경함수]를 리턴한다.

즉 a 안에 '변수안에데이터'가 들어가고 b 안에 어떠한 함수(State변경함수)가 들어간다.

이 때 State변경함수는 뭐냐면 변수 안에 있는 데이터를 변경해줄 때 사용하는 함수이다.

 

그냥 a = '새로운데이터' 이렇게 변경해주면 되는거 아닌가 싶겠지만 그러면 HTML 재랜더링이 되지 않는다

그래서 State변경함수인 b를 사용해서 State를 변경한다.

b('새로운데이터');

이렇게 하면 이 함수를 쓰는 시점에 HTML이 재랜더링이 되면서 HTML 안에 데이터바인딩했던 변수의 값이 바뀐 값으로 표시된다.

 

이것을 활용해서 아래처럼 누르면 숫자가 1씩 증가하는 버튼을 만들 수 있다.

 

function App(){
	let [num, changeNum] = useState(0);
    return (
    	<h4>{num}</h4>
        <button onClick={ ()=>{ changeNum(num + 1) } }>버튼</button>
}

이 때 button에서 onClick 안에는 중괄호 안에 함수를 하나만 써야 하기 때문에 JavaScript ES6 신문법인 ()=>{}를 사용하였다.