20220126_TIL : React layout

🤷🏻‍♀️ 모든 페이지에 동일한 내용을 적용시키자.

오늘은 웹페이지를 구현해내면서 페이지마다 동일한 구조를 가지고 있을 때 작업을 수월하게 하기 위한 레이아웃 컴포넌트 구성을 배웠다.

하나의 페이지에서 메뉴와 상단 슬라이드 등 레이아웃이 대부분 페이지에 동일하게 적용된다고 했을때, 구성마다 컴포넌트를 만들어 메인 index.tsx 에 적용시키는 방법을 배웠다.

각 개별요소 (Header,Footer) 등 중복된 내용은 다시 해당 폴더 index.js에 코드를 작성하고, index파일 내에서 스크립트나 JSX를 container/presenter로 다시 나눠서 관리한다.

🤷🏻‍♀️ 제외하고 싶은 컴포넌트는 ?

• 페이지에 적용하지 않을 컴포넌트가 있을 수 있으니 변수를 지정하고 직접 주소를 기입하거나
• 페이지 주소는 Router.asPath 로 현재 위치의 주소를 알 수 있으니 includes메서드를 이용해 제외시키는 방법도 있다.

👩🏻‍💻 오늘의 TIL

-컴포넌트 연결과 @emotion 사용에 대해서 충분히 익혀야 할 것 같다.
-Container / Presenter Pattern 과 비슷하게 코드를 짤수록 나누고 연결할 파일이 많아지겠다. 파일간 혼동 주의 ⭐️
-앞으로 자주 쓰일 " React-slick " 정리해둘 필요가 있겠다.