[컴][웹] React Hooks

React Hooks

Hook 은 거창한 것이 아니다. 이미 class component 에서 제공하던 state 를 function component 에서도 가능하게 해주는 function(?) 라고 보면 된다.

기존의 function component 에서는 state를 사용할 수 없었다.

• State and Lifecycle – React

이 React Hooks 는 아직 정식으로 release 되지 않았다.

Hook 사용시 규칙

Hooks 는 use 로 시작한다. 그리고 facebook 에서도 custom Hook 에 대해서도 이 convention 을 지켜달라고 한다.[ref. 2]

참고로, ref. 3 에 보면 왜 이름을 createState 가 아니라 useState 로 지었는지 이야기가 나온다.
아래 링크를 참고하자.

• Hooks at a Glance – React

Hooks FAQ

• Hooks FAQ – React

Hooks 가 어떻게 동작하는가?

How does React associate Hook calls with components?

React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

References

1. Introducing Hooks – React
2. Writing Custom Hooks – React
3. Using the State Hook – React