Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hello, React Hooks!

1,464 views

Published on

React 16.8 버전에 들어온 Hooks API에 대해 소개합니다.

Published in: Technology
  • Be the first to comment

Hello, React Hooks!

  1. 1. Hello, React Hooks! (heejongahn@gmail.com) 2019-02-09
  2. 2. Table of Contents • Topic: React Hooks • 1. Motivation: ? • 2. Usage: ? • 3. Internal: ?
  3. 3. Motivation • React Hooks ?
  4. 4. Motivation • React Class Component (from ):
  5. 5. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components
  6. 6. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand
  7. 7. Motivation • React Class Component (from ): • It’s hard to reuse stateful logic between components • Complex components become hard to understand • Classes confuse both people and machines
  8. 8. • : HoC, Render Props
  9. 9. • : HoC, Render Props • •
  10. 10. • : HoC, Render Props • • • → Wrapper Hell
  11. 11. https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6
  12. 12. https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6 Wrapper Hell
  13. 13. • ( , , …) :
  14. 14. • ( , , …) : • : componentDidMount
  15. 15. • ( , , …) : • : componentDidMount • : componentDidUpdate
  16. 16. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount
  17. 17. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount •
  18. 18. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ?
  19. 19. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? ,
 .
 . Mutually related code that changes together gets split apart,
 but completely unrelated code ends up combined in a single method.
 This makes it too easy to introduce bugs and inconsistencies.
  20. 20. • ( , , …) : • : componentDidMount • : componentDidUpdate • : componentWillUnmount • • “ ” ? ,
 .
 . Mutually related code that changes together gets split apart,
 but completely unrelated code ends up combined in a single method.
 This makes it too easy to introduce bugs and inconsistencies.
  21. 21.
  22. 22. • • class 
 (How does this work?)
  23. 23. • • class 
 (How does this work?) • ,
  24. 24. • • class 
 (How does this work?) • , •
  25. 25. • • class 
 (How does this work?) • , • •
  26. 26. • • class 
 (How does this work?) • , • • • Poor Minification, Flaky & unreliable Hot Reload
  27. 27. Hooks to the rescue!
  28. 28. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528
  29. 29. Hooks to the rescue! https://twitter.com/prchdk/status/1056960391543062528 No more classes, Just functions
  30. 30. Usage • React Hooks Class Component . • React Hooks, ?
  31. 31. Usage • Built-in Hooks • useState • useEffect • useRef • useContext • Custom Hooks
  32. 32. Built-in Hook: useState
  33. 33. Built-in Hook: useState
  34. 34. Built-in Hook: useState state 
 useState
  35. 35. Built-in Hook: useState
  36. 36. Built-in Hook: useEffect • • • • DOM • … • 
 componentDidMount, componentDidUpdate

  37. 37. Built-in Hook: useEffect • useEffect DOM
  38. 38. Built-in Hook: useEffect (w/ cleanup) API • , : componentWillUnmountAPI
  39. 39. Built-in Hook: useEffect (w/ cleanup) : DOM : , • useEffect , 

  40. 40. Built-in Hook: useEffect (optimization) . componentDidMount [] .
  41. 41. Built-in Hook: useEffect
  42. 42. Built-in Hook: useRef • 
 • React.createRef 
 ,
 DOM node reference 
 .
  43. 43. Built-in Hook: useContext
  44. 44. Other Built-in Hooks • useCallback
  45. 45. Other Built-in Hooks • useCallback • useMemo
  46. 46. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect
  47. 47. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • …
  48. 48. Other Built-in Hooks • useCallback • useMemo • useLayoutEffect • … • https://reactjs.org/docs/hooks-reference.html
  49. 49. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components)
  50. 50. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • ,
 Hook
  51. 51. Custom Hooks • Hooks = A way to reuse stateful logic (inside function components) • ,
 Hook • = “use” , A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks.
  52. 52. Rule of Hooks (link) • 
 Only call Hooks at the top level.
  53. 53. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions
  54. 54. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components.
  55. 55. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions.
  56. 56. Rule of Hooks (link) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. •
  57. 57. Custom Hooks example: useInterval https://overreacted.io/making-setinterval-declarative-with-react-hooks/
  58. 58. Custom Hooks example: useSpring http://react-spring.surge.sh/hooks
  59. 59. … and more Custom Hook examples https://usehooks.com/
  60. 60. Internal • React Hooks Class Component . • React Hooks , ( ) . • React Hooks ?
  61. 61. Rule of Hooks (revisited) • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. •
  62. 62. • 
 Only call Hooks at the top level. • , , 
 Don’t call Hooks inside loops, conditions, or nested functions • 
 Only call Hooks from React function components. • 
 Don’t call Hooks from regular JavaScript functions. • Rule of Hooks (revisited) yeah but why?
  63. 63. Internal: Pseudocode ver. https://mobile.twitter.com/jamiebuilds/status/1055538414538223616 https://overreacted.io/react-as-a-ui-runtime/
  64. 64. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call?
  65. 65. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called.
  66. 66. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components.
  67. 67. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order?
  68. 68. From “Rule of Hooks” doc • useState 
 ? So how does React know which state corresponds to which useState call? • .
 The answer is that React relies on the order in which Hooks are called. • .
 This is why Hooks must be called on the top level of our components. • ? 👉 See Why Do React Hooks Rely on Call Order? • tl;dr: , 
 .
  69. 69. … • Under the hood of React’s hooks system • React as a UI Runtime • React hooks: not magic, just arrays • react-reconciler/src/ReactFiberHooks.js
  70. 70. Summary • React Hooks CC(Class Component) .
 Hooks CC .
  71. 71. Summary • React Hooks CC(Class Component) .
 Hooks CC . • React useState, useEffect .
 , .
  72. 72. Summary • React Hooks CC(Class Component) .
 Hooks CC . • React useState, useEffect .
 , . • React Hooks Hook .
 , Hook Rules of Hook .
  73. 73. Summary
  74. 74. References (1/2) • General • Introducing Hooks • A comment on RFC: React Hooks • React as a UI Runtime • Motivation • React Today and Tomorrow and 90% Cleaner React With Hooks
  75. 75. References (2/2) • Usage • Making Sense of React Hooks • Making setInterval Declarative with React Hooks • Internal • Why Do React Hooks Rely on Call Order? • React hooks: not magic, just arrays • Under the hood of React’s hooks system • react-reconciler/src/ReactFiberHooks.js

×