celine

참고 문서 : https://ko.legacy.reactjs.org/docs/portals.html Portals – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 1. React Portal 이란 ? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. --> 라고 공식문서에 적혀 있습니다. 잘 이해가 되지 않기 때문에 이해하기 위해서 코드를 작성해보겠습니다. 2. 코드 작성하면서 이해하기 - App.js 모달 열기 버튼을 누르면 모달이 open이 되는 코드 import { useState } from "react"; import "./App.c..

구현해야하는 슬라이드의 페이지 네이션 화면 첨부 - 현재 보여지는 슬라이드 페이지 / 총 슬라이드 갯수가 보여져야 합니다. * 사용한 slick-slide의 version은 Version 1.8.0 입니다. 1. 마크업을 해줍니다. 2. slick-slide를 사용하기 위한 script입니다. var $status = $('.pagingInfo'); //paging 이 들어갈 div 혹은 p 혹은 어떠한 영역 var $slickElement = $('.main-slide'); //slide가 되어야하는 div $slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){ var i = (currentS..

import React, { useState} from "react"; function TabMenu() { const [activeIndex, setActiveIndex] = useState(0); const tabContArr = [ { id: 0, tabTitle: "받은 질문", tabCont: ( ), }, { id: 1, tabTitle: "보낸 질문", tabCont: ( ), }, ]; return ( {tabContArr.map((item) => ( setActiveIndex(item.id)}> {item.tabTitle} ))} {tabContArr .filter((item) => activeIndex === item.id) .map((item) => ( {item.tabCont} ))..

1. exceljs 라이브러리를 설치합니다. npm i exceljs 2. 다운로드를 위해 file-saver를 설치합니다. npm i file-saver 3.excel을 만들어줍니다. *버튼을 클릭 했을 때 엑셀이 추출 되게 구현할 예정이므로 버튼이 클릭했을 때 실행되는 함수 안에 엑셀을 만들어주는 코드를 구현합니다. 1) workbook을 만들어줍니다. const workbook = new ExcelJS.Workbook(); 2) 엑셀 시트를 만들어줍니다. - 아래의 코드는 같은 코드이지만 2-1의 코드는 엑셀 sheet에 color를 추가해줬습니다. //2. 엑셀 시트 생성 //const worksheet = workbook.addWorksheet("내역 리스트"); // sheet 이름이 My S..

React Hook을 알아보기 전에 Class Component 와 Functional Component 를 비교합니다. Class Component vs Functional Component Class ComponentsetState() 함수를 통해 state를 업데이트합니다. Lifecycle methods 제공합니다. 생성자 ( constructor ) 에서 state를 정의합니다. Functional ComponentLifeCycle에 따른 기능 구현 불가합니다. Hook이 나오면서 useEffect,useState를 이용해 Mount, Update, Unmount 가 가능하게 됨 제공하는 기능은 한정적이지만 코드가 짧아지고 간단합니다. Hook이란 ? 원하는 시점에 정해진 함수(state 관련 ..

What is useParams ? The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the . Child routes inherit all params from their parent routes. import React, { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import MainImage from '../../LandingPage/Sections/MainImage' import GridCards from '../commons/Gri..