button 적용

• 클릭 시 색상 변경되는 버튼을 만들기로 했음
• 우선은 목업형식으로라도 보이게끔 하고 싶었는데 잘 안됨
• 결국 아래처럼 적용하였음

  const [checkJs, setCheckJs] = useState<boolean>(false);

        <StackBox>
          {checkJs ? (
            <StackBtn bgColor="#5A9E7A" color="white" onClick={onClick}>
              Javascript
            </StackBtn>
          ) : (
            <StackBtn bgColor="white" color="#5A9E7A" onClick={onClick}>
              Javascript
            </StackBtn>
          )}
        </StackBox>

• 스타일링을 적용하는 법을 해보고있으나 TS적용이 잘 안되 삽질하는 중

• DaleSeo님의 블로그를 보고 따라해보는중이다

  • DaleSeo님의 블로그 좌표

• disable 속성은 boolean 타입

• 버튼 컴포넌트 내의 버튼에도 타입을 정해줘야 했음

• 그걸 모르고 무작정 시도하니 안되었던 것

• 클릭이벤트와 이름도 잘 받아와짐

interface Props {
  onClick: () => void;
  name: string;
}

function Button({ name, onClick }: Props) {
  return (
    <button type="button" onClick={onClick}>
      {name}
    </button>
  );
}

export default Button;

• styled-component의 .button을 사용하면 타입 지정 없이도 인식아 잘된다...ㅜㅜ

const Btn = styled.button``;

function Button({ name, onClick }: IProps) {
  return <Btn onClick={onClick}>{name}</Btn>;
}