React Purity & Breaking the Rule of Hooks

Rule of Hooks

리액트를 처음 쓸 때, 아래 에러는 많이 겪어봤을 거에요.

1
Uncaught Error: Rendered more/fewer hooks than during the previous render.

몇번 씨름하고 나면 Rule of Hooks 라는 규칙을 알게 되죠. Rule of Hooks

1. 반드시 최상위에서만 호출하기

• 조건부로 호출하지 않기. (loop, condition, nested function 등)
• 순서대로 호출하기.

2. 리액트 함수 컴포넌트 내에서만 호출하기

왜 이러한 규칙들이 생겼을까요? 이는 React가 지향하는 순수성에 대한 요구사항이에요. Keeping Components Pure React에서는 mutation을 피하고, 불변성을 유지하는 것이 중요해요. 같은 입력 (props, state)에 대해 항상 같은 출력을 반환해야 해요. 렌더링 도중에 기존 값을 변경하는 것이 있으면 안됩니다.

React의 신기능들은 이렇게 쌓아올린 순수성을 기반으로 만들어진다고 합니다.