<TIL> 0721_React_레이아웃 구조잡기, 폰트 적용, 캐러셀 이미지(배너 react-slick)

01. 레이아웃

▶ 프로젝트 전체의 UI구조를 의미 (=화면 쪼개기)
ex) Header, Navigation, Menu, Footer, Main 등..

▶ 레이아웃만 잘 잡아도 유지보수 쉬움.

▶ 각각의 컴포넌트를 하나의 index.tsx파일에 조립하고, 메인 화면은 {props.children}으로 담아준다.
: {props.children}로 담아준 컴포넌트 내의 자식들은 따로 또 담아주지 않더라도 부모가 {props.children}에 담겨있기 때문에 children이라는 이름으로 자동으로 props되어 넘어간다.

↑ 레이아웃의 기본 구조

↑ 최종적으로 Body영역이 전체 Layout의 children으로 들어가는 것. {props.children}
( Body에 해당하는 모든 컴포넌트 마다 따로 적용하지 않아도 Header, Banner 등이 보여지게 됨. )

• JSX 자체에 style을 적용하는 방법 (html과 같음)
  

  • 전체를 담을 index를 만들고 {props.children}을 해서 _app.tsx와 이어줌.

---

02. 폰트 적용하기

• globalStyle.ts
  : 우리가 만드는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미함. (전체 적용 css )
  : _app.tsx 에 적용해주어야 연동됨.

• 폰트 적용하는 방법

1. 적용시킬 폰트 파일을 public폴더에 저장
2. 소스 경로에 해당 폰트의 경로 설정.
3. font-family 지정
   ( 해당 폰트를 사용하고 싶을 때 font-family로 지정해준 속성, 값만 적용시켜주면 된다. )
   

   ↑ globalStyles 파일에 font-family를 적용시킨 예시

---

03. 캐러셀 이미지 (React-slick)

• 흔히 알고있는 BannerSlider와 같은 의미
• 배너슬라이더 = npm > react-slick` 라이브러리 (terminal 패드에입력-설치 후 사용)