돔알못이라 무언가 만드는게 너무너무너무 힘들다…
js에서도 정말 힘들었던 게 함수를 만드는 부분이었는데, react로 넘어오니까 더 어려워 죽겠다 ㅋㅋㅋㅋㅋㅋㅋ
햄버거 메뉴 버튼을 클릭하면 사이드바가 나오는 기능을 구현하고 싶었는데
완성하기 까지 우리에게 꼭 필요한 것들이 있다.
바로바로 삽질…ㅋㅋㅋㅋㅋㅋ 이틀동안 충분히 머리 아팠던 것 같아서 결국은 예리 멘토님께 질문을 해서 알아냈다!
일단 나의 코드를 보자면…
<div className="home_container">
<>
<Navbar />
</>Home Component에 Navbar라는 Component를 불러오고.. 이 Navbar Component에 들어갔을 때 그제서야 Menu라는 이름의 sidebar component를 부르는 형태이다. 아래는 메뉴 컴포넌트 코드!
class Menu extends React.Component {
render() {
return (
<div className="menu_container">
<ul>
<li>Home</li>
<li>About</li>
<li>Recipes</li>
<li>Food News</li>
</ul>
</div>
);
}
}
자.. 이제 다시 Navbar Component로 돌아가서
내가 어떤 어떤 삽질을 했는지 알아보자!
import React from "react";
import Menu from "../../Pages/Menu/Menu";
import "./Navbar.scss";
class Navbar extends React.Component {
constructor() {
super();
this.state = { };
}
// openMenu = () => {
// return (
// <div className="menu_container">
// <ul>
// <li>X</li>
// <li>Home</li>
// <li>About</li>
// <li>Recipes</li>
// <li>Food News</li>
// </ul>
// </div>
// );
// };
// closeMenu = () => {};
render() {
return (
<div className="nav_container">
<nav className="nav_bar">
<div className="menu_wrap">
<img
className="menu_btn"
src={require("../../img/menu_btn.png")}
alt="menu_btn"
onClick={this.openMenu}
// onClick={(this.menu_container.style.overflow = "visible")}
// onClick={(this.menu_container.style.left = 0 + `px`)}
// onClick={this.openMenu}
// onClick={this.openMenu}
/>
</div>
<div className="logo_wrap">
<img
className="logo"
src={require("../../img/logo.png")}
alt="logo"
/>
<h1>Wooridoori.com</h1>
</div>
<div className="login_wrap">
<img
className="login_btn"
src={require("../../img/chef.png")}
alt="login"
/>
</div>
</nav>
</div>
);
}
}
export default Navbar;일단 해결한 코드는 아래에서 공개 ㅋㅋㅋ
render 전에 메뉴 만드는 함수를 Navbar에서 실행 시킬까도 해보고.. 메뉴 컴포넌트 자체를 불러오는 것도 생각해보고… 아니면 아예 화면 저~ 구석에 띄워놨다가 버튼 누르면 left 값을 0으로 해주는 식의 방식도 해봤는데 도저히 풀리지가 않았다 ㅠㅠ
여러 가지 방법 중에 클릭시 메뉴 컴포넌트를 불러오는 함수를 작성하기로 해보았다!
state 초기값 세팅
constructor() {
super();
this.state = {
isOpen: false
};
}React에서 가장 처음 실행되는게 바로 컨스트럭터 안의 것들인데, 우리는 state의 처음 값을 설정해 주어야 한다. 객체 형식으로! 클릭 때마다 isOpen 함수가 false에서 true로 번갈아가며 바뀌게 하기 위해 초기 값을 false로 설정했다.
openMenu 함수 설정
openMenu = () => {
if (this.state.isOpen === false) {
this.setState({
isOpen: true
});
} else {
this.setState({
isOpen: false
});
}
};이 함수는 랜더 전에 작성되어야 한다. 너무 충격적이었던게 아직도 state가 친숙하지 않다는 점.. ㅠㅠ 아냐.. 하지만 난 해낼거야! 할 수 있어!!!!!!
여튼… setState() 함수로 설정값을 업데이트 한다는 것은 알았으나, 저렇게 조건문 안에 들어갈 수 있다는걸 몰랐다 ㅋㅋㅋㅋㅋ
와우… 이런 식으로 조건을 줄 수 있는 거였다니!!
onClick 함수 설정
그러고 나서 버튼에 onClick 함수를 달아준다 onClick={this.openMenu} 요렇게.
근데 이렇게만 하면 실행이 되지 않는다. 왜냐?
함수 실행은 되겠지만, isOpen이 true가 되었을 때 메뉴 컴포넌트를 부르게 하는 코드를 작성하지 않았기 때문!
그래서 내가 만든 menu_wrap이라는 클래스에 또 다시 조건을 추가해준다.
{this.state.isOpen === true ? <Menu /> : null}
true면 Menu 컴포넌트를 부르고, 아닐 경우 그냥 null을 넣어주면 완성!
이렇게 간단하게 해결될 문제였는데 넘ㄴ ㅏ충격인 것…☆
그리하여 완성된… 미완의 사이드 바
사이드 바 물론 예쁘게 하고 싶지만… 지금 당장은 다른 거 할 게 넘나 많은 것! 디자인은 다음주의 내가 하고 있겠지.. 현재의 나는 기능구현과 css 공부에 충실하고자 한다
정말 안되면… 라이브러리를 쓰는 방법도 ㅋㅋㅋㅋㅋㅋㅋ 1차 프로젝트 때 라이브러리 쓴 사람은 2차 때 못 쓰는 조건이 있으니깐 지금 많이 많이 쓰고 추석땐 라이브러리 없이 구현하는 방법을 공부해야지! 화이팅 아자아자