react

시리즈에 대한 설명과 관련 글은 이 글에서 모아보실 수 있습니다. Step 0: Review이 글에서는 React.js(이하 React)의 내부 동작을 살펴보기 앞서 기본 개념에 대해 다룹니다.  React, JSX, DOM 요소가 기본적으로 어떻게 상호작용하며 동작하는지 알고 있다면 건너뛰어도 좋습니다.const element = Hello;const container = document.getElementById("root");ReactDOM.render(element, container);위 세 줄의 코드로 작성된 React 앱으로 React, JSX, DOM에 대해 가볍게 살펴봅시다. 첫 번째 줄은 React 요소(element)를 정의하고 두 번째 줄은 DOM으로부터 컨테이너로 사용할 노드(no..

Build your own React 시리즈는 React.js를 직접 구현하며 내부 구조와 동작 방식을 이해하는 과정을 정리한 글 모음입니다.Rodrigo Pombo(Pomber)님의 Build your own React글을 따라가며 내용을 해석, 추가하여 정리했습니다. step 0: Reviewstep I: The `createElement` FunctionStep II: The `render` FunctionStep III: Concurrent ModeStep IV: FibersStep V: Render and Commit PhasesStep VI: ReconciliationStep VII: Function ComponentsStep VIII: Hooks

가볍게 pug로 front end를 개발하다 결국 react로 전환하게 되었다. pug에서 react로 react를 몇 번 써봤고 state, props에는 익숙하지만 context API, routing은 개념만 알고 사용해 본적이 몇 번 없어 조금 더 써보고 나중에 프로젝트할 때 react를 써야지 하는 마음에 pug로 개발을 시작했었습니다. 아무래도 html, css, vanillaJS에 익숙한 저에게는 pug는 손발처럼 편했습니다. 하지만 pug로 개발하던 중 이럴 바에 찾아보면서 react로 하자 라는 생각이 들어 react로 전환하게 되었습니다. pug에서 느낀 불편함 pug에서 layout과 include를 적절하게 사용하면 react처럼 컴포넌트 단위 개발을 할 수 있습니다. 단순한 화면..