전체 > react컴포넌트 (2) 리액트 05: 리스트데이터의 활용 topics변수 사용 안녕하세요, 각성한 데브키라입니다. 오늘은 React에서 'topics' 변수를 활용해 데이터를 효과적으로 관리하는 방법을 알아봅니다. 이를 통해 동적 데이터를 사용자에게 보다 효율적으로 제공하는 방법을 살펴보겠습니다.[ 핵심 내용정리 ] 배열형태의 토픽변수를 Prop형태로 전송함으로써 동적으로 데이터를 가공할 수 있습니다.토픽형태의 변숫값을 사용할 때는 key값을 할당해서 사용해야 합니다.props 변수 사용 시 http://abc.com/'+props.path}"> 링크 이런 식으로 조합해서 사용할 수 있습니다.1. topics형태의 변수 하드코딩 주입토픽변수를 Nav컴포넌트에서 직접적으로 주입해서 출력하는 예제입니다.import './App.css';function Nav(){ const li.. 리액트 04: 컴포넌트의 섬세한 활용을 위한 props속성 사용 안녕하세요, 각성한 데브키라입니다. React 개발 과정에서 컴포넌트의 재사용성과 확장성은 매우 중요한 요소입니다. 이번 포스팅에서는 사용자 정의 태그와 속성(props)을 활용하여 다양한 표현을 가능하게 하고, 확장성을 극대화하는 방법을 살펴보겠습니다.[ 핵심 내용정리 ]React는 컴포넌트 기반의 라이브러리로, 재사용 가능한 UI 단위로 화면을 구성합니다. 이러한 컴포넌트들은 props라는 매개변수를 통해 데이터를 전달받아, 다양한 상황에 맞는 UI를 제공할 수 있습니다.1. App.js 소스코드이 코드에서 Header 컴포넌트는 props를 통해 전달받은 title 값을 활용하여, 기본 제목 "ALPHONSE"와 함께 전달받은 제목 "SNIPER"를 화면에 표시합니다. 이처럼 컴포넌트에 속성을 전달.. 이전 1 다음
