컴포넌트 (3) 썸네일형 리스트형 reactjs에서 반복문으로 HTML태그 만들기 1. 개요 map 함수를 알아야 함 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌 [1,2,3].map(function(i){ console.log(i); }) 2. 코드 예를 하나 들어봅시다 import {useState} from 'react'; function App() { let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']); return ( { 글제목.map(function(a, b){ return( 글번호 : {b+1} {a} ) } } ) } state에 글제.. reactjs로 동적인 UI 만들어보기 1. 개요 동적인 UI 만드는 STEP HTML, CSS로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성 2. 코드 import {useState} from 'react'; function App() { let [card, setCard] = useState(false); return( { if (card==true){ setCard(false) } else { setCard(true) }}> 카드 컴포넌트 보여주기 {card == true ? : ''} ) } function Card() { return( 카드컴포넌트 ) } 우선 Card 컴포넌트를 만들어주고 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌.. reactjs에서 component로 편리하게 HTML덩어리 관리하기 1. 개요 컴포넌트는? 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구 커다란 페이지를 컴포넌트화 해두면 편함 자주 변경되는 UI를 컴포넌트화 해두면 편함 함수 만들고, return() 안에 HTML 담고, 형태로 쓰면 됨(도 됨) 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것 2. 코드 function Card() { return( 카드임 ) } 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임 function 뒤에 컴포넌트의 이름을 쓰면 되고 return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨 function App() { return( ) } function Card() { return( 카드임 ) } 이런식으로 코드 짜면 .. 이전 1 다음