Recomendados
Más contenido relacionado
Similar a 바닐라에서 React까지
Similar a 바닐라에서 React까지 (20)
Más de Wonjun Hwang
Más de Wonjun Hwang (20)
바닐라에서 React까지
- 6. 6
- 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
- 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
- 19. HelloWorld 19
- 20. Render 20
- 23. React Lifecycle 로직 (추상적으로) 1. 값이 변경될 때를 감지 (이벤트 리스너) 2. 해당 값을 세팅 3. render 함수 호출 23
- 26. 클로저 변수는 가변(mutable)한 값이기에 side-effect를 막고 안정성을 높이기 위한 기법 => private 26
- 28. 클로저: React Lifecycle 예시코드 렌더링 호출에 관계없이 데이터는 보존됨 28
- 29. React 메인 함수: workLoop 29
- 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
- 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
- 48. Diff 알고리즘으로 O(N)만 비교 48
- 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
- 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
- 63. DOM 생성 전에 Props 값 Inject 시점에 대해서는 확인 필요 (발표자가 임의로) 63
- 64. Hooks 64
- 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
- 72. 결론 72
- 73. 시연 및 부가설명 73
- 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
- 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