스페이스 루미

다운그레이드 install 해준다 yarn add swiper@6.0.2 다운그레이드 안하면 별짓을해도 안되니까 다운그레이드하자. index.tsx에 스타일을 박아준다 import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/swiper.scss"; // core Swiper 나는 navigation이랑 pagination을 쓸거기때문에 이렇게 적었다 import 컴포넌트에 사용할 것들을 임포트 해주고 import SwiperCore, { Navigation, Pagination, Parallax } from "swiper"; import ..

메모이제이션 useMemo 맨 처음 계산한 값을 메모리에 저장(캐싱)해서, 필요할때 꺼내서 쓴다. 함수로써의 기능도 충분히 가능하지만, useMemo의 의도된 설계가 아니며 지연된 연산을 통해 "값"을 기억하는 게 주된 목적이다. useMemo는 인자를 전달할수없다. (함수의 응답값을 메모할 필요가 없는것이고, 리액트의 useMemo 설계 의도와 어긋난다) 매개변수로 하여금 값을 뽑아내고 싶다면, useCallback 훅을 사용한다. 하지만 이 함수의 응답은 memoize될 수 없다. * 함수는 렌더링이되면 모든 내부변수가 초기화되고, 재할당 과정을 거친다. * 함수형 컴포넌트또한 함수이므로 재렌더링 시 컴포넌트 내 선언된 변수가 초기화되는 과정을 거친다. * state가 변경되면, 함수는 재랜더링 되고..

나는 분명 자식 컴포넌트에서 type정의를 제대로 한것같은데 왜 부모에서 에러가 뜨는걸까??? Type '{ images: MediaFile[] | undefined; }' is not assignable to type 'IntrinsicAttributes & MediaFile[]'. type Props를 따로 정의를 해줬다. type Props = { images?: Array; } const GoodsImagesList = ({images}:Props) => { ... } images:MediaFile[] 로 바로 정의할때는 안되었는데.. 따로 Props 타입들을 정의 해주니 해결되었다. 잘 생각해보니, Props는 디스트럭쳐링 형태로 뽑아써야한다는걸 이해했다. (props.images 이렇게..) ..

아웃룩이 string으로 통 html을 넘겨줘서 이걸 잘 그려야 했는데, 어떻게 파싱해야되지?? iframe으로 해야하나 고민하고 있었다. 그러던 와중 멘토님이 html-react-parser 라는게 있으니 참고하라고 알려주셨다. How to render HTML string in react? how to pick body contents html-react-parser? 등 어떻게 html 안에 또 html을 뿌려주냐 고민하다가 아 어차피 string인데.. 안쪽만 추출해서 파싱해주면 되겠다 싶어서 string을 자르는방법을 선택했다. 좋은방법인지는 모르겠으나 react의 dangerouslySetInnerHTML 보다는 낫다는 판단이다. import parse from 'html-react-parse..

react-query 리액트 쿼리의 useQuery를 공부해보자. what is query? 쿼리란 무엇이냐.. 쿼리는 데이터베이스 테이블 or 테이블 조합의 데이터 or 정보에 대한 요청이다. 설치 및 세팅 리액트쿼리와 devtools를 설치해준다 yarn add @tanstack/react-query yarn add @tanstack/react-query-devtools QueryClientProvider로 라우터를 감싸주고, 안에 ReactQueryDevtools를 넣어준다. import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; im..

타입설정과 useState list들의 타입을 정해주고, map 돌릴 list state와 새로 추가할 newTodo state를 만들어준다. type Lists = { id:number, title:string, checked:boolean, } ... const [list, setList] = useState([]); const [newTodo, setNewTodo] = useState({ id: new Date().getTime(), title: "", checked: false, }); Mark up 볼만하게 커스터마이징을 해준다. 추가 {list.map((item, index) => { return ( onCheckboxClick(index)} /> {item.title} removeList(i..

[2022.01.05] 훅 정리 다시 하면서 한번더 정리해보는 useEffect useEffect(()=>{ 함수() }) // 렌더링 될 때마다 함수 실행 useEffect(()=>{ 함수() },[]) // 처음 렌더링 될때만 함수 실행 useEffect(()=>{ 함수() },[함수]) // 디펜던시 값이 변경될 때마다 실행 useEffect(()=>{ return()=>{ // clean up(정리) // 해당 컴포넌트가 unMount 될때, 다음 렌더링 될 useEffect가 실행되기 전에 실행 } },[]) clean up 예제 function App(){ ... return ( {state && } ) } ... function Interver(props){ useEffect(()=>{ co..

리스트를 추가하고 클릭시 제거하는 UI를 만들어보자. (TODO LIST를 만들어보자~~!) useState 현재 책 리스트를 담을 books Array와, 새로운 book Object를 초기값으로 넣어준다. id는 유니크한 값으로 넣어준다. Book은 id, title, author을 가지고있다. const [books, setBooks] = useState([ { id: 1, title: "1984", author: "George Orwell" }, { id: 2, title: "Lord of the Flies", author: "William Golding" }, { id: 3, title: "Catcher in the Rye", author: "J.D Salinger" }, ]); const [b..

React drag and drop / 리액트 드래그 앤 드롭 이용해서 이동시키기 1. 박스 내에서 드래그를 시킨다. 2. 드래그 영역이 박스 밖으로 이탈 시 이전 포지션값으로 이동 원리 1. 큰박스( container ) 내 absolute 상태인 작은박스( dragComponent )의 포지션값을 계산해준다. 2. 드래그 시작시, 시작 포지션을 저장한다. 3. 드래그중에 실시간으로 position x y 좌표값을 변경해준다. (실제 drag할 요소가 위치하는 포지션값) 4. 드래그를 종료하는 시점에서 dragComponent의 left, right, top, bottom 값이 container 값 밖에 위치하는지 체크한다. 5. container를 벗어나면 드래그 시작시 저장한 포지션값을 실제 포지션..

문제 height: 100vh 사용시 모바일 IOS에서 (+인앱브라우저) 스크롤이 생기는 문제 원인 100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식함 사용이유 body에 100% 를 상속받아 내려오는 케이스를 제외하고, 컨텐츠 영역에서 불가피하게 최상단 레이아웃에 flexbox를 사용해야할 때가 있다. 또는.. 별도의 각종 레이아웃 컴포넌트(헤더,푸터)를 제외한 영역을 100%로 잡아야 할 때 페이지별로 vh 속성을 쓰는게 깔끔할 때. 등등 많은 케이스에서 vh가 요구된다. CSS height: 100vh;// css property 지원 안하는 브라우저 대비용 height: calc(var(--vh, 1vh) * 100); JS useEffect(() => { // css property 사용..

context api를 사용해 로딩화면을 간단하게 구현해보자. context폴더에 LoadingContext 파일을 생성한다. context/LoadingContext.tsx import { createContext, useState } from "react"; type LoadingState = { setVisible: (value: boolean) => void; }; export const LoadingContext = createContext({ setVisible: (value: boolean) => {}, }); export function LoadingContextProvider({ children }: { children: React.ReactNode }) { const [visible, ..

어쩌다보니 써야 할 일이 생겨서 기록으로 남긴다. 물론 리액트 공식문서에도 사용법이 잘 나와있다. https://ko.reactjs.org/docs/react-without-jsx.html JSX 없이 사용하는 React – React A JavaScript library for building user interfaces ko.reactjs.org 코드 샘플 e('header', {className: 'custom-header'}, '타이틀'), e('article', {className:'custom-article'}, e('div', {className:'custom-div'}, e('span', {className:'custom-span'}, '샘플') )); e는 React.createEleme..

공용으로 사용할 커스텀 버튼 컴포넌트를 만들어보자. CustomButton.tsx (컴포넌트) import React from 'react'; type ButtonTypes = React.DetailedHTMLProps; export interface ButtonProps extends ButtonTypes { onClick: () => void; children: React.ReactNode; } const CustomButton = React.forwardRef( ({ onClick, className, children, ...props }, ref?: React.Ref) => { const classNames = [className, 'custom-btn'].filter(v => Boolean(v)..