순수함수는 계산만 수행하고 그 이상은 수행하지 않는다. 코드를 더 쉽게 이해하고 디버그할 수 있으며, React가 컴포넌트와 훅을 자동으로 올바르게 최적화 할 수 있다.

음.. 그렇다면 왜 순수함수가 중요할까요?

React를 만드는 핵심 개념중 하나는 순수성이다. (컴포넌트를 만들 때 순수함수로 만들어야 합니다.)

• 먹등성 : 컴포넌트의 입력으로 props, state, context와 룩의 input에 대한 arguents 등이 들어올 때마다, 같은 값이 들어오면 같은 결과값을 얻어야 합니다.
• 렌더링에 side-effects가 없어야 한다 : 부작용이 있는 코드는 렌더링과 별도로 실행되어야 한다.
  • 사용자와 ui가 상효작용하는 이밴트 핸들러 또는 렌더링 후에 실행되는 이펙트 등이 포함된다.
• 비-로컬 값을 변경하지 마삼 : 컴포넌트와 훅은 로컬로 생성되지 않는 값을 절대 수정하면 안된다.

render가 순수함을 유지한다면, React는 사용자에게 가장 중요한 업데이트의 우선순위를 정하는 방법을 이해할 수 있다고 한다. 이를 렌더링 순수성 이라고 한다. 컴포넌트는 렌더링에 부작용이 없기 때문에, React는 업데이터가 중요하지 않는 컴포넌트의 렌더링을 일시 중지하고, 나중에 필요할 때만 렌더링 할 수 있다.

React는 사용자에게 쾌적한 ux를 제공하기 위해 렌더링 로직을 여러번 실행할 수 있다. 여기에서 매번 렌더링된 내용이 바뀌게 되면 에기치 않는 버그가 발생하거나 사용자 경험이 저하되는 문제가 발생한다.

그렇다면 정확히 React는 어떻게 동작하는 것일까? 요?

React에게 무엇을 렌더링 할지 알려주면(코드를 작성하면) React가 사용자에게 가장 잘 표시하는 방법을 알아낸다고 한다. 이를 위해서 코드를 실행하는 몇가지 단계가 존재한다. (렌더링에서 실행되는 코드, 렌더링 외부에서 실행되는 코드)

Rendering : UI의 다음 버전이 어떻게 보일지 계산하는 것을 말한다.

렌더링 이후에 Effects( useEffect를 통한 다양한 부수효과들을 이야기 하는 것 같습 )가 모두 실행된다. 만약 실행도중 레이아웃에 영상을 미치는 경우, 해당 영향에 대해서 다시 계산 후 ui에 표시해준다. 이때는 최소한의 DOM업데이트를 한다.