[인스타그램클론코딩] #8.2 Search Screen UI Part Two(styled-component 학습)

안녕하세요 강정호입니다.

 

오늘은 인스타그램클론코딩에서 검색창 UI 개발 관련하여 포스팅을 작성 해볼게요.

UI 작성시에는 styled-component를 주로 사용합니다.

 

UserCard.js

UserCard는 아래와 같이 검색했을 때 각 유저의 프로필 사진과, 이름, 팔로잉 버튼을 카드형식으로 보여주는 것입니다.

const Card = styled.div`
    ${props => props.theme.whiteBox}
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
`;

const EAvatar = styled(Avatar)`
    margin-bottom: 15px;
`;

const ELink = styled(Link)`
    color: inherit;
    margin-bottom: 10px;
`;

** ${props => props.theme.whiteBox}

Card 컴포넌트를 호출할 때 부모 컴포넌트의 theme을 props로 받아서 설정하는 것이다.

이 theme은 App.js 에서 <ThemeProvider theme={Theme} > 에서 파라메터로 받아서 가져온 것이다.

styled-components.com/docs/advanced

 

 

 

 

Section.js

/** Section div를 생성 */
const Section = styled.div`
    margin-bottom: 15px;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 160px;
    grid-auto-rows: 160px;
`;