React 공부하기 3 - Component

컴포넌트

기본적인 컴포넌트를 만들어 보자.

import React, {Component} from 'react';

class MyComponent extends Component{
    render() {
        return (
            <div className='hello'>
                brand new componenet
            </div>
        )
    }
}

export default MyComponent;

import React from 'react';

import MyComponent from './MyComponent';

function App() {
  return (
        <MyComponent/>
  );
}

export default App;

Props

컴포넌트의 속성을 줄때 사용하는 값이다.

import React, {Component} from 'react';

class MyComponent extends Component{
    render() {
        return (
            <div className='hello'>
                brand new componenet is {this.props.name}
            </div>
        )
    }
}

export default MyComponent;

아런식으로 부모에서 값을 넘겨 줄 수 있다. 또한 default값을 설정할 수도 있다.

import React, {Component} from 'react';

class MyComponent extends Component{
    render() {
        return (
            <div className='hello'>
                brand new componenet is {this.props.name}.
            </div>
            <div>
                age: {this.props.age}
            </div>
        )
    }
}

MyComponent.defaultProps = {
    name: 'yceffort',
}

export default MyComponent;

유의할 점은 props에 아무값을 안넘겨줘도 (nane="") 값은 default 가 아닌 "" 가 나온다는 것이다. 왜냐하면 ""는 기본적으로 string으로 인식 되기 때문이다. 여기에 숫자등의 값을 넘기고 싶다면 {}를 써야 한다.

props의 값을 검증하기 위해서는 propTypes를 사용한다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component{
    render() {
        return (
            <div>
                <div className='hello'>
                    brand new componenet is {this.props.name}
                </div>
                <div>
                    age: {this.props.age}
                </div>
                <div>
                    company: {this.props.company}
                </div>
            </div>
        )
    }
}

MyComponent.defaultProps = {
    name: 'yceffort',
    age: 30
}

MyComponent.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    company: PropTypes.string.isRequired,
}

export default MyComponent;

숫자에 문자열을 넣거나, required인데 값을 안넘겨주는 경우에도 렌더링은 된다. 다만 콘솔창에 에러가 출력된다.

state

props는 부모 컴포넌트가 설정하는 읽기전용 값이다. 컴포넌트 내부에서 값을 또 읽고 업데이트를 하려면 state를 써야 한다. state는

1. 항상 기본 값이 있어야 하며
2. this.setState()메소드로 만 값을 업데이트 해야 한다.

class MyComponent extends Component{

    constructor(props) {
        super(props);
        this.state = {
            number: 0
        }
    }
    render() {
        return (
            <div>
                <div className='hello'>
                    brand new componenet is {this.props.name}
                </div>
                <div>
                    age: {this.props.age}
                </div>
                <div>
                    company: {this.props.company} / {this.state.number} 개
                </div>

                <button onClick={()=> {
                        this.setState({
                            number: this.state.number + 1
                        })
                    }
                }>
                    더하기
                </button>
            </div>
        )
    }
}

위와 같은 방식으로도 할 수 있지만, transform-class-properties문법을 사용하여, constructor 바깥에서도 state와 props를 정의할 수 있다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component{

    static defaultProps = {
        name: 'yceffort',
        age: 30
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        company: PropTypes.string.isRequired,
    }

    state = {
        number: 0
    };

    render() {
        return (
            <div>
                <div className='hello'>
                    brand new componenet is {this.props.name}
                </div>
                <div>
                    age: {this.props.age}
                </div>
                <div>
                    company: {this.props.company} / {this.state.number} 개
                </div>

                <button onClick={()=> {
                        this.setState({
                            number: this.state.number + 1
                        })
                    }
                }>
                    더하기
                </button>
            </div>
        )
    }
}

export default MyComponent;

transform-class-properties란 기존에 자바스크립트 클래스 syntax에서는 method외에는 아무것도 선언할 수 없게 되어 있는 것을, 조금 더 유연하게 만들어 주는 것이다.

before

class Cat {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
  }
  getBreed() {
    return this.name + ' is a ' + this.breed;
  }
}

after

class Cat {
  name = "Chairman Meow";
  breed = "Sphynx";
  
  getBreed = function() {
    return this.name + ' is a ' + this.breed;
  }
}

또한, 화살표 함수가 더이상 그 구문내의 this를 생성해 내지 않고, 올바르게 this가 class를 가르킬 수 있도록 도와준다.

getBreed = () => {
    return this.name + ' is a ' + this.breed;
  }

이렇게 쓰는 것도 가능해 진다는 뜻이다.