[React] 최소단위 컴포넌트 만들기 - Image

* 기본 뼈대코드

import React from "react";

import styled from "styled-components";

 

const Image = (props) => {

 

       return (

         <React.Fragment>

 

         </React.Fragment>

       )

}

 

Image.defaultProps = {

  

}

export default Image;

 

1. Image.js 

→ 기획서에 바탕으로 반복되어 사용되는 이미지( 동그라미, 네모 )모양에 따라 적용되도록 최소단위 컴포넌트를 만들어보자.

 

2. 기본스타일잡기

Image.defaultProps = {

      shape: "circle",

      src: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",

      size: 36,

};

→ 기본 모양, 기본 이미지, 크기 등을 설정해준다.

 

3. props로 스타일 받아오도록 해주자. (이후 넘겨줄 스타일)

const {shape, src, size} = props;

 

 

4. styled-components로 스타일을 만들고 sytles 선언해주자.

const ImageCircle = styled.div`

      --size: ${(props) => props.size}px;

       width: var(--size);

       height: var(--size);

       border-radius: var(--size);

      // 원을 만들때에는 가로, 높이 , border-raidus 모두 동일한 사이즈를 적용해주어야하는데, 이때 변수를 사용하면 직접 숫자를 입력

          하지 않아도 간단하게 적용이 가능하다. 

      // --size 로 선언함으로써 변수를 사용하여 다른곳에서 참조하여 사용할 수 있다. (--size라는 변수가 생긴것이다.)

      background-image: url("${(props) => props.src}");

       background-size: cover;

       margin: 4px;

`;

 

const styles = {

     src: src,

     size: size,

}

sape는 어떠한 모양인지만 구분하는것이므로 styles에는 불필요한 값이므로 src,size만 적어준다.

 

※ Image 최소단위 컴포넌트 적용 (Post.js : Components 폴더)

<Grid is_flex width="auto">

     <Image shape="circle" src={props.src} />

</Grid>

 

5. shap 모양에 따라 리턴해주도록 분기처리 해주자.

if(shape === "circle"){

    return (

       <ImageCircle {...styles}>

       </ImageCircle> )

}

 

if(shape === "rectangle"){

     return (

          <AspectOutter>

               <AspectInner {...styles}></AspectInner>

           </AspectOutter> )

}

 

return (

    <React.Fragment> </React.Fragment>

)

 

※ 참고용 비교 연산자

 

6. rectangle 스타일 잡아주기

→ 웹사이트 크기가 줄어들거나 커지는경우에 맞춰서 네모이미지도 비율을 맞춰주어야한다.

    (div 를 2개를 만들어서 4:3 비율에 맞출 수 있도록)

 

const AspectOutter = styled.div`

width: 100%;

min-width: 250px;

`;

 

const AspectInner = styled.div`

position: relative;

// 상대적으로 postion이 적용되도록 준다.

padding-top: 75%;

// 넓이가 100%으로 되어 있으므로 4:3을 맞추기위해 75%로 적용

overflow: hidden;

// 영역보다 흘러넘치는 애들은 다 숨겨버린다.

background-image: url("${(props) => props.src}");

background-size: cover;

//이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정.

   이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정

`;

 

※ Image 최소단위 컴포넌트 적용 (Post.js : Components 폴더)

<Grid>

<Image shape="rectangle" src={props.image_url} />

</Grid>

Post.js 에서 최소단위 컴포넌트를 사용하기위해 import 해주는것을 잊지말자!