React

[ React ] Recoil 이란

Recoil 이란? Recoil 은 많은 상태 관리 라이브러리 중 하나로, Facebook 에서 만든 상태 관리 라이브러리입니다. Facebook 은 React 를 만든 회사이기 때문에, React 에서 사용하기 쉽도록 만들어졌습니다. 가장 중요한 개념은 atom 과 selector 입니다. atom 은 하나의 상태를 의미하고, selector 는 atom 의 상태를 기반으로 계산된 상태를 의미합니다. Atom Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. Atom 은 상태의 단위입니다. 해당 Atom 의 상태가 변경되면, 해당 Atom 을 구독하고 있는 컴포넌트들은 다시 렌더링 됩니다. 또 여러 개의 ..

[ React ] Next.js

Next.js에 대해 간단히 설명 Next.js는 React 기반의 프레임워크입니다. React 는 기본적으로 Client Side Rendering만 지원합니다. 하지만 Next.js는 Server Side Rendering을 지원하기 때문에 SEO에 유리합니다. Next.js의 특징 Server Side Rendering 지원 기본적으로 리액트는 CSR만 지원하기 때문에 SEO에 유리하지 않습니다. 하지만 Next.js는 SSR을 지원하기 때문에 SEO에 유리합니다. Dynamic Routing 지원 Next.js는 폴더 및 파일 시스템 기반의 라우팅을 지원합니다. Code Splitting 지원 첫 페이지가 로딩되는 시간을 줄이기 위해 코드 스플리팅을 지원합니다. 페이지를 이동할 때마다 필요한 코드..

[ React ] Portal 이란 무엇인가

Portal이란? 게임이나 영화등에 나오는 물체를 순간이동 시키는 신기한 공간을 만들어내는 것을 포탈이라고 하죠. React 에서 사용하는 포탈도 비슷한 개념입니다. 부모 요소 밑에 있는 자식 요소를 부모 요소보다 더 위로 보내주는 역할을 하는 Portal 을 알아봅시다. Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법 입니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 포탈 ); }; export default App; import React from "react"; const Portal = ({ children }) => { return ReactDOM.createPo..

[ React ] React Hook Form 이란

React Hook Form이란? React 에서 Form 의 validation 을 쉽게 할 수 있도록 도와주는 라이브러리입니다. 전체 폼이 리렌더링 되지 않으면서, 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성도 적습니다. 설치 yarn add react-hook-form 을 통해 설치할 수 있습니다. 간단한 예제를 통해 사용법을 알아보겠습니다. React-Hook-Form import React from "react"; import { useForm } from "react-hook-form"; const App = () => { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => consol..

[ React ] useEffect 와 useLayoutEffect 의 차이점

useEffect useEffect 는 컴포넌트들이 비동기적으로 render 와 paint 된 후 실행된다. paint 된 후에 실행되기 때문에, useEffect 내부의 dom 에 영향을 주는 코드가 있을 경우, 사용자 입장에서 깜빡거림을 감지할 수 있다. useLayoutEffect useLayoutEffect 는 컴포넌트들이 동기적으로 render 된 후 실행, 그 후 paint 된다. paint 가 되기전에 실행되기 때문에, dom 조작하는 코드가 있더라도 깜빡임이 없다. 결론 두 코드의 차이점은 실행 시점이다. useLayoutEffect 는 동기적으로 실행되고, 내부의 코드가 모두 실행된 후 painting 작업을 거치기 때문에 레이아웃이 복잡하면 복잡할 수록 화면을 보기까지 시간이 오래걸린다..

[ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유

왜 State 를 직접 수정하면 안되는 걸까? immutable ( 불변성 ) 을 유지해야하기 때문이다. 리액트 컴포넌트는 한번 Render 를 실행한 후, shouldComponentUpdate 상태로 들어가게 된다. 이 라이프 사이클 메서드를 사용하게 되면 아래 상태가 되었을때 Update 가 되어서 render 를 실행한다. props, state 가 변경 부모 컴포넌트가 렌더링 되었을 때 forceUpdate 가 실행될 때 그런데 직접 state 를 고치면 왜 update 상태가 되지 않는 것일까? 그건 React 가 값이 바뀜을 판단하는 기준이 메모리 주소이기 때문에 객체의 주소가 바뀌지 않고 내부 값만 바뀐다면 바뀌지 않은 것으로 인식하기 때문이다. 즉 "불변성" 을 지키지 않아서 일어난 일이..

[ React ] Lazy Loading 과 Code Splitting

Code Splitting 코드 스플리팅이라는 것은 Webpack, rollup, browserify 와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 번들 파일로 나누는 것을 의미한다. 하나의 번들 파일을 여러 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서이다. 번들러를 사용하는 이유는 브라우저에서 호출하는 파일 개수를 줄여 부하 발생 방지를 위해 번들러를 사용하는데, 프로젝트 규모가 커지면서, 번들링 크기도 커지고 이는 즉 번들 파일 로딩 시간이 길어지는 결과가 발생한다. 이래서 하나의 번들 파일을 여러개로 나눈 뒤, 실제 로드되는 화면의 번들 파일만 불러오고 나머지는 지연 시킴으로 더 빠른 화면을 보여줄수 있게 된다. ( Lazy Loading ) Lazy Loa..

React Lifecycle 그리고 Hooks

LifeCycle Method 는 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.