국비지원 47일차 벨로퍼트:react를 다루는 기술 (컴포넌트 import export , props, useState)

react에서 컴포넌트를 생성하는 방법 

react에서 컴포넌트를 생성하는 방법에는 2가지가있다 
1 class형 컴포넌트
2 함수형 컴포넌트

class형 컴포넌트의 장점

함수형 컴포넌트의 장점
1 클래스형 컴포넌트보다 선언방식이 편하다
2 프로젝트 배포시 파일크기가 클래스형 컴포넌트보다 작다
3 메모리 자원이 클래스형 컴포넌트보다 덜 든다 

ex)
//클래스형 컴포넌트

class App extends Component {
  render() {    
      return (
        <>
          <div>MyComponent입니다!</div>
        </>
      )
    }
  }

//함수형 컴포넌트 
const MyComponent = () => {
  return <div>MyComponent입니다!</div>
}

Reactjs Code Snippet 이라는 확장 프로그램을 이용하면 컴포넌트를 쉽게 만들어 낼 수 있다

jsx파일이나 js파일에서
rsc + enter = 함수형 컴포넌트 템플릿을 형성한다
rcc + enter = 클레스형 컴포넌트 템플릿을 형성한다  


--- 모듈 import와 export --- 
컴포넌트는 하나의 파일로 구성되어있기 때문에 다른 컴포넌트에서 사용하기 위해선
컴포넌트 파일을 불러오거나(import) 내보 낼 수 있는 형태(export)로 만들어야한다

ex)

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div>
        <MyComponent/>        
      </div>
    );
  }
}

export default App;

위 코드처럼 MyComponent라는 파일을 불러와(import) App이라는 컴포넌트를 사용하고 
기본적으로 내보내기(export)를 사용해 다른 파일에서도 app이라는 컴포넌트를 사용 할 수 있는 형태를 만들어야 다른 파일에서도 사용 할 수 있다.

즉 import는 해당파일에서 다른파일을 불러오는 기능을하고, export는 다른 파일에서 export를 명시한 파일을 사용 할 수 있게 하는 기능을 한다 


---props ---
1props란 속성의 줄임말이다 주로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 용도로 사용되는데 
이때 자식 컴포넌트에 속성(props)을 명시하여 데이터를 전달하는 방식을 사용한다 
2 자식 컴포넌트 또한 부모컴포넌트가 전달한 내용을 전달 받기위해 props를 사용 해야한다 
3 props는 부모 컴포넌트에서만 변경 가능하다, 즉 자식 컴포넌트는 부모가 전달해준 데이터를 쓸수 있고 값을 변경 할 수는 없다
props의 값을 바꾸기위해선 부모 컴포넌트에서 바꿔야 한다는 점을 숙지하자

ex)

//부모 컴포넌트 코드
const App = () => {
  return <MyComponent name="부모 컴포넌트로 부터 전달된 데이터!" />;
};

//자식 컴포넌트 코드
const MyComponent = (props) => {
  return (
    <div>
      <div>{props.name}</div>
    </div>
  );
};
1 위 코드 처럼 부모 컴포넌트가 어떠한 데이터를 전달할때는 원하는 이름의 속성(props)에 전달할 데이터를 명시한다
2자식 컴포넌트 입장에서도 부모 컴포넌트가 전달한 데이터를 사용 하기 위해선 데이터를 전달 받을 공간이 필요한데 
이때 컴포넌트에 파라미터가 부모컴포넌트가 전달한 데이터를 저장하고 사용 할 수 있게 만들어준다 

부모 컴포넌트로 부터 전달 받는 데이터가 없을때 props의 기본값을 설정 할 수 있다
ex)
//부모 컴포넌트로부터 전달받는 데이터가 없는 자식 컴포넌트 
작성방식은 객체이며 컴포넌트의 이름.defaultProps라고 명시하여 사용한다 
const MyComponent = (test) => {
  return (
    <div>
      <div>{test.name}</div>
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름',
};

부모 컴포넌트에서 자식컴포넌트에 직접태그를 작성하는 방식 또한 props를 통해 데이터를 전달하지 않으면
렌더링 되지않기때문에 poprs.children이라는 기능을 사용해 자식 컴포넌트에게 알려줘야한다 
ex)

//부모 컴포넌트

const App = () => {
  return (
    <MyComponent>    
      <div>자식 컴포넌트안에</div>
      <div>슬롯기능을 사용하기위해선</div>
      <b>props.children을 사용한다</b>
    </MyComponent>

  );
};

//자식 컴포넌트
const MyComponent = (props) => {
  return (
    <div>
      <div>{props.children}</div>
    </div>
  );
};

위 코드에서 자식 컴포넌트에 {props.children}를 명시하지 않으면 
자식 컴포넌트는 부모컴포넌트에 자신 내부에 작성된 태그를 인식 하지 못하기 때문에 렌더링 되지않는다

즉 props.children은 리엑트에서 슬롯 역활을 한다 

리엑트에서 propTypes 라는 기능을 불러오면(import) 해당 props의 타입을 미리 정해 놓을 수 있다
타입이 일치하지않아도 화면에출력(렌더링) 되지만 console창에 오류를 냄으로 써 타입을 정확히 할 수 있다는 장점이있다.

ex)

//부모컴포넌트
 const App = () => {
  return (
    <MyComponent name="김정환" favoriteNumber={'안녕'}>
      <div>자식 컴포넌트안에</div>
      <div>슬롯기능을 사용하기위해선</div>
      <b>props.children을 사용한다</b>
    </MyComponent>
  );
};

//자식 컴포넌트
import PropTypes from 'prop-types';

const MyComponent = ({
  name,
  children,
  favoriteNumber,
}) => {
  return (
    <div>
      <div test="gdgd">{children}</div>
      <div>{name}</div>
      <div>
        내가 좋아하는 숫자는 {favoriteNumber} 입니다
      </div>
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름',
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

defaultProps와 propTypes는 react를 사용하면서 필수는 아니지만 
사용하면 협업할때 작업능률을 올릴 수 있기 때문에 어느정도 리엑트에 적응되면 
사용하는 것이 좋을 것이라 판단한다 

--- state --- 
state는 컴포넌트 내부에서 사용되는 데이터(Model)이다 그냥 데이터가 아니라 화면에 렌더링 시킬 수 있는 데이터이다
즉 우리가 데이터를 작성하여 화면(View)과 연결만 시켜주면 따로 화면에 출력하는 코드를 작성하지 않아도 된다는 장점이있다

또한 값이 변경된다면 state에 값만 바꿔준다면 해당 state가 사용된 모든 부분이 변경되어 유지 보수가 쉽다는 장점이있다

useState 

1 useState는 리엑트에 훅중 하나이며 함수형 컴포넌트에서 state라는 기능을 사용 할 수 있게 해준다
2 useState라는 훅을 사용하기 위해선 useState라는 기능을 react에서 불러와야한다(import) 
3 배열의 구조분해 할당으로 state를 명시하는데 이때 1번 값은 state 이고 2번 값은 setState에 해당한다 
이때 useState에 해당하는 값은 state에 초깃값을 의미하여 state에 값을 변경할 때에는 2번째 setState에 해당하는 변수를 사용하여 state를 변경한다
ex)

import React, { useState } from 'react';
const App = () => {
  const [res, setRes] = useState('버튼을 클릭해 주세요!');

  const enter = () => {
    setRes('입장하였습니다');
  };

  const exit = () => {
    setRes('퇴장하였습니다');
  };
  return (
    <>
      <button onClick={enter}>입장</button>
      <button onClick={exit}>퇴장</button>
      <h1>{res}</h1>
    </>
  );
};