코딩왕랄프👊🏻

React에서 Fontawesome 을 사용하는 방법에 대해 알아보자. 1. font-awesome 설치 다음은 무료 아이콘들 종류를 모두 모아 놓은 것이다. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons 2. 파일에 import 하기 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSearch } from "@fortawesome/free-sol..

Virtual DOM에 대해 알아보기 전에, DOM이 무엇인지 알아보자. DOM이란, Document Object Model 로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용한다. 이 DOM 자체는 빠르나, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하기 때문에 이 과정에서 시간이 허비가 된다. 이를 어떻게 해결할까? DOM을 최소한으로 조작해 작업을 처리하는 방법으로 개선할 수 있다. 따라서 리액트는 Virtual DOM 방식을 사용해 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화, 효율적으로 진행한다. 그러나, Virtu..

Rendering은 사용자 화면에 View를 보여주는 것을 의미한다. 리액트는 어떤 방식으로 View를 render하길래 데이터가 변할 때 마다 새롭게 렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할까? 이를 이해하기 위해서는 '초기 렌더링'과 '리렌더링'의 개념을 이해하고 있어야 한다. "초기 렌더링" 어떤 프레임워크를 사용하든, 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 렌더링을 해주는 함수로 render(){..}가 있는데, 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있으며, render는 그 내부에 있는 컴포넌트도 재귀적으로 렌더링하게 한다. 이 최상위 컴포넌트의 렌더링 작업이 끝나면 가지고 있는 정보를 사용..

다양한 자바스크립트 라이브러리가 등장하고 있으나, 요즘 특히 많이 쓰이는 것 중에는 React가 있다. React는 페이스북이 개발한 라이브러리이다. 이 React가 가진 특징과 기능에 대해 알아보자. 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용되나, 구조가 MVC나 MVW인 프레임워크와는 달리 "V(View) 만 신경 쓰는 라이브러리" 이다. 리액트에서 중요하게 다뤄지는 키워드가 있는데, 이는 "컴포넌트" 이다. "컴포넌트"란 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 의미한다. 이것은 재사용이 가능한 API로 수많은 기능들을 내장하고 있고, 각 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 또 중요한 키워드로는 "렌더링"이 있다. "렌더링..