[React] state와 리렌더링

리렌더링 이해하기

const root = document.getElementById("root");
let counter = 0;
function countUp() {
	counter = counter + 1;
	render();
}
function render() {
    ReactDOM.render(<Container />, root);
}
function Container() {
    return (
		<div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
    );
}
render();

🚚 과정

1. render() 최초 호출
   • Container 컴포넌트가 root div에 담김
     
     
2. Container() 호출
   • Total Clicks: 0 으로 시작
   • button을 누르면 onClick 이벤트인 countUp()이 실행되므로, counter가 1씩 증가함
   • 사용자에게 업데이트된 내용을 보여주기 위해 다시 render()를 호출함(리렌더링)

💥 문제

위의 코드는 Container()를 계속해서 render()에 불러오고 있음. 리렌더링에 더 나은 방법은 없을까?

리액트의 리렌더링

• 사용자에게 업데이트된 데이터를 보여주기 위해서는 새로운 정보를 가지고 리렌더링해주어야 한다.
• React.js 어플 내에는 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 방법이 있다.

1. [state, f]

(1) state와 f의 의미

const root = document.getElementById("root");
function App() {
	const data = React.useState(); // [undefined, f]
    return (
		// 생략
    );
}
ReactDOM.render(<App />, root);

React.useState() 를 통해 데이터(계속해서 변하는 값)와 데이터를 바꿀때 사용하는 함수, 이 두가지가 배열의 형태로 출력는 것을 알 수 있다.

(2) 초기값 설정

React.useState(0)과 같이 초기값을 0으로 주게 되면, [0, f]이 출력된다.

(3) state와 f의 활용방법

배열의 형태로 저장되어 있는 데이터와 함수를 효율적으로 사용할 수 있는 방법

const food = ['tomato', 'poatato'];
// 원래 방식으로 각 요소 꺼내오기
const myFavFood = food[0];
const mySecondFavFood = food[1];
// 더 효율적인 방법
const [myFavFood, mySecondFavFood] = food;

🌚 원래 방식 | 인덱스 번호별로 변수를 설정해 각각 변수 선언을 해주어야함
✨ 효율적인 방식 | 배열 안에 변수를 바로 넣어줌

// 원래 방식
const data = React.useState();
const counter = data[0];
const modifier = data[1];

// 효율적인 방식
const [counter, modifier] = React.useState();

✨ 위의 예제 내용을 적용시켜 배열 안의 요소를 활용할 수 있게 되었다.

2. modifier

(1) 사용하는 이유

function App() {
	let [counter, modifier] = React.useState(0);
    const onClick = () => {
        modifier(1002435235);
    };
    return (
		// 생략
    );
}

🎢 원래 해야했던 작업
counter(state)를 업데이트하고자 하는 값으로 업데이트시킨 뒤, 리렌더링시켜주면 값이 바뀐다.

🎉 modifier 등장
위와 같은 과정을 모두 modifier함수가 해준다. React에서 리렌더링을 자동으로 처리해주는 것이다!

(2) 이름

let [counter, setCounter] = React.useState(0);
const onClick = () => {
	setCounter(1002435235);
};

🎫 set + state 이름
보통 modifier의 이름은 set 뒤에 앞의 state의 이름을 붙여주는 방식으로 짓는다. state가 counter라면 modifier는 setCounter로!

3. state 바꾸는 2가지 방법

1. setCounter(1234)처럼 새 값을 처음부터 지정하기
2. 현재 state를 바탕으로 다음 state 계산하기

const onClick = () => {
   // setCounter(counter + 1);
   setCounter((current) => current + 1)
};

💯 현재 state를 기반으로 계산하고 싶을 땐 함수사용

• setCounter 함수의 첫번째 argument는 현재값
• setCounter함수의 return값이 새로운 state가 됨
• 함수를 사용하면 예상치 못한 업데이트가 생겼을 때의 혼동을 막아줌

4. 마무리

function App() {
	let [counter, setCounter] = React.useState(0);
    const onClick = () => {
      setCounter(counter + 1);
    };
	// 사용자가 보게될 컴포넌트
    return (
        <div>
          <h3>Total Clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
    );
}

⭐ React.js가 제공하는 가장 중점적인 부분!
state가 바뀔 때마다 리렌더링이 일어나 UI를 refresh해준다!

📜 참고

React.js로 영화 웹 서비스 만들기