React

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

표준 예제//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(합..