React_Deep_Dive

2000년대까지만 해도 LAMP(Linux, Apache, MySQL, PHP)로 웹 개발2010년대에 오면서 정적 -> 동적 변환이 일어나기 시작함. 인터넷 익스플로러 8에서 등장한 로컬 스토리지, 2011년 웹소켓, and 캔버스, SVG, Geolocation 등

JSX는 XML과 유사한 내장형 구문이며 JSX는 ECMAScript라고 불리는 자바스크립트 표준의 일부는 아니다.따라서 V8, Deno와 같은 자바스크립트 엔진이나 크롬, 웨일, 파이어폭스 같은 부라우저에 의해서 실행되거나 표현 되지 않는다.JSX의 설계 목적은 다양

브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)을 만든다.2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드한다.브라우저의 렌더링 엔진은 이 CSS도 파싱해

16.8미만 작성된 코드는 클래스 컴포넌트가 대다수일 것. 클래스 컴포넌트를 만들려면 클래스를 선언하고 extends로 만들고 싶은 컴포넌트를 extends해야한다.extends 구문에 넣을 수 있는 클래스는 React.ComponentReact.PureComponen

함수 컴포넌트는 리액트 0.14버전부터 만들어졌다. 다만 처음 만들때는 stateless functional component(무상태 함수 컴포넌트)로 별도 상태 없이 단순히 어떠한 요소를 정적 렌더링하는 목적이었다. 함수 컴포넌트가 각광받기 시작한것은 16.8버전에서

브라우저에서도 랜더링은 있다. HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 의미한다. 리액트에서의 랜더링은 조금 다르다. 리액트의 렌더링 리액트에서의 렌더링이랑 리액트 에플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고

리액트 훅 훅 활용시 클래스 컴포넌트가 아니더라도 리액트의 다양한 기능을 활용할 수 있다. 리액트의 모든 훅 파헤치기 훅 등장 이래 대부분의 리액트 컴포넌트는 함수 컴포넌트로 작성되고 잇을 정도로 많은 사랑을 받고 있다. useState 상태 관리용 훅 useStat

리액트에서 재사용할 수 있는 로직을 관리할 수 있는 두 가지 방법이 있는데 이는 사용자 정희 훅, 그리고 고차 컴포넌트이다.고차 컴포넌트는 굳이 리액트가 아니더라도 사용할 수 있는 기법이지만 사용자 정의 훅은 리액트에서만 사용할 수 있는 방식이다.반드시 use로 시작하

상태 관리는 왜 필요한가? 웹 app 개발을 할 때 이야기하는 상태는 어떠한 의미를 지닌 값이며 app의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미. 상태로 분류될 수 있는 것들은 대표적으로 다음과 같은 것이 있다. UI : 상호 작용이 가능한 모든 요소의

리액트 훅으로 시작하는 상태 관리 리액트 16.8에서 등장한 훅과 함수 컴포넌트의 패러다임에서 애플리케이션 내부 상태 관리는 어떻게 할 수 있고, 이러한 새로운 방법을 채택한 라이브러리는 무엇이 있고 어떻게 작동하는지 알아보자. 가장 기본적인 방법: useState와

React의 atom 모델에 영감을 받아 만들어진 상태 관리 라이브러리. 상향식(bottom-up) 접근법을 취하고 있음. 리덕스와 같이 하나의 큰 상탤르 app에 내려주는 방식이 아니라, 작은 단위의 상태를 위로 전파할 수 있는 구조를 취하고 있음을 의미. 리액트

Zustand Zustand 리덕스에 영감을 받아 만들어졌다. 하나의 스토어를 중앙 집중형으로 활용해 이 스토어 내부에서 상태를 관리하고 있다. (2022년 9월 기준 Zustand 최신 버전인 4.1.1을 기준으로 한다.) Zustand의 바닐라 코드 스토어의 구