Search for a command to run...
Series
모던 리액트 Deep Dive 스터디 기록
리액트는 가상 DOM과 실제 DOM의 비교 컴포넌트 렌더링 판단 변수, 함수의 메모이제이션 등이 자바스크립트의 동등 비교 기반입니다. 이번 글에서는 자바스크립트의 동등 비교에 대해 알아보고, 그것이 리액트에서 어떻게 활용되는지 알아봅시다. 자바스크립트의 동등 비교 데이터 타입 자바스크립트에서 모든 값은 타입을 가지고 있음. (변수는 동적 타입) 크게 원시 타입과 객체 타입으로 나눌 수 있습니다. 원시 타입: 객체가 아닌 모든 타입 ...
이번 글에서는 리액트를 이루는 근본적인 요소 중 JSX와 가상 DOM, 리액트 파이버 등에 대해 알아봅니다. JSX란? JSX란 XML 스타일의 트리 구조로 표현하고 싶은 것들을 자바스크립트와 함께 작성하는 문법입니다. 자바스크립트로 트랜스파일링되어 실행됩니다. JSX의 구성 요소 JSXElement: HTML element와 비슷한 역할을 하는 컴포넌트 JSXAttributes: JSXElement에 부여할 수 있는 속성, 필수가 아님 ...
리액트 훅이란 리액트 16.8 버전에 정식으로 추가된 것으로 함수 컴포넌트가 리액트의 state, ref 등의 다양한 기능을 활용할 수 있도록 해주는 것이다. useState 함수 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 해주는 훅이다. import { useState } from "react"; const [state, setState] = useState(initialState); state가 상태이고, setState를 통해...
지난 글에 이어 여러 훅을 알아보자. useMemo const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]); useMemo는 첫 인자로 들어오는 함수의 연산 결과(비용이 큰)를 메모이제이션 해 두고 두 번째 인자인 의존성 배열의 값이 변경되지 않았으면 그 메모이제이션 된 값을 반환해주는 훅이다. 컴포넌트도 값이기 때문에 이를 통해 컴포넌트 또한 메모이제이션 할 수 있지만...
서버 사이드 렌더링 서버 사이드 렌더링(SSR)이란 웹 애플리케이션의 컨텐츠를 서버에서 렌더링하는 기법을 말한다. SSR에 대해 알아보기 전에 기존의 프론트엔드 중심 개발 방법 중 하나인 싱글 페이지 애플리케이션(SPA)를 알아본다. 싱글 페이지 애플리케이션(SPA) 과거엔 자바스크립트로 할 수 있는 일이 제한적이라 대부분의 처리를 서버에서 해야 했다. (데이터 연동, 페이지 렌더링, 인증/인가 로직 등)그 구조로 인해 관심사의 분리가 덜 이루...
현재 인터넷에서 가장 많이 쓰이는 리액트 버전은 16 버전이다. 그 이후 버전인 17, 18 버전에서 어떠한 변화가 있었는지 살펴보자. 리액트 17 버전 리액트 17 버전은 새롭게 추가된 기능이 없으며 기존 코드의 수정을 필요로 하는 변경 사항이 최소화되어있다. 이전 버전과의 호환성을 중시하며 17 버전으로 이동하기 쉽도록 만들어져 있다. 이벤트 위임 방식 변경 이전 버전에서는 이벤트 핸들러가 문서의 루트(Document)에서 이벤트를 캐치했지...
