1) 필기 내용
App.js
//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;
//counter2는 값이 1, 2, 3 증가 변수, setCounter2는 set 함수, useState는 초기값
const [counter, setCounter] = useState(0);
const increase = () => {
setCounter(counter + 1);
//counter = counter + 1
//console.log("counter는 ", counter);
};
const decrease = () => {
setCounter(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;
로 바꾸고, terminal에서
cd proj1
npm start
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
스토리북 : UI 컴포넌트 개발 도구를 통해, 각자 사람들이 공유한 component를 갖고 와서 사용할 수 있음
CRA
npx create-react-app 프로젝트 디렉터리
cd 프로젝트 디렉터리
npx –p storybook sb init
npm run storybook
→ storybook 활성화 완료
src/stories 생성됨
main.js
preiveiw.js 도 함께 생성
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}
/>
{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;
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="이름 : "/>;
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
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>;
1) 중괄호와 소괄호의 대환장파티...
2) 어떤 js를 import하고, export하고 이러한 연계???에서 헷갈림
1) 큰 틀을 먼저 잡자고 강사님께서 항상 말씀해주셨듯이, 틀부터 잡읍시다!
1) 사실,,, 오늘 수업은 쉬는 시간에 취뽀문자를 봐버려서 집중이 거의 안됐다...
2) 이왕 시작했던거, 그냥 끝까지 달려보자!