![[141] react everywhere](https://cdn.slidesharecdn.com/ss_thumbnails/141react-everywhere-150914022631-lva1-app6891-thumbnail.jpg?width=600&height=600&fit=bounds)
[TeamStudy-022] Docker
Seu SlideShare está sendo baixado.
×
![렌더 트리와 DOM 트리 관계
렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아님
비시각적 DOM 요소는 렌더 트리에 추가되지 않음.
[예시) display:none; <head /> 등]
42](https://image.slidesharecdn.com/vanilla-to-react-221228085255-48eede70/75/react-42-2048.jpg?cb=1672217908)
Confira estes a seguir
Mais Conteúdo rRelacionado
Semelhante a 바닐라에서 React까지 (20)
Mais de Wonjun Hwang (20)
Mais recentes (20)
바닐라에서 React까지
- 1. OOO에서 React까지 2022.12.16 김천규 1
- 2. 바닐라에서 React까지 2022.12.16 김천규 2
- 3. 3 https://www.youtube.com/watch?v=KJP1E-Y-xyo
- 4. 4 https://www.youtube.com/watch?v=KJP1E-Y-xyo
- 5. Vanilla JS http://vanilla-js.com 5
- 6. 6
- 7. 7 React JSX Render Virtual Dom Components Hooks
- 8. JSX 8
- 9. JSX 없이 사용하는 React https://ko.reactjs.org/docs/react-without-jsx.html 9
- 10. JSX 없이 사용하는 React https://ko.reactjs.org/docs/react-without-jsx.html 10
- 11. JSX 이해하기 https://ko.reactjs.org/docs/jsx-in-depth.html 11
- 12. Babel, JSX, 그리고 빌드 과정들 https://ko.reactjs.org/docs/faq-build.html 12
- 13. JSX를 쓰기 위해 babel 필수 13 https://babeljs.io/docs/en/babel-preset-react
- 14. CODE: JSX. Hello world 14
- 15. package.json 15
- 16. webpack.js 16
- 17. HelloWorld.js 17
- 18. Webpack, bundle.js 18
- 19. HelloWorld 19
- 20. Render 20
- 21. React Lifecycle 21
- 22. CODE: Lifecyle 22
- 23. React Lifecycle 로직 (추상적으로) 1. 값이 변경될 때를 감지 (이벤트 리스너) 2. 해당 값을 세팅 3. render 함수 호출 23
- 24. React Lifecycle 예시코드 24
- 25. 클로저: MDN 25 https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
- 26. 클로저 변수는 가변(mutable)한 값이기에 side-effect를 막고 안정성을 높이기 위한 기법 => private 26
- 27. 클로저: MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 27
- 28. 클로저: React Lifecycle 예시코드 렌더링 호출에 관계없이 데이터는 보존됨 28
- 29. React 메인 함수: workLoop 29
- 30. 클로저: Render 함수 30
- 31. Virtual DOM 31
- 32. Virtual dom 1. Rendering: Virtual dom이 무조건 좋을까? 2. Virtual dom에서 가장 중요한 건 diff 알고리즘 3. Virtual dom의 확장성 (견해) 32
- 33. Virtual dom 1. Rendering: Virtual dom이 무조건 좋을까? 33
- 34. 1. Rendering: Virtual dom이 무조건 좋을까? React가 DOM 보다 빠를 것이라는 말은 속설이다. 대부분의 케이스에서 충분히 빠른 앱을 만드든데 도와주는 거다. 34 Redux 창시자이자 React 개발팀원인 Dan Abramov 의 트윗
- 35. 먼저 브라우저에 대해 알아야 합니다. 35
- 36. 36 https://d2.naver.com/helloworld/59361
- 37. 브라우저 구성요소 37
- 38. 렌더링 엔진 브라우저에 html, css 등 표시하는 역할 38
- 39. 39
- 40. HTML Parser 40
- 41. CSS Parser 41
- 42. 렌더 트리와 DOM 트리 관계 렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아님 비시각적 DOM 요소는 렌더 트리에 추가되지 않음. [예시) display:none; <head /> 등] 42
- 43. JSX, Virtual DOM, DOM 43
- 44. Virtual dom 2. Virtual dom에서 가장 중요한 건 diff 알고리즘 44
- 45. 재조정 (Reconciliation) https://ko.reactjs.org/docs/reconciliation.html 45
- 46. 재조정 (Reconciliation) 46 https://ko.reactjs.org/docs/reconciliation.html
- 47. 재조정 (Reconciliation) 47 https://ko.reactjs.org/docs/reconciliation.html
- 48. Diff 알고리즘으로 O(N)만 비교 48
- 49. CODE:재조정 (Reconciliation) 49
- 50. React 메인 함수: workLoop 50
- 51. Render 함수 Hooks 값이 변경될 때만 DOM을 다시 표현 51
- 52. 재조정 (Reconciliation) 함수형 컴포넌트 호출 O(N^3) 52
- 53. Virtual dom 3. Virtual dom의 확장성 53
- 54. Virtual Dom은 사실 OO 일뿐이다 54
- 55. ReactDOMServer https://ko.reactjs.org/docs/react-dom-server.html 55
- 56. SSR: Next - renderToString 56 https://github.com/vercel/next.js/blob/canary/packages/next/server/render.tsx
- 57. SSR: Next - renderToString 57 https://github.com/vercel/next.js/blob/canary/packages/next/server/render.tsx
- 58. App: React Native - renderElement 58 https://github.com/facebook/react- native/blob/621969b8d85d10f4f9b66be7d5deae58651d ibraries/ReactNative/RendererImplementation.js#L16
- 59. App: React Native - render 59 https://github.com/facebook/react- native/blob/main/Libraries/Renderer/implementations/ReactN ativeRenderer-prod.js
- 60. Virtual DOM이란 자체 표준이 있기에 60
- 61. Components 61
- 62. Components와 Props 62 https://ko.reactjs.org/docs/components-and-props.html
- 63. DOM 생성 전에 Props 값 Inject 시점에 대해서는 확인 필요 (발표자가 임의로) 63
- 64. Hooks 64
- 65. Hook의 개요 https://ko.reactjs.org/docs/hooks-state.html 65
- 66. Using the State Hook 66 https://ko.reactjs.org/docs/hooks-state.html
- 67. Using the Effect Hook https://ko.reactjs.org/docs/hooks-effect.html 67
- 68. CODE: Hooks 68
- 69. Example 69
- 70. 클로저: useState 70
- 71. 클로저: useEffect 71
- 72. 결론 72
- 73. 시연 및 부가설명 73
- 74. 74 React JSX Render Virtual Dom Components Hooks
- 75. 결론 • JSX: Babel (태그 -> createElement) • Render: 클로저를 이용해서 구현 가능 • Virtual Dom: JS 객체 1. Rendering: Virtual dom이 무조건 좋을까? => 일반적인 경우 2. Virtual dom에서 가장 중요한 건 diff 알고리즘 => O(N) 3. Virtual dom과 SSR 관계 => JS객체이기에 서버에서 처리 가능 • Components: • Hooks: 클로저를 이용해서 구현 가능 75
- 76. 결론 React != Magic 76
- 77. 생각해볼 거리 React !== Magic 77 https://seokjun.kim/time-to-stop-react/
- 78. Reference Getting Closure on React Hooks – JSConf.Asia https://www.youtube.com/watch?v=KJP1E-Y-xyo React 공식 문서 https://ko.reactjs.org/docs/react-without-jsx.html 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 이제 React.js 를 버릴 때가 왔다. https://seokjun.kim/time-to-stop-react/ 개발환경 및 실습 코드 https://github.com/cheonkyu/vanilla-react 78
- 79. 감사합니다. 79
