React-실습

1.버튼 클릭시 숫자 증가하기

값을 바꾸고자 할때 state사용

fuction App() { 
let counter=0;
const increase =()=.{
conter= conter +1;
};
return (
<div>
<div>{counter}</div>
<button onClick={increase}>클릭!</button>
</div>
);    color: color,

}
import {useState}from "react";

function App(){
const [counter,setCounter] =useState(0);
const increase =()=>{
set Counter(counter +1);
};
const decrease =()=>{
setCounter(counter-1);
};
return (
<div>
 <div>{counter}</div>
 <button> onClick={increase}>증가 버튼</button>
 <button> onClick={decrease}>감소 버튼</button>
 </div>```
> );

react에서는 기존 대입 연산자 적용이 안된다(counter=counter+1)
리엑트훅을 사용하기 위해 import추가
초기값도 같이 정해주기에 let counter=0이 필요없다.

2.에이비앤비 디자인 시스템 따라하기

1.스토리북(storybook):UI컴포넌트
개발도구
2.공통적으로 사용될 컴포넌트를 팀원들과편리하게 공유하는 도구로 활용
3.로직이 복작하지가 않다.
4.스토리에 등록되어 있는 컴포넌트들을 조합해서 사용 가능하다.

실습 text컴포넌트 작성 및 story연결
1.컴포넌트 만들기
2. 경로 src-component-Text.jsx

import React, {Component}from 'react';
import Proptypes from "prop-types";

//childeren 객체를 받아서 색,글씨체, 밑줄을 적용해 본다.
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 이나 underline은 참, 거짓만 있으면된다
 italic :PropTypes.bool,
 underline : PropTypes.bool,
 };
 Text.defaultProps={
 color : "black",
 italic: false,
 underline :false,```
 }```

2.스토리 북에 연결

component-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_TEST}</TEXT>;
 export const Red =()=><Text color="red">{TEXT}</TEXT>;
export const italic ()=><Text italic>{TEST_TEXT}</Text>;
 export const Underline ()=><Text Underline>{TEST_TEXT}</Text>;```
 

스토리 기본구조

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

input 컴포넌트 작성 및 story 연결
텍스트,함수,배열, 객체형 다양한 컴포넌트가 많다.

1. 컴포넌트 만들기
   src-component-input.jsx

   import React,{ Component }from "react";
   import PropTypes from "prop-type"; 
   
   class Input extends Component {
   constructor(props) {
   super(props); 
   this.setRef=this. setRef.bind(this);
   this.handleChange = this.handleChage.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();
   }
   }

   스토리 북에 연결
   component-input.stories.js

 import React, { Component} from'react';
 import Input from "./input";
 export default {
 title : "input",
 component : Input,
 };
 export const label= () => <Input name="name" label="이름 : "/>;
 

2)학습중 어려웠던 점
text 냉용이 storybook에 나오지 않아 어려웠다.
3)
해결방법
코드를 복사해서 붙여넣으니까 실행결과가 나왔다.
4)학습소감
새로운 학습을 하여 흥미로웠지만 실행이 안될때도 있어 문제점을 찾느라 바빴다.