celine

참고 문헌 : https://ko.legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals Portals – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 이전 글에 이어서 Portal에 관하여 작성 합니다. 이벤트 버블링이란? 하위 요소에 있는 이벤트요소가 상위 요소로 전달이 되는 것을 이벤트 버블링이라고 합니다. portal이 DOM 트리의 어디에도 존재할 수 있다 하더라도 모든 다른 면에서 일반적인 React 자식처럼 동작합니다. context와 같은 기능은 자식이 portal이든지 아니든지 상관없이 정확하게 같게 동작합니다. 이는 DOM 트리..

참고 문서 : 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..

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..