버튼 (2) 썸네일형 리스트형 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 값을 넣어줌.. 자바스크립트로 버튼 효과 만들기 웹페이지에서 버튼 눌렀을때 뭐가 튀어나오게 하거나 텍스트를 바꿔준다거나 그런 다양한 기능들을 구현하기 위해서는 자바스크립트를 써야 함. 물론 버튼 디자인은 HTML과 CSS로 한다. 오늘 포스팅 내용은 버튼 디자인은 모르겠고 버튼을 눌렀을때 기능을 부여하는 것이 핵심. 바로 예제 코드 들어감 뿅 버튼 div 태그에 스타일을 넣어서 display: none 옵션을 넣으면 기본적으로 div 태그의 내용이 웹페이지에 표현되지 않음. 근데 버튼을 만들어서 div 태그의 스타일 옵션을 display: block 으로 바꿔주면 div 태그의 내용이 웹페이지에 표현됨 이렇게 된다는 이야기임. 자 여기서 버튼 태그에 onclick이라는 옵션이 들어가있는데 말그대로 저 태그를 클릭했을때 특정 코드를 실행시켜준다. onc.. 이전 1 다음
