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.

of

Hello, React Hooks! Slide 1 Hello, React Hooks! Slide 2 Hello, React Hooks! Slide 3 Hello, React Hooks! Slide 4 Hello, React Hooks! Slide 5 Hello, React Hooks! Slide 6 Hello, React Hooks! Slide 7 Hello, React Hooks! Slide 8 Hello, React Hooks! Slide 9 Hello, React Hooks! Slide 10 Hello, React Hooks! Slide 11 Hello, React Hooks! Slide 12 Hello, React Hooks! Slide 13 Hello, React Hooks! Slide 14 Hello, React Hooks! Slide 15 Hello, React Hooks! Slide 16 Hello, React Hooks! Slide 17 Hello, React Hooks! Slide 18 Hello, React Hooks! Slide 19 Hello, React Hooks! Slide 20 Hello, React Hooks! Slide 21 Hello, React Hooks! Slide 22 Hello, React Hooks! Slide 23 Hello, React Hooks! Slide 24 Hello, React Hooks! Slide 25 Hello, React Hooks! Slide 26 Hello, React Hooks! Slide 27 Hello, React Hooks! Slide 28 Hello, React Hooks! Slide 29 Hello, React Hooks! Slide 30 Hello, React Hooks! Slide 31 Hello, React Hooks! Slide 32 Hello, React Hooks! Slide 33 Hello, React Hooks! Slide 34 Hello, React Hooks! Slide 35 Hello, React Hooks! Slide 36 Hello, React Hooks! Slide 37 Hello, React Hooks! Slide 38 Hello, React Hooks! Slide 39 Hello, React Hooks! Slide 40 Hello, React Hooks! Slide 41 Hello, React Hooks! Slide 42 Hello, React Hooks! Slide 43 Hello, React Hooks! Slide 44 Hello, React Hooks! Slide 45 Hello, React Hooks! Slide 46 Hello, React Hooks! Slide 47 Hello, React Hooks! Slide 48 Hello, React Hooks! Slide 49 Hello, React Hooks! Slide 50 Hello, React Hooks! Slide 51 Hello, React Hooks! Slide 52 Hello, React Hooks! Slide 53 Hello, React Hooks! Slide 54 Hello, React Hooks! Slide 55 Hello, React Hooks! Slide 56 Hello, React Hooks! Slide 57 Hello, React Hooks! Slide 58 Hello, React Hooks! Slide 59 Hello, React Hooks! Slide 60 Hello, React Hooks! Slide 61 Hello, React Hooks! Slide 62 Hello, React Hooks! Slide 63 Hello, React Hooks! Slide 64 Hello, React Hooks! Slide 65 Hello, React Hooks! Slide 66 Hello, React Hooks! Slide 67 Hello, React Hooks! Slide 68 Hello, React Hooks! Slide 69 Hello, React Hooks! Slide 70 Hello, React Hooks! Slide 71 Hello, React Hooks! Slide 72 Hello, React Hooks! Slide 73 Hello, React Hooks! Slide 74 Hello, React Hooks! Slide 75
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

7 Likes

Share

Download to read offline

Hello, React Hooks!

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • chjin

    Jan. 12, 2020
  • joobn

    Mar. 16, 2019
  • soo5sin

    Feb. 12, 2019
  • htwoh

    Feb. 10, 2019
  • SeulGiJeong1

    Feb. 9, 2019
  • yich

    Feb. 9, 2019
  • limsungmook

    Feb. 9, 2019

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

Views

Total views

4,153

On Slideshare

0

From embeds

0

Number of embeds

2,694

Actions

Downloads

17

Shares

0

Comments

0

Likes

7

×