[팀프로젝트] Lush clone

▶︎ 메인페이지 헤더 - 메뉴, 마이페이지아이콘

구현기능

• 드롭메뉴 (마우스 이벤트)

Header.js

---

this.state = {
	  isDropdownOpen:false,
	}

---

  handlerDropdownOpen = () => {
    const { isDropdownOpen } = this.state;
    this.setState({
      isDropdownOpen: !isDropdownOpen,
    });
  };

---

1. 마우스를 올렸을 때, 안올렸을 때 값이 바뀌어야 하니 state,setState 설정

---

render() {
  <Menu onMouseEnter={this.handlerDropdownOpen} />
  {isDropdownOpen && <DropMenu />}}

---

2. 메인메뉴 컴포넌트에 마우스이벤트 props로 전달
   조건이 참인 경우(isDropdownOpen:true)에 드롭메뉴가 화면에 구현되도록 조건부렌더링설정

Menu.js

---

  render() {
    const { onMouseEnter } = this.props;
    return (
      <div className="menu" onMouseEnter={onMouseEnter}>
        {MENU_LIST.map(mainmenu => {
          const { id, menu, menuLink } = mainmenu;
          return (
            <ul key={id}>
              <li key={id}>
                <Link to={menuLink}>{menu}</Link>
              </li>
            </ul>
          );
        })}
      </div>
    );
  }

---

3. 메뉴컴포넌트에서 마우스를 올렸을 때 드롭메뉴가 나오도록 마우스이벤트지정
   "마이페이지아이콘에도 동일하게 적용"

▶︎ 메인페이지 헤더 - 검색창

구현기능

• 검색창팝업 (클릭 이벤트)

Header.js

---

this.state = {
	  isSearch:false,
	}

---

  handelerSearch = () => {
    const { isSearch } = this.state;
    this.setState({
      isSearch: !isSearch,
    });
  };

---

1. 클릭했을때 검색창이 렌더링되도록 state값 설정

---

	render() {
	<li className="menuIconsList" onClick={this.handelerSearch}>
	  <i className="fas fa-search" />
	</li>
        {isSearch && <Search />} }

---

2. 검색 아이콘에 클릭이벤트 설정
3. 조건이 참인 경우(isSearch:true)가 될 때마다 search창 나오도록 조건부렌더링설정

🔺 코드리뷰

구조분해할당
- map함수의 매개변수(parameter)도 반복이 되기 때문에 구조분해할당을 할 수 있다.
- 구조분해할당으로 가독성이 높아졌다.

Position속성
- 드롭메뉴나 검색창이 화면에 렌더링될 때, 메인과 푸터가 밑으로 밀려나지 않도록 부모(드롭메뉴를 감싸고 있는)에 'position:relative', 자식(드롭메뉴)에 'position:absolute' 'width:100%' 속성값을 주었다.

🙋🏻‍♀️Today, 뿌듯한 결과물!

---

---

처음에 header 브랜치에서 search페이지쪽까지 구현하는 바람에 순간 멘붕왔었다..ㅠㅠ 팀원들과 분명 페이지마다 브랜치 만들어서 작업하기로 했었는데ㅠㅠ..
그래서 결국 멘토님에게 조언을 구하러 갔었고, 종택멘토님께서 git checkout 에는 브랜치 들어가는 기능말고 브랜치 간에 파일 옮길 수 있다고 알려 주셨다.

덕분에 브랜치를 만들고 search파일을 제대로 된 브랜치로 옮겼다.
어려웠던 점은 이벤트!!!
마우스호버로 해당태그에서 단순한 스타일 변화를 주는 건 할 수 있겠는데 마우스호버를 통해 다른컴포넌트를 연결하는게 도통 이해가 안됐다...ㅠㅠ
당일 조건부렌더링 세션이 있었고, 들으면서 적용하면 되겠다 했는데... 정말 쉽지 않았다..
조건이 참인 경우, 실행될 로직에 그 컴포넌트만 넣으면 그 컴포넌트가 렌더링되는 것이었다.

---

render() {
  <Menu onMouseEnter={this.handlerDropdownOpen} />
  {isDropdownOpen && <DropMenu />}}

---

render() {
  <li className="menuIconsList" onClick={this.handelerSearch}>
    <i className="fas fa-search" />
  </li>

  {isSearch && <Search />} }

---

뭔가 답은 쉬운데 해보지 않았던 부분이라 생각해 내기가 어려웠다.
배우면 그래도 금방 잘 써먹어서 바로 마이페이지에도 드롭메뉴 만드는 것에도 적용했다.

배운 것을 다시 적용하면서 구현할 때는 너무너무 재밌다.!
배운 것을 이해하기까지가 시간이 좀 걸린다는 점!