모각코+/React
[모각코+] 웹 리액트(React) 1월달과정 7일차
Jshrewd
2022. 1. 21. 00:53
728x90
✅ 오늘의 문제 : 조건부 렌더링 ① - 버튼 클릭 이벤트 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