본문 바로가기
개발/React

[React] React Component

by BENGGRI 2021. 2. 3.
반응형

1. Component

컴포넌트는 특정 부분이 어떻게 생길지 정하는 선언체이며, LifeCycle API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업을 처리할 수 있고, 메서드를 만들어 기능을 붙일 수도 있습니다다.
리액트 프로젝트에서 서로 조합이 가능한, 모듈화된 컴포넌트를 사용해 만듭니다.

2. Component 생성하기

import React, { Component } from 'react';

class NewComponent extends Component {
    render() {
        return (
            <div>새로운 컴포넌트</div>
        );
    }
}
export default NewComponent;

위 코드에서 모듈 내보내기와 불러오기 코드가 있습니다.

1. 모듈 불러오기

import React, { Component } from 'react'; // 불러오기

2. 모듈 내보내기

export default NewComponent; // 내보내기

3. props

props 는 properties 를 줄인 표현입니다.

컴포넌트 속성을 설정할 때 사용하는 요소입니다다. 

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있습니다.

1. JSX 내부에서 props 렌더링

import React , { Component } from 'react';

class NewComponent extends Component {
    render() {
        return (
            <div>안녕하세요. 제 이름은 {this.props.name} 입니다.</div>
        );
    }
}

export default NewComponent;

2. Component 를 사용할 때 props 값 설정

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

class App extends Component {
    render() {
        return (
            <NewComponent name="React"/>
        );
    }
}

export default App;

※ 2번 과정에서 Component 에 name="React" props 를 설정하고 1번과정에서 {this.props.name} 으로 설정한 props 를 렌더링하였습니다.

3. props 기본 값 설정 : defaultProps

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

class App extends Component {
    render() {
        return (
            <NewComponent name="React"/> --> 이 라인은 삭제 해주세요
            <NewComponent />
        );
    }
}

export default App;

<NewComponent /> 에 name props 를 삭제합니다.

그리고 해당 컴포넌트에서 defaultProps 값을 설정합니다.

import React , { Component } from 'react';

class NewComponent extends Component {
    render() {
        return (
            <div>안녕하세요. 제 이름은 {this.props.name} 입니다.</div>
        );
    }
}

// defaultProps를 설정하는 기본적인 방법
NewComponent.defaultProps = {
    name: '기본 이름'
}

export default NewComponent;

defaultProps 를 설정하는 또 다른 방법은 클래스 내부에서 정의하는 것입니다.

import React , { Component } from 'react';

class NewComponent extends Component {
    static defaultProps = {
        name : '기본 이름'
    }
    render() {
        return (
            <div>안녕하세요. 제 이름은 {this.props.name} 입니다.</div>
        );
    }
}

export default NewComponent;

defaultProps 를 설정하는 두 코드의 차이점은 없습니다.

빌드 작업에서 바벨을 통해 ES5 형태의 코드로 변환할 때 동일한 결과를 보이기 때문입니다.

4. props 검증 : propTypes

컴포넌트의 필수 props를 지정하거나 props 타입(Type)을 지정할 때는 propsTypes를 사용합니다.

컴포넌트의 propsTypes를 사용하려면 우선 코드 위쪽에 propTypes를 import해야합니다.

propTypes 를 사용하기 위해서는 npm 이나 yarn 을 통해 설치해야합니다.

$ yarn add prop-types
$ npm install --save prop-types
import React , { Component } from 'react';
import PropTypes from 'prop-types';

class NewComponent extends Component {
    static defaultProps = {
        name : '기본 이름'
    }
    render() {
        return (
            <div>안녕하세요. 제 이름은 {this.props.name} 입니다.</div>
        );
    }
}

NewComponent.PropTypes = {
    name: PropTypes.string // name props 타입을 문자열로 설정합니다.
}

export default NewComponent;

class 내부에서 transform-class-properties 문법을 사용하여 설정할 수 있습니다.

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

class NewComponent extends Component {
    static PropTypes = {
        name: PropTypes.string // name props 타입을 문자열로 설정합니다.
    }

    static defaultProps = {
        name : '기본 이름'
    }
    render() {
        return (
            <div>안녕하세요. 제 이름은 {this.props.name} 입니다.</div>
        );
    }
}

export default NewComponent;

name props 타입을 문자열(string)로 설정했습니다. 

App 컴포넌트에서 NewComponent의 name 값으로 문자열이 아닌 숫자를 전달해보고 개발자 도구를 확인합니다.

화면에 숫자가 표시되지만 개발자 도구를 확인해보시면 Warning 메시지를 확인할 수 있습니다.

 

아래는 propTypes 에서 사용할 수 있는 키워드 입니다.

이름 설명
array 배열
bool 참,거짓
func 함수
number 숫자
object 객체
string 문자열
symbol ES6 문법의 심벌 객체
node 렌더링할 수 있는 모든 것(숫자, 문자, element 또는 이들로 구성된 배열)
element 리액트 요소
oneOf(['A','B']) 주어진 배열 요소 중 하나
oneOfType([React.PropTypes.string,React.PropTypes.number]) 주어진 배열 안의 종류 중 하나
arrayOf(React.PropTypes.string) 주어진 종류로 구성된 배열
objectOf(React.PropTypes.string) 주어진 종류의 값을 가진 객체
shape({name:React.PropTypes.string,age:React.PropTypes.number}) 주어진 스키마를 가진 객체
any 아무 종류

4. state

컴포넌트 내부에서 읽고 또 업데이트할 수 있는 값을 사용하려면 state를 써야 합니다.

언제나 기본 값을 미리 설정해야 사용할 수 있으며, this.setState() 메서드로만 값을 업데이트해야합니다.

1. 컴포넌트 생성자 메서드 : constructor()

state 초기값은 컴포넌트의 생성자 메서드인 constructor 내부에서 설정합니다.

생성자 메서드는 컴포넌트를 새로 만들 때 실행됩니다.

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

class NewComponent extends Component {
    (...)
    constructor(props) {
        super(props);
    }
    (...)
}

export default NewComponent;

앞서 만든 NewComponent는 리액트의 Component 클래스를 상속합니다.
constructor 메서드를 만들어 주지 않으면 Component 클래스의 생성자 메서드를 그대로 사용합니다.
직접 constructor 메서드를 작성하여 생성자 메서드에서 추가 작업을 하려면,
메서드 내부에서 부모 클래스인 Component의 constructor 메서드를 먼저 호출해야합니다.
이때 super 키워드를 사용합니다.
컴포넌트를 만들 때 props 값들을 사용하므로 props를 메서드의 파라미터로 전달합니다.

2. state 초기값 설정

    // constructor 메서드 안에서 state의 초깃값을 지정합니다.
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        }
    }

3. JSX 내부에서 state 렌더링

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

class NewComponent extends Component {
    (...)
    constructor(props) {
        super(props);
        this.state = {
            number: 0
        }
    }

    render() {
        return (
            <div>
                <p>숫자 : {this.state.number}</p>
            </div>
        );
    }
}

export default NewComponent;

props 를 렌더링하는 방법과 비슷합니다.

4. state 값 업데이트 : setState()

// 사용방법
/* this.setState({
     수정할 필드 이름 : 값
    ,수정할 또 다른 필드 이름 : 값
}); */
    render() {
        return (
            <div>
                <p>안녕하세요. 제 이름은 {this.props.name} 입니다.</p>
                <p>숫자 : {this.state.number}</p>
                <button onClick={() => {
                    this.setState({
                        number : this.state.number + 1
                    });
                }}>
                더하기
                </button>
            </div>
        );
    }

버튼을 하나 만들고 클릭할 때마다 number 의 값을 1씩 증가시켰습니다.

state 의 값을 업데이트할 때는 언제나 setState 를 이용해 업데이트해야합니다.

※ ES6 의 화살표 함수를 이용해 구현하였습니다.

this.state.number = this.state.number + 1;

위 코드는 잘못된 코드입니다.

setState() 메서드가 하는 역할은 파라미터로 전달받은 필드를 업데이트한 후 컴포넌트가 리렌더링하도록 트리거하는 것입니다. 하지만 위 코드처럼 직접 접근하여 값을 수정할 경우 컴포넌트를 자동으로 리렌더링 하지 않습니다. this.forceUpdate() 메서드를 호출해 강제로 리렌더링을 하게 할 수는 있으나 사용을 피해야합니다.

 

초기 state 는 constructor 에서 정의해야하지만, defaultProps와 propTypes를 정의할 때 사용한 transform-class-properties 문법으로 constructor 바깥에서 정의할 수 있습니다.

 

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

class NewComponent extends Component {
    static PropTypes = {
        name: PropTypes.string // name props 타입을 문자열로 설정합니다.
    }

    static defaultProps = {
        name : '기본 이름'
    }
    (...)
}

export default NewComponent;

props는 부모 컴포넌트가 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트합니다.

반응형
저작자표시 비영리 변경금지

'개발 > React' 카테고리의 다른 글

[React] React JSX  (0) 2021.02.01
[React] React 특징  (0) 2021.01.25

관련글

댓글

티스토리툴바