Download to read offline
![렌더 트리와 DOM 트리 관계
렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아님
비시각적 DOM 요소는 렌더 트리에 추가되지 않음.
[예시) display:none; <head /> 등]
42](https://image.slidesharecdn.com/vanilla-to-react-221228085255-48eede70/85/React-42-320.jpg)
![[141] react everywhere](https://cdn.slidesharecdn.com/ss_thumbnails/141react-everywhere-150914022631-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Codelab 2017] ReactJS 기초](https://cdn.slidesharecdn.com/ss_thumbnails/es6-171227074533-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기](https://cdn.slidesharecdn.com/ss_thumbnails/wjkqukgsqgm2vger5dnt-signature-2cf736e9b897e2aaaa6315f9d31d6951ba19fae7560fe278cefb4644ac0753c6-poli-170428114140-thumbnail.jpg?width=640&height=640&fit=bounds)
![[112]rest에서 graph ql과 relay로 갈아타기 이정우](https://cdn.slidesharecdn.com/ss_thumbnails/112restgraphqlrelay-161023161032-thumbnail.jpg?width=640&height=640&fit=bounds)
바닐라에서 React까지
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 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.
- 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. Helloworld 14
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. React Lifecycle 로직(추상적으로) 1. 값이 변경될 때를 감지 (이벤트 리스너) 2. 해당 값을 세팅 3. render 함수 호출 23
- 24.
- 25.
- 26. 클로저 변수는 가변(mutable)한 값이기에side-effect를 막고 안정성을 높이기 위한 기법 => private 26
- 27.
- 28. 클로저: React Lifecycle예시코드 렌더링 호출에 관계없이 데이터는 보존됨 28
- 29. React 메인 함수:workLoop 29
- 30.
- 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: Virtualdom이 무조건 좋을까? React가 DOM 보다 빠를 것이라는 말은 속설이다. 대부분의 케이스에서 충분히 빠른 앱을 만드든데 도와주는 거다. 34 Redux 창시자이자 React 개발팀원인 Dan Abramov 의 트윗
- 35. 먼저 브라우저에 대해알아야 합니다. 35
- 36.
- 37.
- 38. 렌더링 엔진 브라우저에 html,css 등 표시하는 역할 38
- 39.
- 40.
- 41.
- 42. 렌더 트리와 DOM트리 관계 렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아님 비시각적 DOM 요소는 렌더 트리에 추가되지 않음. [예시) display:none; <head /> 등] 42
- 43. JSX, Virtual DOM,DOM 43
- 44. Virtual dom 2. Virtualdom에서 가장 중요한 건 diff 알고리즘 44
- 45.
- 46.
- 47.
- 48. Diff 알고리즘으로 O(N)만비교 48
- 49.
- 50. React 메인 함수:workLoop 50
- 51. Render 함수 Hooks 값이변경될 때만 DOM을 다시 표현 51
- 52. 재조정 (Reconciliation) 함수형 컴포넌트호출 O(N^3) 52
- 53. Virtual dom 3. Virtualdom의 확장성 53
- 54. Virtual Dom은 사실OO 일뿐이다 54
- 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.
- 62.
- 63. DOM 생성 전에Props 값 Inject 시점에 대해서는 확인 필요 (발표자가 임의로) 63
- 64.
- 65.
- 66. Using the StateHook 66 https://ko.reactjs.org/docs/hooks-state.html
- 67. Using the EffectHook https://ko.reactjs.org/docs/hooks-effect.html 67
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 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.
- 77. 생각해볼 거리 React !==Magic 77 https://seokjun.kim/time-to-stop-react/
- 78. Reference Getting Closure onReact 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.