본문 바로가기

전체 글51

React 페이지 이동 Snack bar React에서 페이지 이동이 가능한 스넥바의 동작을 위하여sanckBar.js hook을 생성 후 아래와 같은 내용을 넣어준다.import React from 'react';import { useSnackbar } from "notistack";import Button from "@mui/material/Button";import {useNavigate} from "react-router-dom";const snackBar = () => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const nav = useNavigate(); const showSnackbar = (e) => { const action = () .. 2022. 11. 10.
React Class 컴포넌트에서 navigate 동작 방법 먼저 withRouter.js 라는 이름의 Hook을 생성 후 아래와 같은 내용을 입력해준다.import * as React from "react"import {useNavigate} from 'react-router-dom';export const withRouter = (Component) => { const Wrapper = (props) => { const navigate = useNavigate(); return ( ); }; return Wrapper;};그 후 Class 컴포넌트 파일 안에서아래와 같이  props의 navigate에 이동하고자 하는 페이지를 넣고 Class 컴포넌트를 withRouter로 감싸주면 된.. 2022. 11. 10.
React 스크롤 Top 이동 react에서 페이지의 스크롤 top 버튼및 이벤트를 추가하기 위해선아래와 같은 내용의 ScrollToTop.js 파일을 생성 후import { useEffect } from "react";import { useLocation } from "react-router-dom";export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null;}index.js 파일에 아래와 같이 Router 안에 선언하여 모든 화면에 적용시킬 수 있다.if (!!rootElement && rootEle.. 2022. 11. 10.
DataTable row 클릭 처리 DataTable의 row를 클릭하여 이벤트를 동작시키고자 할 경우 아래와 같이 row를 처리하는 click event 코드를 추가하여야 한다 $("#test-table").on('click', 'tbody tr', function(){ $("#test-table").DataTable().row($(this)).data();}); row를 클릭하여 모달을 띄우고 싶을 경우 아래와 같은 방식으로 할 수 있다. $("#test-table").on('click.modal.data-api', 'tbody tr', '[data-toggle="modal"]', function(){ let row=$("#test-table").DataTable().row($(this)).data(); let url=.. 2022. 11. 10.
JS div 특정영역 새로고침 화면의 특정 영역만을 새로고침하려고 할 때 load 함수를 사용하여 새로고침을 할 수 있다. $('#test-area').load(location.href+' #test-inner-area'); 2022. 11. 10.
React Helmet Async를 활용한 Meta Tag 관리 및 공유하기 웹 애플리케이션에서 SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 적절한 메타태그를 관리하는 것은 매우 중요합니다. react-helmet-async는 React 기반의 애플리케이션에서 동적으로 메타태그를 관리할 수 있도록 도와주는 도구입니다. 이 글에서는 react-helmet-async를 활용한 메타태그 관리 방법과 공유하기에 대해서 정리해보았습니다. 1. react-helmet-async로 메타태그 관리1.1 react-helmet-async 설치react-helmet-async는 SSR(서버사이드 렌더링)과 클라이언트 렌더링 모두에서 사용할 수 있는 메타태그 관리 라이브러리입니다. 설치 명령어는 다음과 같습니다:npm install react-helmet-async1.2 메타태그 컴포넌트 .. 2022. 10. 12.

티스토리툴바