당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 코드캠프
  • 알고리즘
  • typescript
  • graphql
  • 코딩 부트캠프
  • React-hook-form
  • 프론트엔드
  • JS
  • 부트캠프
  • javascript
  • react
  • emotion
  • HTML
  • next.js
  • 회고
  • 자바스크립트
  • algorithm
  • 팀플
  • 배포
  • 공통 컴포넌트
  • refreshtoken
  • 팀 프로젝트
  • 배열
  • 프로그래머스
  • CSS
  • 팀프로젝트
  • 리액트
  • 코딩
  • javascrpit
  • ssg

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

프론트엔드✏️/개인공부

공통 컴포넌트 만드는 중

2022. 9. 5. 17:04
728x90
반응형
import './DefaultBtn.scss'

const DefaultBtn = ({
     text = "Button",
     icon = null,
     typeClassName = "",
     sizeClassName = "",
     ...props
}) => {
     return (
          <button
               className={`defaultBtn ${typeClassName} ${sizeClassName}}`}
          onClick={props.onClickButton}
          >
               {icon && <i className={`svg`}>{icon}</i>}
               {text}
          </button>
     )
}

export default DefaultBtn;
const DefaultInput = ({
  text = "기본 Input",
  typeClassName = "",
  sizeClassName = "",
  ...props
}) => {
  return (
    <input
      className={`defaultInput ${typeClassName} ${sizeClassName}`}
      onChange={props.onChangeInput}
      placeholder={text}
    />
  );
};

export default DefaultInput;
728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 개인공부' 카테고리의 다른 글

[공통 컴포넌트,css] select - defaultValue 빈값으로 설정  (0) 2022.09.07
[공통 컴포넌트,css]글자수 체크하는 Input창, x 초기화 버튼 Input, 테두리 겹치는 부분  (0) 2022.09.06
[react-query] 리액트 쿼리  (0) 2022.09.01
[알고리즘] 최소직사각형  (0) 2022.08.20
부트캠프 84일차, 팀 프로젝트 발표날  (0) 2022.08.03
    '프론트엔드✏️/개인공부' 카테고리의 다른 글
    • [공통 컴포넌트,css] select - defaultValue 빈값으로 설정
    • [공통 컴포넌트,css]글자수 체크하는 Input창, x 초기화 버튼 Input, 테두리 겹치는 부분
    • [react-query] 리액트 쿼리
    • [알고리즘] 최소직사각형
    당근먹는하니
    당근먹는하니

    티스토리툴바