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

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 Redux ? - A Predictable State Container - redux 란 예측 가능한 상태 관리 상태 관리 라이브러리 입니다. - 그렇다면 state는 무엇일까요? ✨what is State ? - state와 props를 같이 알아봅시다. 🔑 props ? - 리액트에서는 부모 컴포넌트와 자식 컴포넌트 사이에서 값을 주고 받을 때에 props를 이용합니다. 값을 주고 받을 때에는 부모 컴포넌트에서 자식 컴포넌트로 이동이 가능합니다. 부모 컴포넌트에서 값을 전달을 했다면, 자식 컴포넌트에서전달 받은 값은 변할 수 없습니다. 만약 변경을 하고 싶다면 부모 컴포넌트에서 값을 다시 전달을 받아야 합니다. 🔑 state ? - 부모 컴포넌트에서 자식 컴포넌트로 값을 전달을 하는 ..

1. npx create-react-app my-app 을 한 후 의 폴더 구조 입니다. my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg 2. 처음 npm start를 했을 때 나오는 화면은 src/ app.js 파일 입니다. 3. app.js는 index.js에 App 컴포넌트로 들어가 있는 형태입니다. document.getElementById('root')) 는 public/index.html의 id="root "를 그려줍니다. - public/index.html -> page template - src/i..