1. 학습내용

이어서 React 실습을 했다.

import logo from './logo.svg';
import './App.css';
// import TodaysPlan from './component/TodaysPlan';
import Box1 from './component/Box1';
function App() {
  let counter = 0;
  const increase = ()=>{
    counter = counter +1;
  }
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>
      <div>{counter}</div>
      <button onClick={increase}>클릭!</button>
     </div>
  );
}

export default App;

그런데 저렇게 적으면 버튼 이벤트가 발생하지 않는다. 그래서 따로 컴포넌트를 이용해 아래와 같이 써야 한다.

import logo from './logo.svg';
import './App.css';
// import TodaysPlan from './component/TodaysPlan';
import Box1 from './component/Box1';
import {useState} from "react"; //상태관리
function App() {
  // let counter = 0;
  const [counter, setCounter] = useState(0); // useState(0) 은 초기값 주는것
  const increase = ()=>{
    setCounter(counter +1);
    //counter = counter+1; //기존방법으로 값을 변경 
  }
  const decrease = ()=>{
    setCounter(counter -1);
    //counter = counter+1; //기존방법으로 값을 변경 
  }
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>
      <div>{counter}</div>
      <button onClick={increase}>증가 버튼</button>
      <button onClick={decrease}>감소 버튼</button>
     </div>
  );
}

export default App;

컴포넌트 만들시 주의사항
• 컴포넌트 이름은 반드시 대문자로 시작
• 컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시
작하는지 여부
• 소문자로 시작하면 일반 HTML 태그로 분류
• 반드시 첫 글자는 대문자로 함

에어비앤비 디자인 시스템 따라하기
• 스토리북(Storybook) : UI컴포넌트 개발 도구
• 데모용 코드를 작성하는 데 도움을 주고 공통적으로 사용될 컴포넌
트를 팀원들과 편리하게 공유하는 도구로 활용
• 구성단위는 스토리(Story)
• 하나의 UI컴포넌트는 보통 하나 이상의 Story를 가짐

장점
복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발할 수 있습니다.
재사용을 위한 컴포넌트들을 story에서 조합해 테스트할 수 있습니다.
컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴
포넌트들과 동기화할 수 있습니다

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

스토리북 컴포넌트를 npm 명령어를 이용해 다운 받은다음 아래 폴더와 파일들을 만들어 주고 작업했다.

그리고 아래처럼 코드를 작성하고, 띄어 놓았던 스토리북 사이트를 새로고침하니 아래와 같이 나왔다.

2.어려웠던 점 및 해결방안

위의 화면에 자꾸 input태그 옆에 ';'가 자꾸 떠서 어디서 입력되어 있는건지 한참 찾아 해맸다.
보아하니 아래 코드에 ;가 입력되어 글자 취급해 자동으로 출력되었다.

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

또다른 하나는 'ref'라는 단어가 많이 나와 생소해서 따로 구글링을 해보았다.
출처: https://programming119.tistory.com/265

3. 학습소감

스타일을 바꿔보는 스토리들을 만들어 보았다. 아직 js가 익숙하지 않은 상태에서 작성하는게 쉽지는 않았지만, 작동되는 과정이 신기했다.