Component - intro, props

  컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어 지면 이에 맞추어 UI를 만들로 라이프 사이클 API를 이용해 컴포넌트가 화면에 나타날때, 사라질때, 변화가 일어날때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다.

  컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나뉘어져 있다. 이 둘의 차이점은 클래스형컴포넌트는 state 기능, 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다.

//함수형 컴포넌트
function App() {
  const name = "react"
  return (
      <div className="react">{name}</div>
  );
}
 
//클래스형 컴포넌트
import {Component} from "react/cjs/react.production.min";
 
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

함수형 컴포넌트의

  장점

    1. 클래스형 컴포넌트 보다 선언하기 쉽다.

    2. 메모리 자원을 클래스형 컴포넌트에 비해 덜 먹는다

    3. 배포할때 클래스형 컴포넌트 보다 파일 크기가 작다

  단점

    1. state, 라이프 사이클 API사용이 불가하다 -> v16.8이후 Hooks 도입으로 인해 해결됬다.

 

첫 컴포넌트 생성

  /src에서

//MyComponent.js
import React from 'react';
 
const MyComponent = () => {
    return <div>first component</div>
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent/>
}
 
export default App;
 

props

  props는 properties의 줄임말로서 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

  JSX내부에서 props렌더링

//MyComponent.js
import React from 'react';
 
const MyComponent = (props) => {
    return <div>Hello {props.name}</div>
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent name="world"/>
}
 
export default App;
 
//output: Hello world

  Default props

    위 코드에서 App.js의 name="world"부분을 지우면 출력은 hello가 된다. props를 따로 지정하지 않아도 기본값을 다음과 같이 지정할 수 있다.

//MyComponent.js
import React from 'react';
 
const MyComponent = (props) => {
    return <div>Hello {props.name}</div>
};
 
MyComponent.defaultProps = {
    name: 'default props',
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent/>
}
 
export default App;
 
//output: hello default props

  children

    리엑트에서 컴포넌트를 사용할 때 태그 사이의 값을 props.children을 통해 볼 접근할 수 있다.

//MyComponent.js
import React from 'react';
 
const MyComponent = (props) => {
    return (
        <div>
            Hello {props.name} <br/>
            children: {props.children}
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: 'default props',
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent>react</MyComponent>
}
 
export default App;
 
//output:
//Hello default props
//children: react

  비구조화 할당(destructing assignment)를 사용한 props내부 값 추출

 

import React from 'react';
 
const MyComponent = (props) => {
    const {name, children} = props;
    return (
        <div>
            Hello {name} <br/>
            children: {children}
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: 'default props',
};
 
export default MyComponent;
 
//or
const MyComponent = ({name, children}) => {}

  propTypes를 통한 props 타입 지정

  컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용하면 된다.

//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({name, children}) => {
    // const {name, children} = props;
    return (
        <div>
            Hello {name} <br/>
            children: {children}
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: 'default props',
};
 
MyComponent.propTypes = {
    name: PropTypes.string,
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent name={1}>react</MyComponent>
}
 
export default App;
 
//name이 string이 아닌 number이므로 다음과 같은 경고 출력:
//Warning: Failed prop type: 
//Invalid prop `name` of type `number` supplied to `MyComponent`, expected `string`.

  isRequired를 통한 필수 props지정

//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({name, favorite_number, children}) => {
    // const {name, children} = props;
    return (
        <div>
            Hello {name} <br/>
            children: {children}<br/>
            my favorite number: {favorite_number}
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: 'default props',
};
 
MyComponent.propTypes = {
    name: PropTypes.string,
    favorite_number: PropTypes.number.isRequired,
};
 
export default MyComponent;
 
//App.js
import './App.css';
import MyComponent from "./MyComponent";
 
const App = () => {
  return <MyComponent name={"skullkim"}>react</MyComponent>
}
 
export default App;
 
//favorite_number를 지정하지 않았으므로 다음과 같은 에러 출력:
//Warning: Failed prop type: The prop `favorite_number` is marked as required in `MyComponent`, 
//but its value is `undefined`.

  prop-types type 종류

kinddescription

any	아무 종류
array	배열
bool	true/false
func	함수
number	숫자
object	객체
string	문자열
symbol	심벌 개체(ES6)
node	렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment)
element	React element
instanceOf(ClassName)	JS에서 instanceof로 정의 가능한 클래스 인스턴스
oneOf([…Value])	포함된 값들중 하나.(ex: oneOf([‘남자’,’여자’]))
oneOfType([…PropTypes])	포함된 PropTypes들중 하나. (ex: oneOfType([PropTypes.string, PropTypes.instanceOf(MyClass)]))
arrayOf(PropTypes)	해당 PropTypes으로 구성된 배열
objectOf(PropTypes)	주어진 종류의 값을 가진 객체
shape({key:PropTypes})	해당 스키마를 가진 객체.(ex:shape({name:PropTypes.string,age:PropTypes.number}))
exact({key:PropTypes})	명확하게 해당 스키마만 존재해야함.

  클래스형 컴포넌트에서 props사용

    함수형 컴포넌트와 사용법은 같으나 props대신 this.props를 사용한다.또 한 static을 사용해서 defualtProps와 propsTypes를 클래스 내부에서 지정할 수 있다.

 

More about prop-types: https://github.com/facebook/prop-types

facebook/prop-types