이전 시간에는 event와 그 event가 발생되었을 때, 작동하는 event handler에 대해서 배웠다.
event handler를 사용하여 함수를 실행시킬 수는 있지만, 여기에는 한가지 문제가 있다.
let title = 'title' ;
const clickHandler = () => {
title = 'Update!' ;
console.log(title) ;
}
return (
</div>
<h2>{title}</h2>
</div>
<button onClick={clickHandler}>Change Title</button>
);위와 같이 버튼이 클릭된다면, title이 "Update!"로 변경될까?
그에 대한 답은 "아니다"이다. 실제로는 전혀 변하지 않는다.
그렇다고 해서 함수가 실행되지 않은 것도 아니다.
console.log(title) ;
// 'Update!'심지어 title값을 console로 출력해봐도 바뀐 것을 확인할 수 있다.
왜 이런 문제가 발생할까?
React 동작 방식
React가 이런 방식으로 작동하지 않기 때문이다.
component는 일반적인 함수이며, 이 함수에서 특별한 점은 JSX 코드를 표준 JS로 변환한다는 것이다.
또한 함수인 component를 누군가가 호출해야만 한다.
React는 이러한 JSX코드들에 오류가 없는지 평가하고 DOM 명령어로 변역해서 화면에 보여지도록 렌더링한다.
component tree의 가장 위에 있는 App component는 처음에 지정하는 index.js 파일로부터 시작한다.
이 모든 과정이 사용자가 페이지를 방문했을 때 React에서 벌어지는 일이다.
이 과정이 React가 모든 component들을 지나 그 component 함수들을 실행하면서 화면에 무언가를 그리는 방법이다.
여기서 알 수 있는 한가지 문제점은 React는 절대 반복하지 않는다는 것이다.
React가 응용프로그램을 처음 렌더링 했을 때 그 과정들을 수행하고 이후에는 동작하지 않는다.
물론, 화면에 보이는 것을 업데이트하고 싶을 것이다. 예를 들어 버튼이 클릭되면 일부 텍스트들을 변경한다던가 하는 동작말이다.
그래서 React에게 어떤 값들이 변경되었으며 특정 component이 재평가 되어야한다고 말해야한다.
여기서 필요한 것이 State다.
정리하자면 :)
앞서서 설명했듯이 React에서는 값이 변경되었다 한들 component 자체를 재평가하지 않는다.
변수가 변경되거나 코드가 실행되어도 React는 다시 실행하지 않는다.
따라서 우리는 state라는 개념이 필요하다.
State란?
state는 React에만 특화된 기능은 아니지만 매우 중요한 개념이다.
state는 react library에서 불러올 수 있다.
useState
import { useState } from 'react' ;useState는 React에서 제공하는 함수인데, component 함수가 다시 호출되는 곳에서 변경된 값으로 반영하기 위해 state로 지정해주는 함수이다.
이 점이 일반적으로 사용하는 변수와의 다른 점이다.
또한, useState는 React hook이라고 불리는데 이 함수는 가장 중요한 hook 중 하나이다.
이처럼 use가 들어간 함수들은 hook이라고 불린다.
사용할 때에는 무조건 component 함수 안에서만 사용 가능하며 한가지 예외가 존재하기는 하지만 이후에 이야기하겠다.
변수는 변경사항으로 인해 component 함수가 다시 호출되도록 할 것이다.
const [title, setTitle] = useState('title') ;
const clickHandler = () => {
setTitle('Update!') ;
console.log(title) ;
}
return (
<div>
<h2>{title}</h2>
</div>
<button onClick={clickHandler}>Change Title</button>
);useState()는 구조분할(Destructuring)하는 함수로 두 가지 값을 가진다.
첫 번째 요소[title]는 관리되고 있는 상태값을 가리키고, 두 번째 요소[setTitle]는 새로운 값으로 지정하기 위해 업데이트하는 함수이다.
또한, 선언할 때 useState 함수 안에 들어가는 parameter는 초기값으로 지정된다.
왜 업데이트하는 함수를 받아올까?
React가 메모리 어딘가에서 title을 관리하는데, setTitle을 사용할 때 단지 새로운 값만 받아오는 것이 아니다.
그게 아니라면 아래처럼 사용했어도 됬을 것 같다.
title = 'Update!' ;상태가 변경되면, usetState로 상태를 초기화 했던 곳에서 다시 실행될 것이다.
이 setTitle을 호출하면 component 함수를 다시 실행한다.
setTitle은 title에 새로운 값을 할당하고 싶다고 React에게 말하면 해당 component 함수를 다시 실행하고 JSX 코드를 다시 평가한다.
추가로, console.log로 title을 출력해봐도 처음 값인 'title'가 나온다는 것을 알 수 있는데, 이는 함수를 호출했을 때 사실상 바로 값이 바뀌지 않았기 때문이다.
대신 이 title의 업데이트를 예약한다. 그래서 다음에 시도할 때에는 값이 업데이트 되어 있었다.
title과setTitle로 표현한 것은 이해를 돕기위해 일종의 변수 이름을 작성한 것으로 다른 이름으로 네이밍해도 무관하다.
