브라우저 렌더링 과정 (Critical Rendering path)critial rendering path는 브라우저에서 화면이 보여질 때까지의 과정을 말한다브라우저에서 html의 문서를 다운로드 후, 페이지를 렌더링 하기까지의 과정을 살펴보자 크게 4가지 과정으로 이루어진다1. DOM +CSSOM 트리 생성2. Render 트리 생성 3. Layout4. Painting 1. DOM + CSSOM 생성 (브라우저 렌더링 엔진이 파싱)브라우저 렌더링 엔진이 html 문서를 파싱하여, 해석하기 위한 노드 객체로 변환된 객체 트리인 DOM 트리를 생성한다 CSS도 마찬가지로 파싱하여 CSSOM 트리를 생성한다DOM (Document Object Model)CSSOM (CSS Object Model) 2. ..
리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트, 비슷하지만 이 둘은 다르다! 결론부터 말하면, React Component의 반환값이 React Element 이다. 리액트 컴포넌트(React Component)UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록으로, 함수 또는 클래스이다.독립적인 state, props를 관리하고 element 를 반환하여 렌더링하는 역할을 한다. 즉, 컴포넌트는 엘리먼트의 설계도이다.function MyComponent() { return Hello, World!;} 리액트 엘리먼트(React Element)컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 ..
리액트에서는 컴포넌트 당 하나의 컴포넌트를 반환한다 만약 여러 개의 컴포넌트를 반환하고 싶다면, 최상위에 빈태그 혹은 div태그를 감싸서 반환한다 이때 사용하는 두 태그의 차이점은 무엇일까? 부모 요소가 시각적인 기능을 하지 않는다면, Framgent 태그를 사용하는 것이 좋다! 1. Framgent ... Framgent 태그는 DOM 요소에 등록되지 않아 레이아웃/스타일링에 영향을 주지 않는다 일반적으로 빈태그를 사용하지만 명시적으로 Framgent 를 작성해야하는 경우가 있다 바로 반복해서 여러 요소를 렌더링할 때이다 react에서는 요소들이 반복해서 렌더링 될 때 key를 입력해줘야 한다 function Blog() { return posts.map(post => ); } 2. div ... 렌더..
Vue로 처음 프론트를 접한 나는 리액트도 당연히 양방향으로 데이터 이동이 가능한 줄 알았다 리액트를 배웠을 때 props 전달에서 데이터를 내리고 올리다가 길을 잃었다.. 완전 냄새나는 코드를 작성하다가 Context를 알게되었다그리고 많은 라이브러리에서 Context 개념을 사용하고 있었다!Context란 ?props 없이 React에서 컴포넌트 간에 데이터를 전달하기 위한 개념이다즉 데이터를 사용하지 않는 컴포넌트들은 지나치고, 필요한 곳에서 바로 사용할 수 있다 리액트에서 유일하게 컴포넌트를 건너뛰면서 데이터를 전달하는 방법! 언제 사용하는건데?리액트는 단방향 데이터로, 데이터를 전달하기 위해서는 부모 컴포넌트에서 자식 컴포넌트로 props 전달한다하지만 앞서 예시처럼 중간에 여러 컴포넌트들을 거..