React
TIL | env파일 자동완성 및 Triple-Slash Directives 정리
env 파일 자동완성 및 에러 해결 const fetchData = async () => { const response = await fetch(process.env.REACT_APP_TEST_ENV) // Type 'undefined' is not assignable to type 'RequestInfo | URL'.ts(2345) const result = response.json() return result } useEffect(() => { fetchData().then(console.log) },[]) 위와 같이 .env 파일의 타입 이슈를 해결하기 위해서는 환경 변수(.env) 타입 설정이 필요하다. CRA 를 ts로 설치하였을때 src 디렉토리에 react-app-env.d.ts 파일이 생기..
React v18 주요 변경점
Automatic Batching batching은 리액트 내부에서 더 나은 퍼포먼스를 위해, 다수의 상태값 업데이트가 이루어짐에도 불구하고 단 한번만 재렌더링이 이루어지도록 그룹화하여 일괄처리한다. 리액트 17버전까지는 event handler 함수 내부에서만 batching이 동작하고 있지만, 리액트 18버전부터는 프로미스 내부, setTimeout 등 batching이 이루어지지 않는 함수들에 default로 탑재가 된다. // v17 const [count, setCount] = useState(0); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setTimeout(() => { setCount(prev => prev ..
TIL | React + twin.macro(with styled-component) 세팅
Twin? tailwind와 css-in-js를 혼용을 가능케 하는 css 라이브러리 Setting Install npm install twin.macro tailwindcss styled-components # or yarn add twin.macro tailwindcss styled-components # 추가적으로 @emotion/styled @emotion/react도 설치가 필요하다. yarn add @emotion/styled @emotion/react GlobalStyles 설정 import { createGlobalStyle } from "styled-components"; import tw, { GlobalStyles as BaseStyles } from "twin.macro"; cons..
TIL | useRef의 3가지 정의와 리턴값의 두가지 타입
useRef의 3가지 정의 및 타입 tsx의 useRef를 사용하면서, 기존에 js에서 사용하지 않던 RefObject 타입과 MutableRefObject 타입의 차이점 및 세가지 사용방법에 대해 자세히 알아보자 useRef useRef는, 인자로 넘어온 초깃값을 useRef의 .current 프로퍼티에 저장한다. 특정 DOM에 직접 접근하여 값을 변경하거나, 컴포넌트가 리렌더링이 되는 동안 유지해야할 일정한 값을 저장할 때 사용하곤 한다. 이러한 useRef의 index.d.ts(@types/react 경로에 존재) 에는 세가지 사용 방법이 나와있다. 1.초깃값 및 제네릭 타입이 주어졌을 경우 function useRef(initialValue: T): MutableRefObject; 초깃값의 타입과..
TIL | 간단한 custom hook 만들어보기 2
간단한 custom hook 만들어보기 2 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useScroll (scroll event를 위한 hook) useScroll.ts import { useState, useEffect } from "react"; export const useScroll = () => { // x축, y축을 초기 상탯값으로 지정 const [scroll, setScroll] = useState({ x: 0, y: 0, }); const handleScroll = () => { // 상탯값을 각각 window.scrollX, window.scrollY값으로 업데이트 (이 부분은 필요에 따라서 수정이 가능한 것으로 보이므로 자유롭게 사용하면 될 ..
TIL | 간단한 custom hook 만들어보기 1
간단한 custom hook 만들어보기 1 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useInput (input을 위한 hook) useInput.ts import { useState } from "react"; const useInput = ( // 초기 상탯값 및 벨리데이터 함수(원하는 조건을 리턴하는 함수) 인자로 받음 initialValue: string, validator: (value: string) => boolean ) => { // 인자로 받은 값을 기준으로 useState 지정 const [value, setValue] = useState(initialValue); // validator 타입이 함수가 아닐시, early return if (..