The HamSter Developer

React로 배포하면 한가지 문제점이 생기는데그건 바로 Route로 이동 후 새로고침을 하면 404가 발생한다.이는 react 고유의 문제로 next.js로 넘어가면서 사라졌지만, router-dom이 root URL에서 돌기 때문에 그렇다.즉리엑트 기본 URL 진입 -> Route로서 이동 하면 문제가 없지만주소창에 Route의 주소로 이동 -> React 주소에 들어온게 아니기 때문에 파일을 찾지 못해 404 에러이는 쉽게 해결할 수 있는데nginx default 값에 아래처럼 추가하면 된다.location /리액트를 배포한 주소 { alias AWS상에서 리엑트 빌드 파일이 있는 Path; #index index.html; ..

React를 처음 사용해 배포하려고 build를 할 때, 오류가 뜨면서 build 파일이 생성되지 않는다.그 이유는 바로 React Warning 때문이다.React는 코드가 문제가 있으면 build를 막아버리는데React에서 useEffect를 사용했을 때 타겟 부분에 state를 제대로 설정하지 않았거나import나 State로 설정된 사용되지 않은 변수가 있거나근데 타겟을 잡으면 무한으로 도는데??대부분 아래 코드에 문제가 있다.useEffect와 useQuery,useMutation을 사용했을 때 사용하는 실수가 가장 많이 보인다..useEffect( ()=>{ query.refetch() //혹은 mutate.mutate() },[])이렇게 작성이 되어 있다면 React Warnin..

가끔은 JS에서 쉽게 사용하던 스택들을 React에서는 어떻게 사용해야할지 감이 안잡히는 경우가 있다.대표적으로 observer가 그러한데, 이는 observer의 기초를 구현해놨다.해당 코드의 동작 방식은 Observer 컴퍼넌트가 생성되면 생성된 컴퍼넌트를 observer로 타겟한 후, 부모에게 넘겨받은 func를 실행하는 코드이다.import { useEffect, useMemo, useRef } from "react";interface IProps { func: (i: number) => void; funcValue: number;}const Observer = ({ func, funcValue }: IProps): JSX.Element => { const observerElem: React..

주인장도 React state로 HTML 태그의 설정을 js처럼 다루고 싶은데, 어떻게 해야할지 고민한 경험이 있다.기본적으로 HTML을 state에 저장하려면 아래처럼 작성하면 된다.useRef를 사용하는 이유는 값이 변경되어도 컴포넌트를 다시 렌더링하지 않는다.따라서 렌더링 간에 변수를 유지하거나 DOM 요소를 직접 조작해야 할 때 사용한다.const textareaRef = useRef(null); return ( );이러면 render 단계 이후에 textareRef를 기존의 js에서 사용한 것 처럼 다룰 수 있게 된다.textareaRef.current에 값이 저장되어 있다.간단 예 (textarea 태그의 높이를 자동으로 맞춰주는 코드) useEffect(() =..

설치npm i @tanstack/react-queryindex.tsx 수정아래 코드를 추가하자 (전부 지우고 이걸로 쓰라는게 아니다..)import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();root.render( );useQuery기본적으로 Mount 단계에서 무조건 동기적으로 한번 실행되는데, 그 덕분에 작성자는 잘 사용하지는 않는다. (뒤로가기 눌렀다가 다시 접속하면 이전 데이터가 남아있는 것 처럼 보인다. render보다 useQuery가 먼저 실행되고 동기로 작동하기 때문이다.)import { useQuer..

설치npm i react-router-domindex.tsx에 BrowserRouter 설정import { BrowserRouter } from "react-router-dom"; 기본 베이스 URL 설정하기기본적으로 URL의 root는 현재 주소로 되어 있지만(localhost:3000), 만약 localhost:3000/front가 해당 React의 Root URL로 적용하고 싶다면 아래처럼 작성하면 된다.Routes, Route, LinkRoutesRoutes는 Route의 모음이다.Routes 컴퍼넌트가 BrowserRouter에서 URL 주소를 확인하고자식으로 가지고 있는 해당 주소와 동일한 Route를 렌더링한다.RoutePath와 Element 정보를 가지고 있다.LinkHTML에서 사..

React는 부모가 자식(render에 포함된 컴퍼넌트)에 데이터를 주는 단방향 데이터 흐름을 보인다.간단하게 코드로 작성해보자단순한 데이터 넘기기자식interface IProps { anydata: any;}const Son = ({ anydata }: IProps): JSX.Element => { return {anydata};};export default Son;부모import "./App.css";import Son from "./comps/Son";function App(): JSX.Element { return ;}export default App;함수 넘기기자식interface IProps { func: (a: any) => any;}const Son = ({ func }: IProp..

왜 React에서 useMemo와 useCallback을 사용하는가?우리가 평소에 하는 것 처럼 const a = value; 로 변수나 함수를 선언하게 된다면 크게 2가지 문제가 생긴다.const a = value 로 단순하게 선언한 값을 useEffect로 a을 타겟팅 하였을 때, a가 바뀌어도 a가 훅으로 선언된게 아니기 때문에 useEffect는 작동하지 않는다.라이프 사이클마다 계속 코드가 실행되어 불필요한 부하가 생긴다. (최적화)이를 막기위해 우리가 변수를 선언할 때는 useMemo, 함수는 useCallback으로 만든다.useMemoconst [value, setValue] = useState(0);const a = useMemo(() => { return value; }, [va..

해당 포스트에서는 함수형 component의 기본적인 훅 (state , 사이드 이펙트)인 (useState, useEffect)의 기초 사용 설명을 작성하였다.UnMount용 Component를 작성import { useEffect } from "react";const WillUnMount = () => { useEffect(() => { console.log("willUnMount 생성"); return () => { //willUnMount는 이렇게 생성 단계에 return으로 콜백함수를 작성함으로서 설정할 수 있다. console.log("UnMounted!!!!"); }; }, []); return WillUnMount;};export default WillUnMo..

1. 클래스 컴포넌트와 함수형 컴포넌트의 차이?가장 큰 차이는 클래스형식의 컴퍼넌트는 도태되고 있다. (공식 문서에서도 함수형을 권장하고 있으니..)그럼에도 컴포넌트 자체가 클래스이기 때문에, 근본적으로 알고 넘어가는게 좋기 때문에 간단하게 포스팅을 작성한다.클래스 컴포넌트란?class 키워드를 사용하여 정의되며 this.state를 사용하여 상태를 관리한다.여기서 라이플 사이클을 설정할 수 있는데, 라이플 사이클이란 react에서 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정을 관리하는 것을 뜻한다.라이프사이클은 4가지로 나뉘어지는데 Mounting(컴퍼넌트 생성 단계), Updating(생성 후 업데이트 단계), Unmounting(컴퍼넌트 종료 단계) render(화면에 그려짐)이다.이 4가지 ..