모던리액트
![[React] Deep Dive 모던 리액트(18) Jotai & Zustand](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMx7UV%2FbtsC4IVTsIb%2FpIM1qSiK5seHsdVfrmZYR0%2Fimg.png)
[React] Deep Dive 모던 리액트(18) Jotai & Zustand
Jotai는 공식 홈페이지에서 나와 있는 것처럼 Recoil의 atom 모델에 영감을 받아 만들어 진 상태 관리 라이브러리이다. Jotai는 상향식 접근법을 취하고 있다. 리덕스와 같이 하나의 큰 상태를 애플리케이션에 내려주는것이 아닌, 작은 단위의 상태를 위로 전파할 수 있는 구조를 가지고 있음을 의미한다. 이런 방식은 리액트 Context의 문제점인 불필요한 리렌더링이 일어나는 문제를 해결할 수 있다.메모이제이션 & 최적화 없이도 리렌더링이 발생하지 않는 구조이기 때문이다. atom Recoil과 마찬가지로 최소 단위의 상태를 의미한다. const couterAtom = atom(0) 위와 같이 Atom을 만들면 아래와 같은 정보가 담긴다. console.log(counterAtom) //,... /..
![[React] Deep Dive 모던 리액트(13) 리액트와 서버사이드](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmGSHk%2FbtsCzHQ5o2u%2FgMlRA40u5EfrnIgxbQXuZ1%2Fimg.png)
[React] Deep Dive 모던 리액트(13) 리액트와 서버사이드
기본적으로 리액트는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링 할 수 있게 해주는 API 또한 제공하고 있다. 당연히 해당 API는 window환경이 아닌 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server 에 renderToPipeableStream이 추가되었고 나머지는 대부분 지원중단 되는등 큰 변화가 있었다. 이 내용들도 따로 다루기로 하고 기존에 있던 함수들에 대해 알아보자. renderToString 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수 import React, { useEffect } from "react"; function ChildrenComponent({ fru..
![[React] Deep Dive 모던 리액트(12) 서버사이드 렌더링(SSR)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8GCPF%2FbtsCxHw2Faj%2FILEi6xTfkErIZRDcZsQFLk%2Fimg.png)
[React] Deep Dive 모던 리액트(12) 서버사이드 렌더링(SSR)
과거 리액트 애플리케이션을 만들때는 CRA(create-react-app)이 각광받았지만 요즘은 서버사이드 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 싱글 페이지 애플리케이션 SPA(Single Page Application) 이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최처에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업을 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동방식은 최초 로딩해야할 JS리소스가 커진다는 단점이 존재하긴 하지만 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 ..
![[React] Deep Dive 모던 리액트(10) useContext,useReducer,기타 훅들](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FutISS%2FbtsCztRFYdQ%2FRDzEOO0rHg9V18vlXNkwsK%2Fimg.png)
[React] Deep Dive 모던 리액트(10) useContext,useReducer,기타 훅들
useContenxt 리액트의 Context에 뭔지 알아야 useContext에 대한 올바른 이해가 가능하다. 리액트 애플리케이션은 기본적으로 부모컴포넌트와 자식 컴포너트로 이뤄진 트리 구조를 가지고 있다. 따라서 부모가 가진 데이터를 자식에게 전해주고 싶으면 props를 통해서 데이터를 넘겨줘야 한느데 이 거리가 길어질수록 코드가 복잡해지게 된다. 이러한 prop 내려주기는 결국 복잡한 코드를 만들게 되고 특히 해당 값을 사용하지 않는 중간단계의 컴포넌트에서도 props가 열려있어야 한다. Context를 사용하면 이러한 명시적 props없이도 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다. import React, { createContext, useContext } from "react"; c..
![[React] Deep Dive 모던 리액트(4) JSX](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAR7My%2FbtsB8Vt7NK0%2FHzDUwTrWhCngpyAghKN5D0%2Fimg.png)
[React] Deep Dive 모던 리액트(4) JSX
이제 리액트의 핵심 요소들을 하나씩 알아보자. JSX(JavaScript XML) 많은 프론트엔드 개발자들이 착각하는 것은 JSX가 리액트의 전유물이라는 것이다. 물론 JSX가 리액트가 등장하며 소개된 구문인점은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 해당 코드를 바로 실행하면 에러가 발생한다. 따라서 JSX를 활용하려면 트랜스파일러를 거쳐서 의미있는 JS 코드로 변환하는 작업이 필요하다. JSX의 주 목적중 하나는 HTML이나 XML을 JS내부에 표현하는 것이다. 그 외에도 JSX내부에 트리구조로 표현하고 싶은 다양한 것들을 작성하고 이를 JS가 이해할 수 있는 코드로 변경하는 것이 주된 목적이라고 할 수 있다. JSXEle..
![[React] DeepDive 모던 리액트 (1) 리액트의 역사](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc2jFtn%2FbtsBUdbAukV%2F4M3aWy2Ko4GIew9KDq4BYk%2Fimg.png)
[React] DeepDive 모던 리액트 (1) 리액트의 역사
감명있게 읽었던 JavaScript DeepDive의 리액트 버전 책이 나와서 바로 구매해보았다. 마찬가지로 책을 읽으면서 정리해보려고 한다. 사실 리액트를 깊게 공부해야한다 생각은 했지만 정말 리액트란 라이브러리의 원리에 대해 깊게 파거나 리액트에 존재하는 여러 유용한 훅에 대해 공부할 필요성을 느껴서 구매해보기도 했다. 책은 900페이지가 넘어갈정도로 두껍지만 그만큼 배워갈 부분도 많을 것 같아 기대된다. Why React? 리액트는 2011년 페이스북에서 선보인 10년이 넘은 라이브러리이다. 심지어 리액트가 전자정부 표준 프레임워크의 프런트 엔드 개발도구로도 채택되었다. 그만큼 리액트라는 라이브러리의 안정성또한 보장되었음을 알 수 있다. jQuery또한 2018년도 리액트에 밀리기 시작하였으며 당분..