React

개념 장점

페이스 개발에 사용한 기술

공개 소프트웨어

화면 출력에 특화된 프레임워크

컴포넌트를 조립하여 화면 구성

게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual Dom)

버튼 클릭 시 숫자 증가하기

state 사용
특성: 비동기
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>

);
}

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

개념

스토리북(StoryBook): UI 컴포넌트 개발 도구
데모용 코드를 작성하는데 도움을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편하게 공유하는 도구로 활용
구성 단위는 스토리
하나의 UI 컴포넌트는 보통 하나 이상 Story를 가짐

장점

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

실습 이론

• npx create-react-app 프로젝트 디렉터리
• cd 프로젝트 디렉터리
• npx –p storybook sb init
• npm run storybook

폴더구조
• main.js : stories를 위한 config 설정
• preview.js : 모든 story들에 글로벌하게 적용될 포맷 세팅

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

실습

componunt 폴더 생성
파일생성 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 {children}
};

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 = ()=>{TEST_TEXT};
export const Red = ()=>{TEST_TEXT};
export const Italic = ()=>{TEST_TEXT};
export const Underline = ()=>{TEST_TEXT};

Storybook에서 확인할 수 있음

실습2

component 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}
<input
id={"input_${name}"}
ref={this.setRef}
onChange={this.handleChange}
onFocus={onFocus}
value={value}
type={type}
/>
{errorMessage && {errorMessage}}

);
}
}

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;
component input.stories.js
import React, { Component } from 'react';
import Input from "./Input";

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

export const label = ()=>;