[React] 11. useLayoutEffect (ft. Time is running out)

useLayoutEffect 란 ?브라우저가 화면을 그리기 전에 마지막으로 작업 할 수 있게 해주는 훅 useEffect 보다 먼저 실행됨(단, 브라우저가 화면 그리기 전에 동작하는 동기적 실행이므로 성능에 영향을 줌) useLayoutEffect 렌더링 순서렌더링 시작dom 생성useLayoutEffect 브라우저 화면 그리기 시작 useEffect useLayoutEffect vs useEffect (Time is running out)useEffect 의 경우 브라우저가 화면을 그린 이후에 동작 > 유저 입장에서 화면 깜빡이는게 보임 useLayoutEffect 의 경우 브라우저가 화면을 그리기 전 동작 > 유저 입장에서 자연스러움 즉 마지막으로 화면이 그려지기 직전 화면과 관련해서 수정 할 기회..

• format_list_bulleted JavaScript/React
• · 2025. 9. 3.
• textsms

[React] 10. Shadow DOM (ft. 영역전개)

“접근 금지” – Shadow DOM, 주술회전 ‘영역 전개’“내 스타일에 간섭하지 마세요. 여긴 Shadow 영역입니다.”웹 개발을 하다 보면 이런 생각이 들 때가 있다. “왜 내가 꾸민 스타일이 자꾸 깨지지…?내 버튼은 분명히 예뻤는데…?”(※ 정확히 말하자면 React 개념보단 웹 컴포넌트 쪽에 가까워요.하지만 따로 섹션이 없으니 여기 React 영역에 올려두겠슴다 🙃)스타일의 영역 전개 – Shadow DOM이란?Shadow DOM은 말 그대로 DOM의 그림자 세계.브라우저가 제공하는 웹 컴포넌트(Web Components) 기능 중 하나로,외부 스타일이나 스크립트가 내부에 간섭하지 못하는 독립된 DOM 트리를 만드는 것.마치 자신만의 세계를 펼치는 고죠 사토루의 ‘무량공처’처럼,이 영역 안에..

• format_list_bulleted JavaScript/React
• · 2025. 8. 4.
• textsms

[React] 9. useMemo (최적화)

useMemo (Memoization)최초로 계산하였을 때의 값을 메모리에 저장하고 동일한 계산에 대해서 각자 계산하는게 아닌 첫 번째 계산한 후 저장한 메모리에서 가져옴-> 불필요한 연산을 방지해줌(연산 줄임)import { useMemo, useReducer, useState } from "react";function Exam() { const [count, setCount] = useState(0); const [value, setValue] = useState(1); // 복잡한 연산 const expensiveCalculation = (num) => { console.log("⚡ 계산 중..."); let result = num * 2; for (let i = 0; i ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 8. useReducer

useReducer기존에 컴포넌트 내부에서 상태 관리 코드를 컴포넌트 외부에서도 할 수 있게 해주는 기능 여러개의 상태, 객체, 로직을 한꺼번에 관리하거나 코드를 분리할 때 많이 쓰게 됩니다. 특징 중 하나는 일반적으로 가독성을 위해 switch 문을 많이 씁니다. (if문 써도 무관) import { useReducer } from "react";function counterReducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; case "RESET": return 0; ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 7. useEffect

useEffect useEffect의 경우 렌더링이 발생할 때마다 동작하게 할 내용을 적을 때 쓰기 때문에useEffect 를 통해 동작하는 내용이 많아지면 크게 속도가 떨어지니 useState 또는 useRef 로 해결되지 않는 경우에만 사용하여야한다.  또한 렌더링 발생마다 이므로 effect가 존재하는 화면에 처음 들어갈 때도 동작을 한다.import './App.css'import InputText from './components/InputText'function App() { return ( )}export default App import { useEffect,} from "react";import useInput from "../Hook/useInput";con..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 6. 리액트의 생명주기(Life cycle)

일반적인 코딩에서 배우는 전역변수 지역변수의 생명주기가 아닌 React 에서 나오는 생명주기에 대해 작성하고 있습니다 .Life cycle생명주기에는Mount (생성)Update (변경)Unmount (제거)순으로 진행됩니다.MountMount는 화면이 처음 렌더링 되는 그 순간을 의미하는데 자세하게는 이런식으로 동작합니다.코드가 실행되어 렌더링까지의 내용이며,이 과정을 통해 리액트는 화면에 컴포넌트를 출력하고 있습니다.UpdateUpdate는 이름 그대로 변경 사항에 대하여 변경하는 내용으로 위와 같이 동작합니다.즉 리렌더링을 의미하며 이 과정을 통해 리액트는 변경된 내용을 적용하여 출력합니다(중간에 렌더링 할 지 하지 않을지 구분은 Ref , State 생각하시면 됩니다.)Unmount 더 이상 사용..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms