728x90 300x250 SMALL Front-end318 리액트에서 리스트(List)란? 리스트(List)란?리스트는 여러 개의 항목을 배열 형태로 관리하고, 이를 동적으로 렌더링할 때 사용된다.배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것을 말한다.React에서는 map() 함수를 사용하여 배열의 각 항목을 JSX 요소로 변환하여 렌더링한다.import React from "react";function ItemList() { const items = ["Apple", "Banana", "Orange"]; // 배열 return ( Fruit List {items.map((item, index) => ( {item} // 배열의 항목을 요소로 렌더링 ))} );}export defau.. 2025. 1. 12. 로그인 여부를 나타내는 툴바 만들기 - 비공개 보호되어 있는 글 입니다. 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 ··· 4 5 6 7 8 9 10 ··· 80 다음 728x90 반응형 LIST