-
[모각코+] 웹 리액트(React) 1월달과정 7일차모각코+/React 2022. 1. 21. 00:53728x90
✅ 오늘의 문제 : 조건부 렌더링 ① - 버튼 클릭 이벤트 by Qcell | 코드메이트
컴포넌트 구조화 컴포넌트 구조화를 완료한 뒤, 조건부 렌더링을 학습하여 버튼을 클릭할 때마다 컴포넌트가 출력되거나 숨도록 코드를 구성해 보았습니다. Header.js import styles from './Header.module.c
codemate.kr
✅ 오늘의 문제 : 조건부 렌더링 ① - 버튼 클릭 이벤트
컴포넌트 구조화
컴포넌트 구조화를 완료한 뒤, 조건부 렌더링을 학습하여 버튼을 클릭할 때마다 컴포넌트가 출력되거나 숨도록 코드를 구성해 보았습니다.
Header.js
import styles from './Header.module.css'; function Header(){ return<div>헤더<br></br></div>; } export default Header;
Menu.js
import styles from './Menu.module.css'; function Menu(){ return<div>메뉴/</div> } export default Menu;
Layout.js
import styles from './Layout.module.css'; import Header from './Header'; import Menu from './Menu'; function Layout({children}){ return ( <div className={styles.container}> <Header/> <div className={styles.layout}> <Menu/> <div className={styles.contents}>{children}</div> </div> </div> ) } export default Layout;
App.js
import youtubeData from './data/youtubeData.json'; import Layout from './components/shared/Layout' import { useState } from 'react'; function App(){ const [check,setMenu]=useState(false); function Onclick(){ setMenu(check=>!check); } return ( <Layout> <div>콘텐츠</div> <button onClick={Onclick}>메뉴 클릭</button> {check && <div>클릭완료</div>} </Layout> ) } export default App;
728x90'모각코+ > React' 카테고리의 다른 글
[모각코+] 웹 리액트(React) 1월달과정 9일차 (0) 2022.01.21 [모각코+] 웹 리액트(React) 1월달과정 8일차 (0) 2022.01.21 [모각코+] 웹 리액트(React) 1월달과정 6일차 (0) 2022.01.20 [모각코+] 웹 리액트(React) 1월달과정 5일차 (0) 2022.01.18 [모각코+] 웹 리액트(React) 1월달과정 4일차 (0) 2022.01.17