전체 글

React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트입니다. Outlet 컴포넌트는 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링되는 위치를 지정합니다. const router = createBrowserRouter([ { path: '/', element: , // 상대 경로로 변환 children: [ { index: true, element: }, { path: 'events', element: , children: [ { index: true, element: }, { path: ':eventId', element: }, { path: 'new', element: }, { path: ':eventId/edit', elem..

custom HOC 재사용 가능한 로직을 분리해서 컴포넌트 사이에서 공유한다. 불필요한 추상 레이어(컴포넌트 래퍼)를 생성한다. 클래스, 함수 컴포넌트 모두 사용 가능 커스텀 HOC를 작성할 때는 관례적으로 with 접두사로 이름이 시작되지만, 절대적 규칙은 아님 ex) React.memo(Component) custom Hook 재사용 가능한 로직을 분리해서 컴포넌트 사이에서 공유한다. 불필요한 추상 레이어(컴포넌트 래퍼)를 생성하지 않는다. 오직 함수 컴포넌트 모두 사용 가능 훅의 규칙을 반드시 따라야 함 (함수 컴포넌트 또는 커스텀 훅 안에서만 사용 가능) 커스텀 훅을 작성할 때는 반드시 use 접두사로 이름이 시작되어야 한다. ex) React.useMemo(() => ) 토글 상태 관리 커스텀 ..

React Hook의 실행 흐름useState 사용 vs useEffect 사용useEffect 를 사용 안할시 이 방식의 단점 : 무한 루프를 만들 수도 있습니다. 왜냐하면 이것이 저장되어 있는지 확인하고 저장되어 있으면 이걸 true로 설정합니다. 그리고 state 설정 함수를 호출할 때마다 이 컴포넌트 함수는 다시 실행됩니다. 따라서 이것은 다시 실행되고 1이 나오면 다시 설정, 이런 식으로 계속됩니다. App.jsximport React, { useState } from "react"; import Login from "./components/Login/Login"; import Home from "./components/Home/Home"; import MainHeader from "./comp..

Portal Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 리액트 포탈(React Portal)은 리액트(React) 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해줍니다. 이 기능을 사용하면 컴포넌트의 렌더링 결과를 다른 DOM 노드로 이동시킬 수 있습니다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다. 리액트 포탈의 장점과 사용시점?? 장점: 유연한 ..

DOM(Document Object Model)정의HTML이나 XML 문서들을 자바스크립트같은 프로그래밍 언어로 조작 할 수 있도록 되어 있는 모델HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화 된 형태HTML 돔은 노드를 탐색하거나 수정할 수 있는 API를 제공한다. 돔은 getElementById 혹은 removeChild와 같은 메소드를 포함.우리는 돔과 관련된 작업을 하기 위해 보통 자바스크립트를 사용해서 제어할 수있다.기존 렌더링 방식브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를 만든다. 브라우저는 서버가 보내준 CSS 파일 을 해석(Parsing)하여 CSSOM 트리 ..

과정 : 1. 전역에 설정 import { getNode, css } from "./../lib/index.js"; const dropDown = getNode(".nav-menu__item"); const handlerOnDropDown = () => { css(".nav-sub-menu", "display", "block"); }; const handlerOffDropDown = () => { css(".nav-sub-menu", "display", "none"); }; dropDown.addEventListener("mouseover", handlerOnDropDown); dropDown.addEventListener("mouseout", handlerOffDropDown); 2.함수로 감싸줌 im..

표준 예제//Expenses.js import ExpenseItem from "./ExpenseItem"; import "./Expenses.css"; function Expenses(props) { return ( ); } export default Expenses;// ExpenseItem.js import ExpenseDate from "./ExpenseDate"; import "./ExpenseItem.css"; function ExpenseItem(props) { return ( {props.title} ${props.amount} ); } export default ExpenseItem; 작은 빌딩 블럭으로부터 사용자 인터페이스를 구축하는. 이런 접근 방법을 일반적으로 composition(합..

forEach forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. 원본을 변경 시킨다. 구문 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 매개변수 callback 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다. currentValue 처리할 현재 요소. index 처리할 현재 요소의 인덱스. array forEach()를 호출한 배열. thisArg callback을 실행할 때 this로 사용할 값. 반환값 undefined const arr = ['apple', 'kiwi', 'grape', 'orange']; arr.forEach((item, index) => { console.log("..