[React] setState 2

1. 리렌더링

지난 글에 이어 modifier가 필요한 이유에 대해 알아보자.
먼저, onClick라는 함수를 하나 만들 것이다.

const root = document.getElementById("root");
function App() {
	let [counter, modifier] = React.useState(0);
    const onClick = () => {
    	counter = counter + 1;
        console.log(counter);
    }
    return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);

이제 이걸 매번 값을 받아서 리렌더링 해주어야 하는데 이전에도 경험했다시피 값을 바꿨는데 컴포넌트는 리렌더링 되지 않은 상황이 있었다. 그 때는 ReactDOM.render(<App />, root); 이 함수를 한 번 더 호출해주었다. 하지만 조금 귀찮은 일ㅜㅠ
예를 들어, 파일이 많거나 폼, 로그인, 알림, 비디오 플레이어 등을 다룰 때 ReactDOM.render(<App />, root); 이 함수를 계속 호출해주는 건 힘들다.

그럴라면 계속 getElementById, ReactDOM을 import하고, 최상위 컴포넌트를 import해야 한다. 매우 번거롭다.

이전 글에서도 해보았기 때문에 이해가 안된다면 이전 글로 가보자.

2. modifier

해결하기 위해서는 react.js가 도와줄건데 modifier 함수가 존재하는 이유가 바로 이것이다.

const root = document.getElementById("root");
function App() {
	let [counter, modifier] = React.useState(0);
    const onClick = () => {
    	counter = counter + 1;
        console.log(counter);
    }
    return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);

위 코드에서 수정을 좀 해주자. 수정된 코드는 밑에 코드이다.

const root = document.getElementById("root");
function App() {
	const [counter, modifier] = React.useState(0);
    const onClick = () => {
    	modifier();
    }
    return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);

counter를 업데이트 하는데 modifier 함수를 사용할 것이다.
modifier함수는 값을 하나 받는다. 어떤 값을 부여하던 modifier 함수는 그 값으로 업데이트하고 리렌더링을 일으킬 것이다.

modifier 실행하기

아래 두 개의 코드는 같다.

modifier(9999);

modifier(9999);
counter = 9999
ReactDOM.render(<App />, root);

modifier 함수 내에서 위와 같은 실행이 일어나고 있는데 생략된 것이다.

3. 정리하기

이전에는 우리가 직접 리렌더링 해주었다.(직접 호출함) 하지만 이제 const [counter, modifier] = React.useState(0); 이 한 줄의 코드로 React.useState 함수는 counter 같은 데이터를 숫자형 데이터로 전달할 것이고, 그 데이터 값을 바꿀 함수도(modifier) 함께 줄 것이다. 그리고 그 함수를 이용해서 데이터를 바꿨을 때, 데이터 값이 바뀌고

return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );

위와 같은 컴포넌트도 동시에 리렌더링, 업데이트 될 것이다.

여기서 잠깐!
modifier는 modifier로 쓰는 것이 아니라 set 뒤에 데이터 이름을 붙여준다.

위의 코드에서는 setCounter이다.

const root = document.getElementById("root");
function App() {
	const [counter, setCounter] = React.useState(0);
    const onClick = () => {
    	setCounter(counter + 1);
    }
    return (
    	<div>
        	<h3>Total clicks: 0</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}
ReactDOM.render(<App />, root);