리액트 (2) 썸네일형 리스트형 [리액트] 리액트에서 렌더링, 리렌더링이란? (Feat. useState) 우선, 일반적으로 렌더링이란 HTML, CSS 소스를 바탕으로 UI를 그리는 작업을 의미한다.하지만 리액트에서는 그 의미가 살짝 다른데, 모던 리액트 딥다이브에서 읽었던 내용을 바탕으로 이야기하자면"리액트의 관점에서 렌더링이란 우리가 작성한 jsx문법에 기반한 컴포넌트가 호출되면서 이를 평가하고 Virtual DOM 객체를 생성하는 과정을 의미한다"라고 한다. 그리고 리렌더링이란 말 그래도 이러한 과정이 두 번 이상 발생했다라는 뜻이다. 필자는 함수형 컴포넌트위주로만 다뤄봤기에 함수형 컴포넌트위주로 살펴본다면 리액트에서 리렌더링이 발생하는 상황은 크게 세가지라고 한다. 1. setState함수가 호출되었을때2. useReducer의 dispath가 실행되었을때3. 컴포넌트의 key props가 변경되었을.. [리액트] JSX는 어떻게 자바스크립트로 변환될까? (feat. Babel, Virtual DOM) 최근까지 jsx는 리액트의 전유물이며, 리액트에서만 사용이 가능한 문법이라고 생각하고 있었다.하지만 jsx는 ECMA 표준이 아닐뿐, 데이터를 표현하는 또 하나의 방식일뿐이라는 것을 딥다이브 책을 읽으며 알게 되었다. 그리고 jsx를 사용하면 Babel이 이를 React.createElement를 호출하는 JavaScript 코드로 변환한다는 것을 알았다. 바벨(Babel)에 관하여// Beforeconst element = Hello, JSX!;// Afterconst element = createElement("h1", { className: "title" }, "Hello, JSX!"); 바벨은 이처럼 jsx로 작성된 코드를 자바스크립트가 이해할 수 있는 방식으로 변환한다고 한다. 그리고 creat.. 이전 1 다음
