리액트의 렌더링

React에서는 함수 컴포넌트의 rendering이란 state와 props를 기반으로 UI 요소를 그리는 행위다.

Side Effect

다른 곳에서 Side Effect는 부작용이란 뜻으로 부정적인 의미로 사용되지만 함수컴포넌트에서는 부정적인 의미가 아니라 함수가 결과값 이외에 다른 상태를 변경시킬 때를 말한다.

let number = 1;

const setNumber = (num) => {
	const result = number + num;
	return result;
}
// 전역 변수 number가 setNumber의 함수를 변경시켰다.

setNumber(1)

let number = 1;

const setNumber = (num) => {
	console.log(num);
	const result = num;
	return result;
}
// 함수 안에 console.log()함수가 있다.

setNumber(1)

이런 행위들의 해결방법으로 리액트에서는 useEffect를 사용한다.

useEffect(() => {
    console.log('effect');
  });

console.log('render');

이 코드를 작성하고 개발자 도구에서 확인하면 어떤 순서대로 출력될까?

당연히 effect가 먼저 출력될 것 처럼 보이지만 실상은 반대로 동작한다. ‘render’ 먼저 출력되고 effect가 출력된다. ⇒ 1번 방법이 해결됨

useEffect(() => {
      console.log('effect');
    };
  }, [의존성배열(state)]);

2번을 해결하려면 useEffect의 두번째 인자로 [배열]안에 state를 작성한다 그러면 state의 값이 변경될 때 마다 sideEffect가 실행되고 그 외에는 실행되지 않는다.