react12 [React] 블로그 제작 3 - map, props JSX 안에서 html 반복 생성? 1. map 함수 사용 function App() { let [titles, f] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']); // 버튼 클릭시 좋아요 +1 => 자주 변경될 것이기 때문에 state 사용 let [likes, plus] = useState([0, 0, 0]); return ( (생략...) { // i는 0부터 1씩 증가하는 수 titles.map((title, i)=>{ return ( { title } { let likes_copy = [...likes]; likes_copy[i] += 1; plus(likes_copy) }}>👍 { likes[i] } 11월 30일 작성됨 ) }).. 2022. 12. 7. [React] 블로그 제작 2 - 동적인 UI, 삼항연산자 동적인 UI 만들기 - 사용자가 조작 시 형태가 바뀌는 UI 동적인 UI 만드는 3단계! 1. html, css로 미리 UI를 만들기 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 코드 작성 예시) 모달창 띄우기 1. html, css로 미리 UI를 만들기 // App.js function Modal() { return ( 제목 날짜 상세 내용 ) } // App.css .modal { margin-top: 20px; padding : 20px; background : #eee; text-align: left; } 2. 현재 상태 저장 // UI의 현재 상태 let [modal, setModal] = useState(false); 3. state에 따라서 UI가.. 2022. 12. 7. 이전 1 2 다음
