JSX 안에서 반복문 : map()

map 함수를 이용한 JSX 내 반복문 JSX 내에서는 for문을 사용할 수 없다. map()함수를 이용하여 반복문을 사용할 수 있다. map() 안에 콜백함수에는 파라미터를 2개까지 사용할 수 있는데, 첫번째 파라미터는 해당 array 의 자료, 두번째 파라미터는 해당 array의 index번호다. import './App.css'; import { useState } from 'react'; function App() { let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); let [like, setLike] = useState([0,0,0]); return ( Blog { title.map((item, idx)=>{ return( ..

2022.11.11

JSX 문법 3가지

JSX란? import logo from './logo.svg'; import './App.css'; function App() { return ( ) } export default App; App.js 이 우리의 메인 페이지다. App.js에 div 하나만 남기고 삭제해보자. JS파일인데도 동작하는 이유는 HTML이 아니라 JSX이기 때문이다. JSX란 JavaScript 안에서 HTML을 쉽게 작성할 수 있게 도와주는 부가기능 혹은 언어라고 생각하면 된다. JSX를 사용하면 기존 HTML처럼 간단하게 레이아웃을 만들 수 있다. JSX를 쓰는 이유는.. 기존 문법으로 에서 하나를 만들려면 아래와 같이 써야한다. (길다) React.createElement('div', null, 'Hello World'..

2022.11.11