06.27 월 리액트 실습1

이재빈·2022년 6월 27일

AI스쿨_JS

목록 보기

15/18

App.js 파일

script는 내용에 포함 하지않음

<script>
function App() {
  // let counter = 0; //기존방법으로 값을 변경
  const [counter, setCounter] = useState(0); //const[변수, 함수] = 초기값
  const increase =()=>{ //increase 함수를 구현
    setCounter(counter + 1);
    // counter = counter +1; //기존방법으로 값을 변경
   
  };

  const decrease =()=>{
    setCounter(counter - 1);
    // counter = counter -1; //기존방법으로 값을 변경
    
  };
</script>
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>

      <div>{counter}</div> {/*버튼을 누룰때마다 증가/감소되는 카운터가 표시됨*/}
      <button onClick={increase}>증가!</button>
      <button onClick={decrease}>감소!</button>
    </div>
  );
}

스토리북 : UL 컴포턴트 개발 도구

데모용 코드 작성시 도움됨, 공통적으로 사용될 컨포넌트를 팀원들과 공유 하는 도구로 활용
구성단위 : 스토리
하나의 UI컴퍼넌트 = 하나이상의 Story
장점 :
복잡한 로직 X, 독립적인 환경 O
재사용을 위한 component들 story에서 조합 및 테스트
component 문서화, 디자인 시스템에 적용해 피그마(UI 디자인툴)의 component들과 동기화

스토리북 설치

npx -p storybook sb init
=> npm run storybook 까지 입력해야 작동

폴더 설명

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

기본 구조

Export default {
	Title : 스토리북에올릴component 폴더계층구조,
    Component : 스토리를 만들 컴포넌트이름
    }

Export const 스토리이름= () => 해당 스토리에서 테스트할 인자가 담긴 컴포넌트

다양한 형태로 내보낼(expert) 수 있다. text, 객체, 함수 등등
export function Text({children, color, italic, underline}){ };
구현해야 할 것 중괄호{ }안에 넣음

propTypes (component파일(jsx파일))

경고메세지를 통해 사용자가 propTypes를 잘못되었다는 것을 인지시켜주는 역할을 함
만약 name의 propType을 number로 하더라도 입력값이 '홍길동'일경우 홍길동으로 출력은 정상적으로 되지만, 개발자 모드로 볼 경우 경고메세지를 보여줌
선언이 필수는 아니지만 원하는 결과가 안나 올 수 있기 때문에 자료형에 대해 선언을 해주지 않으면 에러를 발생하도록 부여

Text.propTypes = { 
        children : PropTypes.string.isRequired, /*propType을 지정하지 않은 것 만으로 오류를 출력*/
        color : PropTypes.string,
        italic : PropTypes.bool,
        underline : PropTypes.bool //T,F 만 있으면 되니까	
        }

https://blog.naver.com/michael_cho77/222138303091 (네이버 블로그 Hoodie Coder)

객체 component

 constructor(props) {
        super(props); //super : 내 위의 상위
        this.setRef = this.setRef.bind(this); //this가 정확히 어떤 this 남용되는것을 줄이기 위해 bind함수로 범위를 묶어주는것 ( 이 객체에 묶어버리기)
        this.handleChange = this.handleChange.bind(this);
    }