[리액트] State(2)

지난 시간 복습

React.js가 data를 담는 것과 업데이트하는 걸 어떻게 도와주는 지 배웠다.
React.useState는 배열 하나를 주는데 배열의 첫번째 요소는 우리가 담으려는 data값이고 두번째 요소는 이 data값을 바꿀 때 사용할 modifier이다.

문제상황

값을 바꿨는데 컴포넌트는 리렌더링되지 않는 상황

해결방법
해당 함수에 ReactDOM.render(, root);를 한 번더 호출해줬다.
하지만 이 방법도 문제가 있다. 여러 곳에서 해당 함수를 호출하면 코드도 복잡해지고
불편하다는 점이다.

리렌더링, 어떻게 할까

• 새로운 값을 가지고 렌더링하기

const [num, setNum] = React.useState(0)

에서 num을 업데이트 하는데 setNum 함수를 사용해보자. setNum 함수는 값을 전달받고 그 값을 업데이트하며 리렌더링을 일으킨다.

const onClick = () => {
	setNum(999);
};

여기서는 setNum 함수를 가지고 있고 이걸로 값을 바꿔준다.
(useState 사용 시 값과 그 값을 바꿔줄 함수가 반환된다. 해당 함수를 이용해 데이터를 바꿨을 때 값이 바뀌고 컴포넌트도 동시에 리렌더링된다.)

정리

1. 변수를 컴포넌트에 연결한다.
2. 변수에 데이터를 담은 다음, 해당 변수에 담긴 값을 변경한다.
3. React의 기능으로 자동 리렌더링이 가능하다.

• React.js가 제공하는 가장 중점적인 부분
  : 데이터가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh한다.

• 출처 : 노마드 코더, ReactJS로 영화 웹 서비스 만들기