React49 리액트의 재조정 재조정이란? 리액트에서 재조정은 이전 렌더링 결과와 현재 렌더링 결과를 비교하고 변경된 부분을 업데이트하는 것을 말한다. 그럼 어떤 상황에서 재조정이 일어날까? 💡 재렌더링 이후 요소가 변경되었을 때useState 훅으로 어떤 상태가 기본값 false였다가 특정 조건을 만족하여 true가 되었다. 해당 상태가 true가 되면 사용자에게 어떤 알림기능의 컴포넌트가 표출되도록 하게 되어서 이라는 컴포넌트가 호출된다. 호출되는 과정에서 변경된 상태값 true가 fiber node에 저장되고, 상태값이 변경되었기 때문에 리액트도 감지하여 재렌더링을 실행하게 된다. 이때 리액트는 실제 DOM과의 차이점을 비교하는 diffing 과정을 거치면서 기존의 요소가 아닌 이라는 컴포넌트를 기존의 요소 자리에 넣는다.. 2024. 8. 11. 리액트에서 map 메서드의 key 속성 고유 식별을 위한 속성 배열의 반복을 통해 새 배열을 만들 때 map 메서드를 사용하는데, map 함수를 쓰면서 항상 사용하는 속성이 있다. key 속성인데, 이 속성은 리스트를 렌더링할 때 각 요소를 고유하게 식별하기 위해 사용된다. 만약 key 속성이 없으면 다음과 같은 오류가 발생할 수 있다.렌더링 성능 저하: key가 없으면 리스트 아이템을 식별하기가 어려워서 요소들이 변경될 때마다 모든 아이템을 재렌더링해야 한다.상태 유지 문제: key가 없으면 리액트는 아이템의 순서를 추적하지 못해서 컴포넌트 상태를 제대로 유지하지 못할 수 있다.그런데 오늘 이 map을 다루는 강의를 듣다가 의문이 들었다. 강의에서 key 속성없이 진행해서 직접 속성을 적용해보기도 하고 빼보기도 했는데 경고가 없는 것이다... 2024. 8. 3. useEffect와 useLayoutEffect useEffect와 useLayoutEffect useEffect는 데이터 가져오기, 구독 설정, 이벤트리스너 등록 등 브라우저 페인팅 후에 실행해도 되는 작업에 적합한 훅이며, 렌더링 결과가 브라우저에 그려진 후 비동기적으로 실행된다. 비동기적으로 실행되기 때문에 렌더링 성능에 영향을 덜 미친다.import React, { useEffect } from "react";const exampleFunction = () => { useEffect(() => { console.log("컴포넌트 렌더링 후 실행"); // api 호출, 이벤트리스너 등록 등의 작업 return () => { console.log("컴포넌트 언마운트되거나 업데이트되기 전 실행"); .. 2024. 6. 15. 가상DOM에 대해서 가상DOM이 어떤 것이며, 가상DOM이 없다면? 가상DOM은 실제DOM의 구조를 본뜬 것이며, 리액트같은 라이브러리나 프레임워크에서 사용되어 성능 향상과 개발 편의성을 제공한다. 가상DOM을 사용하면 실제 DOM에 반영하기 전에 실제 DOM과의 차이점에 대해서만 인지하여, 해당되는 부분만 DOM 조작을 통해 효율적으로 업데이트하게 되어 성능을 개선하는 데 도움을 줄 수 있다. 또, 가상 DOM을 사용하면 상태 기반의 선언적 프로그래밍이 가능해져서 코드의 가독성이 좋아지고 유지보수 또한 효율적으로 진행할 수 있다. 예를 들면 리액트는 state나 props가 변경될 때마다 자동으로 UI를 다시 렌더링하는 것을 들 수 있다. 그럼 만약 가상DOM이 없다면 어떻게 될까? 가상DOM이 없으면 UI의 변화가 생.. 2024. 6. 5. react-router-dom의 useMatch 훅 현재 위치가 특정 경로와 일치하는지 확인하는 훅 react-router-dom의 useMatch 훅은 현재 위치가 주어진 경로와 일치하는지를 확인하는 데 사용된다. 이 훅은 경로 문자열을 인자로 받아 일치하는 경우에 대한 정보를 반환한다. 여기서 경로가 일치하지 않으면 null을 반환한다. import { useMatch } from "react-router-dom"; const Component = () => { const match = useMatch("/path/to/match"); if (match) { // 경로 일치할 경우의 로직 } else { // 경로 일치하지 않을 경우의 로직 } } 위 코드에서 useMatch 훅은 "path/to/match" 경로와 현재 위치를 비교한다. 만약 현재 .. 2024. 3. 7. 리액트 복습 - 리액트 라우터 리액트 라우터로 페이지 이동하는 기초적인 방법 리액트로 프로젝트를 만들면서 페이지 이동을 하려면 리액트 라우터를 사용해야 한다. 우선 react-router-dom을 설치하여 index.js 파일에 아래와 같이 설정을 해줘야 한다. import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 설정은 App 컴포넌트를 BrowserRouter로 감싸고, import하면 된다. 사용할 때는 Routes와 Route를 사용하여 이동할 페이지를 연결해주면 된다. 위 코드는 페이지를 설정한 모습이다. Routes 내부에 Route를 사용하.. 2024. 1. 10. 이전 1 2 3 4 ··· 9 다음
