REACT 꿀팁

React 꿀팁 1 :  기획서를 보고 미리 컴포넌트 단위로  쪼갠다.

 

React 꿀팁 2: 코드를 작성하기 전, 들어갈 내용을 미리 간단히 구조를 작성해준다.

    <Fragment>
      <div>user profile/username/insert_dt/is_me(edit btn)</div>
      <div>content</div>
      <div>imgae</div>
      <div>comment cnt</div>
    </Fragment>

 

React 꿀팁 3: Props가 안넘어 올 경우를 대비해 Default Props를 설정해준다.

Post.defaultProps = {
  user_info:{
    user_name: "soo",
    user_profile: "",
  },
  image_url: "",
  contents: "토슈",
  comment_cnt: 10,
  insert_dt:"2021-02-27 10:00:00"
};

 

React 꿀팁 4 : React-developer-Tools 크롬 익스텐션 설치하기

넘겨준 props를 간편하게 console을 찍지 않고도 볼 수 있습니다

 

 

Style 꿀팁 1 : Background에 이미지를 넣을 때 가로- 높이 비율 조정하는 법

부모 태그에서 width 값만 지정해줍니다.

const AspectOuter = styled.div`
  width: 100%;
  min-width: 250px;
`

자식 태그에서

padding으로 높이를 지정해줍니다. 4:3 비율이라면 75% 2:1 비율이라면 50% 로 하면 됩니다.

const AspectInner = styled.div`
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  background-image: url(${(props)=> props.src});
  background-size: cover;
`