2022-06-27
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>
);
}
실행을 시켜보면 버튼이 제대로 동작하지 않는다. 이 코드는 리액트와 js의 차이점을 알려주기 위함이다.
리액트에서는 이런 증가하는 함수들을 관리하는 유용한 도구들이 있다. 즉 State
를 사용하는데,
import{useState} from "react";
로 불러온다.
const [counter, setCounter] = useState(0);
setCounter은 값을 저장할 변수, counter는 함수
감소하는 함수는 새로운 함수이므로 아래를 추가작성한다.
const decrease =()=>{
setCounter(counter - 1);
}
import Box1 from './component/Box1';
import {useState} from "react";
function App() {
//let counter = 0; //기존 방법으로 값을 변경했을 때 실행이 안되는 것을 확인
const [counter, setCounter] = useState(0);
const increase =()=>{
setCounter(counter + 1);
//counter = counter + 1; //기존 방법으로 값을 변경했을 때 실행이 안되는 것을 확인
}
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>
);
}
컴포넌트 단위의 UI 개발 도구이다.
실제 웹 어플리케이션 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능하다.
데모용 코드를 작성하는 데 도음을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편리하게 공유하는 도구로 활용된다.
1) npx create-react-app proj3(프로젝트이름)
으로 새 프로젝트 디렉터리를 만든다
2) cd proj3
로 실행할 해당 디렉터리에 접근한다
3) npx -p storybook sb init
스토리북을 설치
4) npm run storybook
실행
1) proj3->src 폴더 안에 component라는 새 폴더를 만든다
2) component 폴더에 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,
};
3) 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_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) 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="이름 : "/>;
Webpack에서 꼬였는지, 어디에서 꼬였는지 터미널에서 npm run storybook
을 입력해도 실행이 안된다
node.js까지 삭제하고 다시 다운 받을 예정
+++
전부 삭제하고 다른 드라이브 옮겨서 처음 nvm 설치부터 해보아도 해결이 안 된다.
프로그램 구동시키는 환경을 이해하는 것도 필요할 것 같다. 그냥 따라가서 깔기만 하면 왜 이렇게 됐는지 이해하기 어렵다.