Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기

 

styled-components 로 개발하며 첫 난관은 자식 컴포넌트에 스타일을 적용하는 것이었다.

pure css 로는 필요한 div 태그에 클래스를 만들었는데, 이제 이 방식은 통하지 않는다.

 

부모 컴포넌트에서 자식에만 있는 속성을 변경하고자 한다. 하지만 자식은 공통컴포넌트라 그 안에서 직접적인 수정이 어렵다.

결국 자식을 건들지 않고, 부모 쪽에서  구체적인 속성 값을 줘서 해결해야 하는 것이다.

(나의 경우, 간단하게도 자식컴포넌트의 패딩값을 변경하는 거였는데, 이 쉬운 것을 styled-components 초짜가 하려니 한참 뱅뱅 돌았다.)

 

자, 그럼 css 를 물려주러 떠나보자.

 

---

 

Styled-components(3) 자식 컴포넌트에  커스텀 css  props로 전달하기 

 

자식 컴포넌트에 스타일을 먹이는 두 가지 방법 이 있다. 공통점은 css를 props로 물려주는 것이다.

- 첫번째는, custom style 통째로 넘기기

- 두번째는, 필요한 속성만 낱개로 넘기기

 

 

부모컴포넌트에서는 custom css 를 만들고, 자식 컴포넌트에 props로 넘겨주자.

자식컴포넌트에서는 props를 받아 필요한 styled-components 안에 넣어주자.

 

부모 컴포넌트(ConfirmPage.tsx)

여기서는 구체적으로 적용할 css 를 만들어주자. 그리고 자식한테 넘겨주는 게 끝이다.

 

import styled, { css } from 'styled-components'; // css 임포트 해주기

 

모달 컴포넌트 안에 물려줄 css 속성들을 넣어주자.  width 와 customModalStyle 을 넘겨줄 것이다.

<Modal
  title={modalTitle}
  close={() => closeModal()}
  width={300}			      // 낱개로 넘길 때 (숫자로 바로)
  customModalStyle={customModalStyle} // 통째로 넘길 때
/>

 

const customModalStyle = css` // 통째로 넘길 때 커스텀할 css 정의
  padding: 30px 50px;
`;

 

 

자식 컴포넌트(Modal.tsx)

 

여기서는 props 들을 유동적으로 받을 수 있게 세팅을 열심히 해줄 것이다.

import styled, { CSSProp } from 'styled-components'; // CSSProp 임포트해주기

 

위에서 넘겨준 props 들을 인터페이스 안에 타입으로 선언해주자

interface ModalProps extends StyledModalProps { // 스타일 프롭을 extend 해줘야 한다
  title: string;
  content: string;
}

interface StyledModalProps {  // 인터페이스 안에 prop 으로 심어주기
  height?: number;
  width?: number;	      // 낱개로 넘길 때 
  customModalStyle?: CSSProp; // 그룹으로 넘길 때
}

 

모달 컴포넌트를 감싸는 최상단 <StyledModalWrapper> 컴포넌트에 css props들을 넣어주자. 

// props 바로 사용할 수 있도록 변수이름으로 정의해주기
const { title, width, height, customModalStyle } = props;

<StyledModalWrapper		      // 모달컴포넌트를 styled-component로 감싸주기
  height={height}
  width={width}			      // 물려받은 width 넣어주기
  customModalStyle={customModalStyle} // 물려받은 customModalStyle 넣어주자 
  onClick={handleClickClose}
>
  <div className={'modal'}> 	      // 클래스도 정의해주자. 여기다가 적용할 것이다.
    이번주 안내 사항 알려드립니다.
  </div>
</StyledModalWrapper>

 

const StyledModalWrapper = styled.div<StyledModalProps>` // 타입에 인터페이스 이름 넣어주시고,
  position: fixed;
  top: 0%;
  left: 0;
  
  .modal {						 // 하위 엘레멘트인 modal 클래스에 내용을 적어주자
    height: ${({ height }) => (height ? `${height}px` : 'max-content')};
    width: ${({ width }) => (width ? `${width}px` : 'max-content')};	  // 동적으로 css 삽입
    ${({ customModalStyle }) => (customModalStyle && customModalStyle)};  // 동적으로 css 삽입
  }
`;

 

 

느낀점 

부모만 건들고 공통컴포넌트인 자식은 건들 수 없다. 그래서 간접적으로 자식에게 빙빙 돌려 말해주는 느낌이었다.

셋업할 때는 돌아가는 것 같아 힘든데, 나중에 유지보수가 좋을 것 같다는 생각이 들었다.

근데 또 처음 접한 사람들은 적응시간이 걸릴 것 같다. (뭐든 그냥 막 쉬운건 없다.)

그전까지 깊은 고민을 못하고 닥친 일을 단순히 쳐내기만 한 것 같다.

한주동안 직접 건들여 보니 공통 컴포넌트에 대한 실무적 개념이 생기는 것 같다.