Props

Next.js

ES6 destructuring 문법 <props>

destructuring 문법 => 구조화된 배열이나 객체를 분해하는 방법 (부모 컴포넌트) import Child from "./Child"; export default function Home() { let item = "test" return ( ); } 보통 props를 전달하기 위해서, 부모는 자식함수 호출과 동시에 props를 보내주는 형식을 사용한다. (자식 컴포넌트 ) export default function Child(props){ return( {props.item} ) } 자식은 부모의 props를 받고 부모 객체에 접근할 수 있다. (자식 컴포넌트 ) export default function Child({item}){ return( {item} ) } 하지만, destructur..

TypeScript

React + TypeScript 타입지정

JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = 리액트는 변수나 자료에 를 담아서 사용할 수 있다. => 는 일반적인 HTML이 아닌 JSX문법이기 때문. 이때 타입지정을 추가로 하고 싶다면 변수명 : JSX.Element 타입을 사용할 것. function 컴포넌트 타입지정 function App(){ return ( ); } function Profile(props:{name:string, age:string}) :JSX.Element{ return( {props.name}입니다. ) } 1. 리액트 키워드인 props에 파라미터 타입지정을 할 수 있고, 2. 리턴 타입의 경우 :JSX.Element를 사용하면 된다. => 생략해도 자동으로 타입지정이 됨..

www.seok.com
'Props' 태그의 글 목록