본문 바로가기
728x90

Research/React40

React_Form submission // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const books = [ { author: 'Charles Dickens', title: 'Interesting Topics', img: './images/book-1.jpg', id: 1, }, { author: 'Laura Dave', title: 'The Last Thing He Told Me', img: './images/book-2.jpg', id: 2, }, ]; const BookList = () => { return ( {books.map((book) => { return ; })} ); }; con.. 2023. 4. 24.
React_props 깔끔하게 가져오기 객체 분해 할당으로 props 가져오기 // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const books = [ { author: 'Charles Dickens', title: 'Interesting Topics', img: './images/book-1.jpg', id: 1, }, { author: 'Laura Dave', title: 'The Last Thing He Told Me', img: './images/book-2.jpg', id: 2, }, ]; const BookList = () => { return ( {books.map((book) => { .. 2023. 4. 24.
React_Childeren props 사용하기 React에서는 Children props라는 것을 제공한다. // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const firstBook = { author: 'Charles Dickens', title: 'Interesting Topics', img: './images/book-1.jpg', }; const secondBook = { author: 'Laura Dave', title: 'The Last Thing He Told Me: A Novel Paperback – March 21, 2023', img: './images/book-2.jpg', }; cons.. 2023. 4. 22.
React_deconstructing으로 props 생략하기 const Book = (props) => { console.log(props); const { title, author, img} = props return ( {/* Dynamically render title */} {title} {author} ); }; 요걸.. const Book = ({ img, title, author }) => { return ( {/* Dynamically render title */} {title} {author} ); }; 이렇게 바꿀 수 있다. 2023. 4. 22.
728x90

티스토리툴바