[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (2)

전에 쓴 글 과 연결

[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1) (tistory.com)

[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (1)

내가 참고한 글 

리액트 라우터 2 : navigate, nested routes, outlet (tistory.com)

리액트 라우터 2 : navigate, nested routes, outlet

---

 

컴포넌트 구조화 하기

src/
│
├── components/
│   ├── Header.js
│   ├── Sidebar.js
│   ├── MainContent.js
│   ├── Footer.js
│   └── SearchOverlay.js
│
├── App.js
└── index.js

위와 같이 파일 구조를 잡고, 각 컴포넌트를 별도의 파일로 분리

각 부위들을 컴포넌트로 분리해준다.

---

Header 컴포넌트 만들어주기

Header.js

이렇게 헤더 html 부분만 빼서 옮겨줌.

export 도 해주기.

App.js 로 돌아가기

이렇게 아까 만든 Header 를 import 해준다.

이렇게 </Header> 을 사용해주면 된다.

= Header 부분 html 은 지워주고 사용해주면 됨.

---

왼쪽 사이드바 컴포넌트

function Sidebar(props) {
  return (
    <aside className="sidebar">
      <ul className="category">
        <li onClick={() => props.setSearch(true)}>
          <a href="#">SEARCH</a>
        </li>
        <li
          onMouseOver={() => props.setIsShopHovered(true)}
          onMouseOut={() => props.setIsShopHovered(false)}
          className="dropdown"
        >
          <a href="#">SHOP</a>
          {props.isShopHovered && (
            <ul className="dropdown-content">
              <li>
                <a href="#">for hair</a>
              </li>
              <li>
                <a href="#">for neck</a>
              </li>
              <li>
                <a href="#">for fingers</a>
              </li>
            </ul>
          )}
        </li>
        <li
          onMouseOver={() => props.setIsBoardHovered(true)}
          onMouseOut={() => props.setIsBoardHovered(false)}
          className="dropdown"
        >
          <a href="#">BOARD</a>
          {props.isBoardHovered && (
            <ul className="dropdown-content">
              <li>
                <a href="#">notice</a>
              </li>
              <li>
                <a href="#">q / a</a>
              </li>
            </ul>
          )}
        </li>
      </ul>
    </aside>
  );
}

export default Sidebar;

똑같이 빼주고 export 함.

- props 파라미터로 써주고 { props.작명 } 사용

 

App.js 에 임포트 잊지말기.

 

왼쪽 사이드바 html 지워주고 넣어줌.

 

그리고 props 를 컴포넌트에 해줘야하기 때문에 

컴포넌트 쓴 곳에 가서 props로 보낼 state 작명 먼저 해주기.

<자식컴포넌트 작명={state이름} /> 

해주면 된다.

1) 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
2) 자식컴포넌트 만드는 function 으로 가서  props 라는 파라미터 등록
3) { props.작명 } 사용

 

---

props 헷갈릴 경우

[리액트] 암기할 것 = state / props / 컴포넌트 / UI (tistory.com)

[리액트] 암기할 것 = state / props / 컴포넌트 / UI

컴포넌트 헷갈릴 경우

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 (tistory.com)

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용