Props2 리액트 공식문서 읽기 - 주요개념(Components와 Props) Components와 Props 컴포넌트 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다. 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. //함수형 function Welcome(props) { return Hello, {props.name}; } //클래스형 class Welcome extends React.Component{ render(){ return Hello, {this.props.name} } } 👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트 컴포넌트 렌더링 React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발.. 2024. 3. 18. [React] 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하기(props) App.js의 데이터를 props를 이용해 하위 컴포넌트에 전달한다. props를 사용함으로써 컴포넌트의 재사용성을 높일 수 있다. props 전달 방법 3가지 1. 기본 사용법 App.js ExpenseItem.js function ExpenseItem(props) { return ( {props.date.toISOString()} {props.title} ${props.amount} ); } ⏏️ props: 상위 컴포넌트에서 내려주는 데이터. 객체 형식으로 되어 있다. 2. 비구조화 할당을 이용한 props 전달받기 😊 비구조화 할당: 객체에서 값을 추출하는 문법 (React 문법이 아님. JS 문법) ExpenseItem.js function ExpenseItem({title, amount, da.. 2023. 9. 5. 이전 1 다음 반응형
