[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 34회차 미션

outline, fullWidth props 설정

이전에 작업하던 프로젝트를 사용하여 Button 컴포넌트의 props로 outline과 fullWidth를 넣어준다

이 값들이 true, false 인지에 따라 조건부로 스타일이 들어갈 수 있게 버튼 className안에는 객체로 추가해준다. 이 값이 True라면 outline이라는 값이 들어가게되고 false라면 outline이 안들어가게 된다. 이에대한 defaultProps는 따로 설정하지 않아도 된다. 만약 값이 없다면 undefined가 되고 undefined라면 className에서 처리하지 않기 때문이다.

//Button.js
import React from "react";
import classNames from "classnames";
import "./Button.scss";
function Button({ children, size, color, outline, fullWidth }) {
  return (
    <button
      className={classNames("Button", size, color, {
        outline,
        fullWidth,
      })}
    >
      {children}
    </button>
  );
}
Button.defaultProps = {
  size: "medium",
  color: "blue",
};

export default Button;

그리고 이제 style을 수정해준다.

outline 옵션을 지정할 때에는 blue,gray, pink 색상 별로 outline을 지정해줄 수 있지만 @mixin을 사용해서

@mixin button-color($color) {
  background: $color;
  &:hover {
    background: lighten($color, 10%);
  }
  &:active {
    background: darken($color, 10%);
  }
  &.outline {
    color: $color;
    background: none;
    border: 1px solid $color;
    &:hover {
      background-color: $color;
      color: white;
    }
  }
}

fullWidth의 경우에는 width를 100% 차지하게 하면되고, fullWidth가 붙어있게되면 margin-left 대신 margin-top을 설정해주면 된다.

//App.js
<div className="buttons">
        <Button size="large" outline={true}>
          button
        </Button>
        <Button color="gray" outline={true}>
          button
        </Button>
        <Button size="small" color="pink" outline>
          button
        </Button>
</div>

를 Button에 적용시켜준다. outline={true} 의 경우에는 outline 만 넣는것과 같은 효과를 갖는다.

//App.js
<div className="buttons">
        <Button size="large" fullWidth>
          button
        </Button>
        <Button size="large" color="gray" fullWidth>
          button
        </Button>
        <Button size="large" color="pink" fullWidth>
          button
        </Button>
</div>

fullWidth 도 마찬가지로 적용시켜주고 렌더링된 페이지를 확인해본다

여기까지가 버튼의 스타일링이다.

버튼에 ...rest props 전달하기

만약 App컴포넌트 최하단에서 버튼하나에 onClick 이벤트를 등록한다고 가정해보자. 버튼이 클릭되면 console.log 이벤트를 발생시키게끔 작성을 해도 브라우저에서는 작동하지 않는다. 왜냐하면 Button 컴포넌트에 props로 onClick을 받아와서 button에 넣는 작업을 해줘야한다.

예를 들어 onMouseMove 이벤트를 등록한다고 가정해보자. 이것도 마찬가지로 Button에서 onMouseMove를 가져와서 똑같이 설정해줘야한다.

하지만 모든 이벤트에 대해 받아와서 설정해주는 것이 조금 불편할 수 있다.

이런 불편함을 해결해줄 수 있는것이 ...rest 이다

우선 방금 props로 넣었던 onClick과 onMouseMove를 props에서 지워주고, ...rest를 추가해준다. 그리고 <button 내부에 {...rest}를 추가해 준다

그럼 앞에 정의된

function Button({ children, size, color, outline, fullWidth, ...rest }) {
  return (
    <button
      className={classNames("Button", size, color, {
        outline,
        fullWidth,
      })}
      {...rest}
    >
      {children}
    </button>
  );
}

children~fulldWidth를 제외하고 나머지 props들을 받아오게된다.

className이 겹치지 않게 작성하는 팁

1. 컴포넌트의 이름을 고유하게 지정

   컴포넌트의 이름을 단 하나만 존재할 수 있게 지정해준다.

2. 최상위 엘리먼트의 클래스 이름을 컴포넌트 이름과 똑같게

3. 그 내부에서 셀렉터 사용

   예를 들어

    .UserProfile{
        .user{
            img{
            }
        }
    }
    .about{}
    }

   상단의 .UserProfile은 컴포넌트 이름과 똑같이 작성해주고

   내부에서 css selector를 사용해서 class를 작성해준다.

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스