지금부터 리액트 훅에 대해 알아보자.Hook은 클래스 컴포넌트에서만 가능했던 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스르를 만드는 개발자라면 훅이 어떻게 동작하는지 이해할 필요가 있다. useStateuseState는 함수 컴폰너트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import {useState} from 'react'const [state,setState] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않는다면 어떻게 될까?import React from 'react'const Component = () =>..
리액트의 렌더링부라우저에서의 렌더링이란 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..
