0627

import './App.css';
import {useState} from "react"; //상태관리 함수 추가

function App() {
  // let counter = 0; 기존 방법으로 값을 변경, 리액트에서 사용X
  // counter = counter + 1; 기존 방법으로 값을 변경, 리액트에서 사용X 
  const [counter, setCounter] = useState(0);
  const increase =()=>{
    setCounter(counter + 1);
  };
  const decrease =()=>{
    setCounter(counter - 1);
  };
  return (
    <div>
      <div>{counter}</div>
      <button onClick={increase}>증가 버튼</button>
      <button onClick={decrease}>감소 버튼</button>
    </div>
  );
}
export default App;

에어비앤비 디자인 시스템 따라하기

Export default {
Title : 스토리북에 올릴 component 폴더 계층 구조,
Component : 스토리를 만들 컴포넌트 이름
}
Export const 스토리이름 = () => 해당스토리에서 테스트할 인자가 담긴 컴포넌트

Text.jsx

import React, { Component } from 'react';
import PropTypes from "prop-types";
export function Text({children, color, italic, underline}){
 const style={
     color : color,
     fontStyle : italic? "italic" : "normal",
     textDecoration : underline? "underline" : "none",
 };
 return<span style={style}>{children}</span>;
};
Text.PropTypes = {
 children : PropTypes.string.isRequired,
 color : PropTypes.string,
 italic : PropTypes.bool,
 underline : PropTypes.bool,
};
Text.defaultProps = {
 color : "black",
 italic : false,
 underline : false,
};

Text.stories.js

import React, { Component } from 'react';
import { Text } from './Text';
export default{
 title : "Text",
 component : Text,
};
const TEST_TEXT = "Story Text Test";
export const Default = ()=><Text>{TEST_TEXT}</Text>;
export const Red = ()=><Text color="red">{TEST_TEXT}</Text>;
export const Italic = ()=><Text italic>{TEST_TEXT}</Text>;
export const Underline = ()=><Text underline>{TEST_TEXT}</Text>;

Input.jsx

import React, { Component } from 'react';
import PropTypes from "prop-types";
class Input extends Component{
 constructor(props){
     super(props);
     this.setRef = this.setRef.bind(this);
     this.handleChange = this.handleChange.bind(this);
 }
 handleChange(e){
     const{name, onChange} = this.props;
     if(onchange){
         onChange(name, e.target.value);
     }
 }
 componentDidMount(){
     if(this.props.autoFocus){
         this.ref.focus();
     }
 }
 componentDidUpdate(){
     if(this.props.autoFocus){
         this.ref.focus();
     }
 }
 setRef(ref){
     this.ref = ref;
 }
 render(){
     const {errorMessage, label, name, value, type, onFocus} = this.props;
     return(
         <label>
             {label}
             <input>
                 id = {"input_${name}"}
                 ref = {this.setRef}
                 onChange = {this.handleChange}
                 onFocus = {onFocus}
                 value = {value}
                 type = {type}
             </input>
             {errorMessage && <span className="error">{errorMessage}</span>}
         </label>
     );
 }
}
Input.PropTypes = {
 type: PropTypes.oneOf(["text", "number", "price"]),
 name: PropTypes.string.isRequired,
 value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 errorMessage: PropTypes.string,
 label: PropTypes.string,
 onChange: PropTypes.func,
 autoFocus: PropTypes.bool,
}
Input.defaultProps = {
 onChange: () => {},
 onFocus: () => {},
 autoFocus: false,
 type: "Text",
}
export default Input;