리액트에서 리렌더링을 어떻게 하는지, render() 함수로 처리하지 않고 자동으로 렌더링하는 방법을 알아보자.
리액트의 useState()는 계속해서 업데이트할 데이터와 그 값을 바꾸는 함수를 배열로 갖는다.
즉, React.useState(0)은 자바스크립트에서 다음과 같은 역할을 한다. 변수 counter에 0으로 값을 초기화한다. countUp 함수는 해당 counter 변수를 증가시킬 것이다.
let counter = 0;
function countUp() {}
useState()의 배열을 자바스크립트의 비구조화할당 문법을 통해 새로운 변수로 할당해보자.
useState는 [0]인덱스의 값에 데이터를 저장하고 [1] 인덱스에 데이터를 업데이트하는 함수를 갖고 있다. 어떤 값을 부여하던, setData()함수는 그 값으로 업데이트를 하고 브라우저의 리렌더링을 일으킨다.
- set함수명 짓기 : [1] 인덱스에 오는 함수는 [0] 인덱스에 지정한 데이터명에 "set-" 접두사를 붙인다.
// 배열 비구조화 할당 문법
const [data, setData] = React.useState(0);
리액트의 useState()는 리렌더링하는 기능을 기본으로 갖고있다. 그래서 state함수를 사용할 때 자동으로 리액트 내부에서 ReactDOM.render(); 가 일어난다. 컴포넌트들도 동시에 리렌더링되는 것이다.
여기서 주의점은 data의 값을 업데이트하기 위해 직접 수정하면 안되는 것이다. data = "1" 이런식으로하면 const로 선언한 "상수"의 의미가 없기 때문이다. data의 값은 state이기 때문에 무조건 setData()함수를 통해 값을 변경할 수 있다.