[리액트] gh-pages 배포 후 새로고침시 404 오류

깃허브 페이지에 리액트 프로젝트를 배포한 후 404 오류가 뜨는 경우가 있다. 루트 디렉토리가 아니라 서브 디렉토리(ex. https://mygithub.github.io/example/서브디렉토리)로 최초 진입하거나, 진입 후 새로고침 할 때 이 현상이 발생하는 것 같다. 해결 방법 1: public 디렉토리에 404.html 생성 해결 방법 2: index.html 내 스크립트 추가 해결 방법 3: Hash router 사용 이는 SEO 최적화에 좋지 않기에 패스.

[리액트] react-daum-postcode 우편번호 검색 컴포넌트 예시

import { Button, Container, ModalBody, ModalFooter, Row, } from "@doar/components"; import { Dispatch, SetStateAction, useState } from "react"; import DaumPostcode from "react-daum-postcode"; import { Address } from "react-daum-postcode/lib/loadPostcode"; interface IFindAddress { setAddress: Dispatch; onClose: () => void; } const FindAddress = ({ setAddress, onClose }: IFindAddress) => { const s..

[리액트] 컴파운드 컴포넌트 패턴으로 작성하는 모달 컴포넌트 (+ dialogue 태그 활용)

문제 발견: 기존 모달 컴포넌트의 중복 코드 양산 리액트 프로젝트에서 모달 컴포넌트를 만들어 두고 사용할 때마다 매번 아래처럼 모달 상태를 위한 코드들이 양산되었다. // 모달을 보여줄 것인지 아닌지의 boolean 상태 const [show, setShow] = useState(false); // 필요시 모달 상태 핸들러까지... const modalHandler = () => { setShow((prev: boolean) => !prev); }; return ( 모달 내용(children) ) 위처럼, Modal 컴포넌트로 props를 내려주기 위해서 모달을 사용하는 상위 컴포넌트마다 모달 상태 관련 코드를 중복 작성해야 하는 것이다. 이런 컴포넌트 작성 패턴을 '렌더 프롭스 패턴(Render Pro..

[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조

리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다. 1. JSX 내에서 if 문 function Component() { return ( {(() => { if (someCase) { return ( someCase ) } else if (otherCase) { return ( otherCase ) } else { return ( catch all ) } })()} ) } 2. JSX 내에서 switch 문 function Component() { return ( {(() => { switch (status) { case..

리액트 JSX/TSX에서 switch 문법 사용하기

function HelloWorld() { const [state, setState] = useState(0); return ( {(() => { switch (state) { case 0: return ; case 1: return ; case 2: return ; default: } })()} ); }

[React.ts] props로 setState 넘길 때 타입 지정하는 방법

Dispatch 형태로 타입을 지정한다. import { Dispatch, SetStateAction, useState } from "react"; interface IExample { state: boolean; setState: Dispatch; } const [state, setState] = useState(false);