//부모 컴포넌트의 state는 자식 컴포넌트에서 바로 사용할 수 없다.
//props를 통하여 부모 컴포넌트의 state를 자식 컴포넌트에게 전달한다.
//props 사용방법
//1. 자식 컴포넌트에 이름={state명}
//2. 자식 컴포넌트 함수에 props라는 파라미터를 입력 후 사용할 수 있다.
//자손변수를 선언하였지만 부모안에 있는 자손변수를 다시 한번 선언해주어야 state를 전달할 수 있고 꼭 props와 함께 선언해주어야 한다.
import Logo from './../images/logo.png'
function Header(){
function toggleGnb(){
document.querySelector(".gnb_btn").classList.toggle("active")
}
return(
<header>
<h1><img src={Logo}/></h1>
<div className='gnb_btn' onClick={toggleGnb}>
<span className='line'></span>
<span className='line'></span>
<span className='line'></span>
</div>
<nav className='gnb'>
<ul>
<li>HOME</li>
<li>MAGAZIN</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
)
}
export default Header;
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
import {Routes, Route, Link}from 'react-router-dom';
import './App.css';
import Header from './components/Header.js'
import Footer from './components/Footer.js'
function App() {//함수 app은 컴포넌트라고 할 수 있다.
return (
<div className="App">
<Header />
<Footer />
</div>
);
}
export default App;
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
img{
max-width: 100%;
}
.App{
font-family: "Roboto", sans-serif;
font-size: 16px;
color: #656565;
}
/* header */
header{
position: fixed;
width: 100%;
background: #fff;
z-index: 999;
}
h1{
padding: 20px 10px;
}
h1 img{
width: 25%;
}
.gnb_btn{
position: absolute;
right: 10px; top: 20px;
width: 20px; height: 20px;
z-index: 10;
}
.gnb_btn .line{
display: block;
width: 100%;
height: 2px;
background: #333;
transition: 0.3s;
position: absolute;
}
.gnb_btn .line:nth-child(1){top: 0;}
.gnb_btn .line:nth-child(2){top: 7px;}
.gnb_btn .line:nth-child(3){top: 14px;}
.gnb_btn.active .line:nth-child(1){top: 7px; transform: rotate(45deg);}
.gnb_btn.active .line:nth-child(2){opacity: 0;}
.gnb_btn.active .line:nth-child(3){top: 7px; transform: rotate(-45deg);}
.gnb{
position: fixed;
right: -100%; top: 0;
background: rgba(255,255,255,0.9);
width: 100%; height: 100%;
padding: 100px;
display: flex;
justify-content: center;
z-index: 9;
transition: 0.4s;
}
.gnb li{
font-size: 26px;
color: #111;
padding: 10px 0;
}
.gnb_btn.active + .gnb{
right: 0;
}/*해당 클래스에 엑티브가 들어갈때 .gnb는 이런 속성을 넣는다.*/
ㅛ