sub navigation-> 에 따라 다르게 보여주기
오늘의 집 클론코딩-Navigation bar
우선 지금 생각하면 2개의 subnav컴퍼넌트를 모두 출력 시키고 호버를 어떤곳에 하냐에따라 한쪽에 display:none;이라는 css속성 만으로도 구현 할 수 있다는 걸 알았지만 저는 javascript로 해결해 보았습니다.
코드를 바로 보도록 하자
class Navigation extends Component {
constructor() {
super();
this.state = { communityNavToggle: true };
}
위의 코드에서 state값을 설정해 주었습니다.
우선 default값으로 페이지가 처음 열렸을때는 subnav에 커뮤니티 nav가 나오니 communityNavToggle은 true값을 주었습니다.
필요한 함수값들
바로 코드를 보면서 이해해 보자
toggleSubNav = () => {
this.setState({ communityNavToggle : !this.state.communityNavToggle });
};
우선 지금 생각하면 2개의 subnav컴퍼넌트를 모두 출력 시키고 호버를 어떤곳에 하냐에따라 한쪽에 display:none;이라는 css속성 만으로도 구현 할 수 있다는 걸 알았지만 저는 javascript로 해결해 보았습니다.
코드를 바로 보도록 하자
class Navigation extends Component {
constructor() {
super();
this.state = { communityNavToggle: true };
}
위의 코드에서 state값을 설정해 주었습니다.
우선 default값으로 페이지가 처음 열렸을때는 subnav에 커뮤니티 nav가 나오니 communityNavToggle은 true값을 주었습니다.
바로 코드를 보면서 이해해 보자
toggleSubNav = () => {
this.setState({ communityNavToggle : !this.state.communityNavToggle });
};
toggleGoTrue = () => {
this.setState({ communityNavToggle : true });
};
>위의 코드에서 마우스가 올라갔을때 주고싶은 이벤트를 설정해 주었습니다.
toggleSubNav를 통해서 state값을 false로 만들게 합니다.
toggleGotrue라는 것을 통해서 다시 커뮤니티에 올렸을때 다시 true값으로 주게하였습니다.
## 적용
```js
<button className = "1" onMouseEnter={this.toggleGoTrue}>
커뮤니티
</button>
<button className = "2" onMouseEnter={this.toggleSubNav}>
스토어
</button>
위의 코드를 통하여 커뮤니티라, 스토어 버튼에 호버를 주냐에 따라서 onMouseEnter라는 것을 사용해서 각각의 이벤트를 일어나게 해주었습니다.
project 7일차...
할게 너무 많다 그런데 확실한건 시간가는줄 모르겠고 너무 즐겁다.
시작전 진도가 느리다는 생각에 조금 걱정을 했습니다.
그런데 막상시작하고 나니 너무 재밌고 적당한 긴장감이 너무 좋습니다.
마지막 까지 화이팅해서 이 프로젝트가 끝났을 때 모두가 말로는 표현 못할 각자의 성장을 했을거라 믿어의심치 않습니다 ㅎㅎ 화이팅!!!
Author And Source
이 문제에 관하여(sub navigation-> 에 따라 다르게 보여주기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyj2471/sub-navigation-에-따라-다르게-보여주기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)