728x90 300x250 SMALL Front-end/React65 로그인 여부를 나타내는 툴바 만들기 - 비공개 보호되어 있는 글 입니다. 2025. 1. 10. React에서 key 속성이란? React에서 key속성이란?React는 컴포넌트를 구별하기 위해 key를 사용한다.key가 바뀌면 기존 컴포넌트를 삭제하고 새 컴포넌트를 생성한다.key를 사용한 렌더링 제어 예시key를 조건적으로 변경해 렌더링을 강제로 초기화하거나, 막는 방식이다.const App = () => { const [isVisible, setIsVisible] = React.useState(true); return ( setIsVisible(!isVisible)}> Toggle Component );};const ChildComponent = () => { console.log("렌더링 발생!"); return Child Component;}; 동작방식1.. 2025. 1. 9. React.memo란? React.memo는 React에서 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용하는 고차 컴포넌트(Higher Order Component, HOC)이다.React.memo는 함수형 컴포넌트의 props가 변경되지 않았을 때 컴포넌트를 다시 렌더링하지 않고 이전에 렌더링된 결과를 재사용한다. 이는 성능 최적화를 위해 유용하다. 기본적인 React.memo 사용법React.memo는 함수형 컴포넌트를 인자로 받아서, 리렌더링 조건을 자동으로 최적화하거나, 커스터마이즈할 수 있는 고차 컴포넌트로 감싸준다.const MemoizedComponent = React.memo(OriginalComponent);import React from "react";const MyComponent = ({ value }.. 2025. 1. 8. 컴포넌트 렌더링 막는 방법 리액트에서 컴포넌트 렌더링을 막는 방법은 여러 가지가 있다.특정 조건에 따라 컴포넌트가 렌더링 되지 않도록 제어하는 것이 핵심이다. 1. 조건부 렌더링으로 렌더링 막기조건을 사용해 컴포넌트를 렌더링하지 않도록 제어할 수 있다. (1) && 연산자를 사용해 조건이 false일 경우 렌더링 막기const shouldRender = false;return ( {shouldRender && 이 텍스트는 렌더링되지 않습니다.} ); shouldRender가 false라면 오른쪽 텍스트는 렌더링 되지 않는다. (2) 삼항 연산자를 사용해 렌더링 막기삼항 연산자에서 특정 조건에 따라 null을 반환하여 아무것도 렌더링 하지 않도록 설정한다.const isVisible = false;return ( .. 2025. 1. 7. 이전 1 2 3 4 ··· 17 다음 728x90 반응형 LIST