19. Footer 하단 고정 + TS & Styled-Components props 변수 사용 & div 겹치기

1. Footer를 body 컨텐츠 크기에 상관없이 하단에 고정

position:fixed;
bottom:0;
left: 0;
right: 0;

2. TS + Styled-Components props 변수 사용

• 컴포넌트의 기본 margin값을 상수로부터 불러오고,
  일부 수정할 필요가 있을 때 밖에서 props로 변경하기를 원할 경우 다음과 같이 작성한다.

//Bindings.ts
type BindingType = {
margin?: string; (1) 
};

export const Horizontal = styled.div<BindingType>` (2) 
.
.
.
margin : ${(props)=> props.margin || DEFAULT.MARGIN} (3) 
`

• (1) type을 명시하고, ?를 넣어 값을 넣지 않아도 에러가 발생하지 않게 한다.
• (2) type을 제네릭으로 적용한다.
• (3) 밖에서 margin 값을 입력하지 않으면 DEFAULT.MARGIN값을 적용한다.

//Menubar.tsx
export const Menubar = () => {
.
.
return (
	<>
    	<Horizontal margin={'0'}> ... </Horizontal> (4)
	</>
  )

} 

• (4) DEFAULT.MARGIN값이 아닌 다른 margin 값을 주고싶을 때 props로 적용해주면 된다.

3. div 겹쳐서 표현하기

그림과 같이 section frame에 HOT 아이콘을 겹쳐서 컴포넌트로 만들고 싶었다.
겹치기 위해서는 position: absolute를 사용해야 하는데, 부모 컴포넌트를 지정하는 것이 중요해서 다음과 구조로 컴포넌트 구조를 만들었다.
(부모 컴포넌트를 position:relative로 지정하지 않으면, body 전체를 기준으로 position:absolute된 자식이 움직여서 뷰사이즈가 달라질 때마다 자식의 위치가 변경된다.)

//Section.tsx
export const HotSection = () => {
	return (
      <>
      <HotSectionFrame>     --> (1)
        <HotTitle />        --> (2)
      </HotSectionFrame>
      </>
    )}

• (1) 밑에 깔리는 section frame : 부모 컴포넌트
• (2) 위에 올라가는 HOT 아이콘 : 자식 컴포넌트