컴포넌트 업데이트? 리렌더링?

컴포넌트 리렌더링이라 함은 함수형 컴포넌트 기준

JSX문법으로 작성된 view를 리턴하는 함수가 다시 수행되는 거라고 생각하면 된다.

그렇다면 컴포넌트 업데이트는 뭘까? 결국 같은 말 아닌가?

업데이트가 결국 리렌더링으로 연결되기 때문에 그냥 비슷한 의미로 해석하고 있었으나

가끔 이를 혼용해서 쓰는 글들이 보이기 시작하니 좀 헷갈려서 정리해놓는다.

​

일단 업데이트가 더 큰 의미로 말그대로 컴포넌트가 업데이트되는 것을 말하고

그 과정에 리렌더링이 발생한다. 즉, 순서상 업데이트->리렌더링 이 된다.

​

컴포넌트가 업데이트 되는 상황은 아래와 같다.

​

1. props 가 변경되었을 때

2. state 가 변경되었을 때

3. 부모 컴포넌트가 리렌더링 될 때

4. forceUpdate 함수가 실행될 때

6. useSelector 로 구독하는 값이 변경되었을 때

​

위 상황에서 업데이트가 시도되고 실제 리렌더링으로 이어질지는 선택할 수 있는 것이다.

​

예를 들어 아래와 같이 useEffect 를 정의했다고 가정해보자.

const input = useSelector(state => state.todos.input);

const dispatch = useDispatch();

useEffect(() => {
	console.log('111');
	return () => {
	  console.log('222');
	}
}
, [dispatch]);

 

useEffect 의 경우 해당 컴포넌트가 렌더링 될때 수행할 작업을 정의할 수 있다.

첫번째 인자에 렌더링시 수행될 작업을 함수로 정의하고

return 으로 업데이트 또는 언마운트시 수행될 작업을 함수로 정의하고

두번째 인자로 어떤 값이 변경되었을때 첫번째 함수를 수행할지 배열로 정의한다.

참고로 첫번째 인자로 정의하는 함수의 return 은 선택적으로 정의할 수 있고

두번째 인자를 [] 로 지정하면 마운트(초기렌더링) 시에만 첫번째 함수가 수행된다.

​

위 상황에서는 초기 렌더링시 콘솔에는 222 와 111 이 순차적으로 출력되는 것을 볼 수 있는데

이를 통해 업데이트->렌더링 순으로 작업이 진행된다는 것을 알 수 있다.

​

그리고 input 값을 변경했을 경우

두번째 인자에 dispatch만 지정되어 있기 때문에

콘솔에는 111도 222도 출력되지 않는 것을 볼 수 있다.