📌 setState를 이용하여 counter 구현해보기
지난 시간에 React 컴포넌트인 Container를 ReactDOM에게 root DOM node에 렌더링 하도록 요청하는 함수인 render 함수를 따로 만들어 페이지가 처음 로드될 때와 버튼 클릭 시 작동하게 하여 업데이트된 count가 화면에 렌더링되도록 하였다.
그런데 문제는 데이터가 바뀔 때마다 render 함수를 호출해야 한다는 것이다.
이것이 반복되는 것보다 좀 더 좋은 리렌더링 방식이 존재한다.
React.js 어플 내에 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 방법이다.
1. 초기 세팅
우선 컴포넌트명 Container를 App으로 이름을 변경하고 countUp 함수와 render 함수를 모두 삭제하고 시작한다. (ReactDOM.render는 다시 맨 아래줄에 작성해준다.)
또, 이벤트 리스너인 onClick도 삭제하고 counter 변수도 삭제해 준다.
2. setState 이용하기
⭐ setState
React에서 데이터를 담을 때는 다음과 같이 컴포넌트에서 return 전에 setState를 이용하여 변수를 만들어 주면 된다.
. . . . .
const App = () => {
const data = React.useState(); // 주목!
console.log(data); // 주목! 결과: [undefined, f]
return (
<div>
<h3>Total clicks: {counter}</h3>
<button>Click me</button>
</div>
);
};
. . . . .
- 위에서 console.log의 결과로 배열을 받는데 그 안의 요소 중 undefined는 데이터에 해당하고 함수(f)는 데이터를 바꿀 때 사용하는 함수를 의미한다. 따라서 useState는 초깃값을 인자로 받을 수 있는 함수이다.
- 즉, 앞선 시간의 코드에서 변수의 초깃값이였던 'let counter = 0'은 React.useState에서의 데이터 자리에 0으로 넣을 수 있고, counter를 변화시키는 함수였던 countUp은 함수 자리에 넣을 수 있다.
그런데 변수 data의 데이터 부분에 접근하려면 data[0] 이렇게 인덱싱 해주어야 하는데 이는 좀 불편하다.
따라서 JS 문법에서 다음과 같이 '구조 분해 할당'을 적용하여 인덱싱을 하지 않고도 작동할 수 있도록 할 것이다.
const [counter, modifier] = React.useState(0);
- counter(데이터에 해당) modifier(counter를 제어하는 함수) 변수를 생성해 React.useState(0)의 결과로 나오는 배열의 각 요소를 변수에 할당해 주었다.
댓글