모각코+/React

[모각코+] 웹 리액트(React) 1월달과정 7일차

Jshrewd 2022. 1. 21. 00:53
728x90

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD-%EC%9D%B4%EB%B2%A4%ED%8A%B8

 

✅ 오늘의 문제 : 조건부 렌더링 ① - 버튼 클릭 이벤트 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