React

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..

함수 컴포넌트는 리액트 0.14 버전부터 만들어진 꽤 역사가 싶은 컴포넌트 선언 방식이다.var Aquarium = (props) -> { var fish = getFish(props.species) return {fish}}var Aquarium = ({species}) => {getFish(species)} 이때 당시의 함수 컴포넌트는 클래스 컴포넌트에서 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적으로 사용됐다. 하지만 함수형 컴포넌트에 Hook이 등장하며 복잡한 클래스 컴포넌트보다 함수 컴포넌트를 더 많이 쓰기 시작했다.  클래스 컴포넌트기존 리액트 16.8 미만으로 작성된 코드에는 클래스 컴포넌트가 대다수일 것이다.var Aquarium = (props) -> { v..

리액트의 특징으로 가장 많이 언급된 것 중 하나는 바로 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 하지만 가상 DOM이 외 만들어졌는지, 실제 DOM과 어떻게 다른지, 그리고 정말 실제 DOM을 조작하는 것보다 빠른지에 대해서는 잘 모르는 경우가 많다. DOM과 브라우저 렌더링 과정DOM은 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 브라우저가 웹 사이트 접근 요청을 받고 화면을 그리는 과정에서 정확히 어떤한 일은 아래의 과정과 같다.브라우저가 URL에서 HTML 파일을 다운로드한다.HTML을 파싱하여 DOM 노드 트리를 만든다.(2)번 과정에서 CSS 파일을 만나면 CSS 파일을 다운로드한다.CSS도 파싱해 CSSOM을 구성한다.(2)번 DOM 노드를 순회..

JSX(Javascript XML) 란?보통 리액트를 통해 JSX를 접하기에 JSX가 리액트의 전유물로 생각하는 경우가 많다. 하지만 JSX는 리액트에서 사용하는 것은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 코드를 바로 실행하면 에러가 발생한다. 그렇기 때문에 JSX는 반드시 트랜스파일러를 거쳐야 JS 런타임이 이해할 수 있는 JS 코드로 변환 된다. JSX는 HTML이나 XML을 JS 내부에 표현하는 것이 유일한 목적은 아니며 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, JSX를 트랜스파일 과정을 거쳐 JS가 이해할 수 있는 코드로 변경하는 것이 목적이다. JSX의 정의JSX는 기본적으로 JSXEle..

최근에 대다수의 프로젝트가 타입스크립트 기반으로 작성되었다. 코드를 작성하며 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 작성하면서도 잠재적인 버그도 크게 줄일 수 있다. 타입스크립트란?기존 자바스크립트 문법에 타입을 가미한 것이 타입스크립트라 할 수 있다. 동적 타입의 언어인 Javascript는 런타임에 에러를 확인할 수 있으며 동적 타입 언아라는 점은 개발자에게 자유를 줄 수 있지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 있다.function test(a,b) { return a/b}test(5,2) // 2.5test('안녕하세요','하이')// NaN 두 인수를 받아 나눗셈한 결과를 반환하는데, 숫자가 아닌 타입의 값이 들어오면 NaN이 반환된다. 이러한 문제는 Java..

자바스크립트의 데이터 타입자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다.원시 타입 : boolean, null, undefined, number, string, symbol, bigint객체 타입 : object위 타입들 중 boolean의 true와 false 처럼 평가되는 값들이 존재하는데, 이를 truthy, falsy한 값이라 한다.falsy 값은 false, 0, -0, 0n, 0x0n, NaN, "", '', ``, null, undefined 이며, truthy는 falsy를 제외한 모든 값이다. Number자바스크립트의 Number는 다른 언어와 다르게 모든 숫자를 하나의 타입에 저장한다. 그 수의 범위는 -(2^53 ..