FrontEnd/React

    [React] 리액트 19 beta 변경점 알아보기
    FrontEnd/React

    [React] 리액트 19 beta 변경점 알아보기

    리액트 19 Beta 버전이 4.25일 이틀전에 나왔다! 리액트 팀에서 19에 어떤 변경사항을 적용할지 알아보자.     본 글은 리액트 팀블로그를 참고했다.https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19 React 19 Beta – ReactThe library for web and native user interfacesreact.dev    먼저 크게 보면 아래 항목들을 중점적으로 개발한 것 같다. 1. 비동기 작업의 편의성 ( 동시성에 초점을 둔게 느껴진다 )2. ref 개선3. 성능 개선     1. useTransition에서 비동기 함수 지원useTransition은 startTransition으로 감싼 상태변화의 우선..

    [React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)
    FrontEnd/React

    [React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)

    리액트는 보통 부모 -> 자식 방향의 단방향 정보전달의 구조를 이루고 있다. 따라서 자식 컴포넌트에서 정보가 변하지 않고 부모 컴포넌트에서만 값이 변해도 자식 컴포넌트가 같이 렌더링 되는 불필요한 과정이 있다. 이를 해결하기 위해서 memo, useMemo, useCallback 등을 사용할 수 있는데 실제로 리랜더링을 얼마나 막아줄 수 있는지와 props로 객체가 전달되었을 경우에 대한 이해를 여러가지 케이스들을 실험해 보며 정리해 보자. 1. 세팅 먼저 간단한 프로젝트를 CRA를 활용해서 만들어 보았다! npx create-react-app react-render --template typescript components라는 폴더를 만들고 간단하게 부모 컴포넌트, 자식 컴포넌트를 만들어준다. //Ap..

    [NextJs14] 글꼴 설정방법 ( google font )
    FrontEnd/React

    [NextJs14] 글꼴 설정방법 ( google font )

    NextJs에서 구글 폰트를 사용하기 위한 방법으로는 크게 두가지 정도가 있었다. 예를들어 배달의 민족의 JUA체를 사용한다고 생각해보자. 1. global.css 사용 처음에는 구글 폰트에서 제공하는 대로 HTML태그나 CSS를 넣어주는 방법이다. //global.css body { margin: 0; font-family: "Jua", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } // import "styles/globals.css"..

    [React] TanStack(React-Query) DeepDive 해보기
    FrontEnd/React

    [React] TanStack(React-Query) DeepDive 해보기

    react-query는 상당히 많이 사용되는 상태관리 라이브러리 중 하나이다. 하지만 어느정도 곁눈길로 사용하는 경우가 많다.(필자 역시) 23.10.17 에 react-query가 tabstack으로 새로 릴리즈 되었는데 이부분을 공부할 겸 React-Query가 뭔지 한번 깊게 공부해 보려 한다. TanStack(REACT-QUERY)가 뭔데?!! 먼저, TanStack의 공식 홈페이지에서는 해당 라이브러리를 아래와 같이 소개하고 있다. TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes ..

    [NextJs] Next.js14에 styled components 적용하기
    FrontEnd/React

    [NextJs] Next.js14에 styled components 적용하기

    Next.js 에 styled components를 적용하는 것 자체는 그렇게 어렵지 않았지만 어느정도 알고 있어야할 사전 지식이 있다. 아래 문서는 Next.js에서 제공하는 공식문서 중 css-in-js를 설정하는 방법들에 대해 다룬다. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.js Use CSS-in-JS libraries with Next.js nextjs.org 문서 처음부터 아래와 같이 경고를 해주고 있다. 요약하자면, NextJS 13버전 이후로 react18의 서버컴포넌트와 같은 서버사이드렌더링 기법들이 많이 추가되었는데 그중..

    FrontEnd/React

    [JEST,Recoil] jest에서 recoil사용하기

    jest를 활용해서 컴포넌트 테스트를 할 때 recoil을 세팅하고 싶을 떄가 있다. 이럴때 initializeState 속성을 활용하면 해결할 수 있다. 아래 코드를 보자. Recoil을 사용하기 위해서 RecoilRoot를 씌워주고 initializeState 속성을 추가해줘서 시작할때 recoil값을 변경하는 것이 가능하다. import React from "react"; import { render, screen } from "@testing-library/react"; import { matchers } from "@emotion/jest"; expect.extend(matchers); import { RecoilRoot, useRecoilState } from "recoil"; import {..

티스토리툴바