REACT A to Z - 3

리액트의 컴포넌트 개념

컴포넌트는 두개가 존재함

1. 클래스형 컴포넌트
2. 함수형 컴포넌트

이 둘의 차이점은 클래스형 컴포넌트는 state기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것
그러나 클래스 형 컴포넌트에서는 render함수가 꼭 있어야하고 그 안에서 보여주어야 할 JSX를 반환해야함

함수 컴포넌트의 장점?
1. 클래스형 컴포넌트보다 선언하기가 훨씬 편함
2. 메모리 자원 덜 사용***
3. 빌드 후 배포할 때 결과물의 파일 크기가 더 작음(클래스형과 크게 차이나진 않음)

함수 컴포넌트의 단점?
state와 라이플사이클 API 사용이 불가능하다는 것이지만 리액트 v16.8버전으로 업데이트 되면서 Hooks 라는 기능이 도입되면서 해결되었음

리액트 공식문서에서는 함수 컴포넌트와 Hooks를 사용하도록 권장

#props

• 컴포넌트 속성을 설정할 때 사용하는 요소
• props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능(부모가 App 컴포넌트임)

//import './App.css';
import Mycomponent from './Mycomponent';
import { Fragment } from 'react';

const App = () => {
  return <Mycomponent name="react"/>
}

export default App;

위에가 부모
아래가 자식

import React from 'react';
const Mycomponent = props => {
    return (
        <div>
            새로운 컴포넌트{props.name} 입니다
        </div>
    );
};

export default Mycomponent;

---

import React from 'react';

const MyComponent = ({name, children}) => { // 이와같이 구조분해할당을 통해 객체의 값을 파라미터로 넘겨줄 수 있음
    return (
    <div>
        새로운 컴포넌트{name} 입니다. <br/>
        children 값은 {children}
    </div>
    );
};

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

export default MyComponent;

propsTypes

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때에는 propTypes를 사용함

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

propTypes를 이런식으로 지정해 줄 수 있음

클래스형 컴포넌트에서는
이런식으로 작성함 render함수 내에서 this.props를 반환하면 됨

render() {
const MyComponent = ({name, children}) = this.props;
//생략
} 

***defaultProps 와 PropTypes 은 대규모 프로젝트를 만들 해당 컴포넌트에 어떤 props가 필요한지 쉽게 알수 있어 개발 능률 향상 효과 있음