✅ 증가 및 감소 버튼 적용하기

import React, { Component } from 'react';

class Box1 extends Component {
  render(props) {
    return (
        <div className="box">
          Box{this.props.index}
          <p>{this.props.name}</p>
        </div>
    );
  }
}

export default Box1;

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

▶ 여기까지는 이전에 했던 설정과 같다.

import logo from './logo.svg';
import './App.css';
import Box1 from './component/Box1';
import {useState} from "react";

function App() {
  // let counter = 0;
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);
  const increase = () => {
    setCounter(counter + 1);
    // console.log("counter는 ", counter);
  }
  const decrease = () => {
    setCounter(counter - 1);
    // console.log("counter는 ", counter);
  }
  return (
    <div>
      <Box1 name="한국" index="1"/>
      <Box1 name="미국" index="2"/>
      <Box1 name="중국" index="3"/>

      <div>{counter}</div>
      <button onClick={increase}>증가!</button>
      <button onClick={decrease}>감소!</button>
    </div>
  );
}

export default App;

▶ 연산의 흐름은 다음과 같다.

1. 증가 버튼을 누르게 되면, increase 함수로 가게 된다.
2. 함수 안에 있는 setCounter(기존 변수 연산) 는 기존 변수 = 기존 변수 연산 과 같은 맥락이다.
3. 해당 함수는 const[변수명, setCounter] = useState(0) 에서 적용 되는 것인데, useState()는 초기화값이다.
4. useState(0)은 import {useState} from "React"를 설정해야 사용 가능하다.

✅ 에어비엔비 관련 실습 프로젝트 생성

설치과정

1. npx create-react-app proj3 프로젝트 생성
2. cd proj3 생성 후 해당 디렉토리로 이동
3. npx -p storybook sb init 스토리북 초기화 및 생성
4. npm run storybook 스토리북 실행

그리고 스토리북 관련해서 실습을 하는데... 사실 코드 일일이 어떤 역할을 하는지 잘모르겠다. 그래서 따로 공부를 해야할 것 같다.

☑️ Text StoryBook

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,
};

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 StoryBook

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}
        />
        {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;

import React, { Component } from 'react';
import Input from "./Input";

export default{
    title : "Input",
    component : Input,
};

export const label = () => <Input name="name" label="이름 : "/>;

결과물

아까도 언급했지만 역시나 코드를 일일이 이해하기에는 아직 버거운 감이 없지않아있다. 수업도 단 4일 밖에 안하기 때문에, 빠르게 진도를 나가려다 보니까 중간에 배워야할 기본적인 공부에 대한 설명이 좀 부족했다. 그래서 따로 공부를 좀 해야 할 것으로 생각이 든다.