리액트 강좌4 - 컴포넌트

리액트에서 컴포넌트는 가장 큰 장점 중 하나이며, 리액트를 쓰는 가장 큰 이유이기도 합니다. 컴포넌트는 단순한 템플릿 이상이라고 표현합니다. 쉽게 재 사용이 가능할 뿐만 아니라 라이플 사이클 API를 통해서 작업들을 처리할 수 있으며, function 또는 method 등을 이용해서 화면을 정의할 수 있습니다. 무엇보다도 기능 단위 또는 화면 단위로 컴포넌트를 관리할 수 있어서 관리도 수월하며, 한 파일에 모두 작성하지 않아도 되어, 코드 작성 시 가시성이 좋습니다.

 

1. 컴포넌트 생성

그럼 이제 간단한 컴포넌트를 생성하는 실습을 해보도록 하겠습니다. 어떠한 편집기를 사용해도 상관 없지만, 필자는 Visual Studio Code를 사용하였습니다.

그럼, 아래 그림과 같이 src/sample 하위에 오른쪽을 눌러 새파일 Welcome.js 파일을 하나 만들어 줍니다.

 

그림1. 새 파일 생성

아래는 Welcome.js 파일입니다.

import React from 'react'

class Welcome extends React.Component {
    render() {
        return (
            <div>
                Welcome! My Component
            </div>
        )
    }
} 

export default Welcome

코드는 간단히 'Welcome! My Component' 만 출력하도록 작성하였습니다.

맨 아래쪽에 보면 export default Welcome 이 있습니다. 이 코드는 Welcome 컴포넌트를 기본(default)으로 내보내기(export) 하겠다는 의미 입니다.  

그럼 이제 이렇게 export 된 컴포넌트를 사용해보도록 하겠습니다.

 

컴포넌트를 사용하기 위해서 App.js을 아래처럼 작성하였습니다.

import React from 'react'
import Welcome from './sample/Welcome'

class App extends React.Component {
  
  render() {
    return(
      <div>
        이건 컴포넌트 입니다!
        <Welcome/>
      </div>
    )
  }
} 

export default App

2라인에 보면 위에서 작성한 Welcome 컴포넌트를 import 키워드를 이용해서 모듈을 불러옵니다. 그리고 원하는 위치에 모듈을 작성해주면 됩니다. 

모듈을 불러오기(import)는 아래와 같은 형식으로 사용할 수 있습니다. 모듈명은 해당 코드에서 사용하기 위한 모듈명이기 때문에 기존 컴포넌트 명을 작성하셔도 되고, 다른 모듈명으로 작성하셔도 됩니다.

import <모듈명> from <모듈위치>

 

위의 코드를 실행하게 되면 아래와 같은 결과가 표시됩니다.

이건 컴포넌트 입니다!
Welcome! My Component

작성된 컴포넌트는 재사용이 가능하기 때문에 여러분 중복해서 사용해도 됩니다.

 

2. props

props는 properties를 줄인 표현으로 컴포넌트 속성을 말합니다. props 값은 컴포넌트를 사용하는 부모 컴포넌트에서만 설정이 가능하며, 컴포넌트 내부에서는 props 값을 수정할 수 없습니다. 

 

2.1 props 사용 예제

컴포넌트 내부에서는 props 값은 this.props.<props name> 로 사용할 수 있습니다. 그러면 간단한 예제를 보도록 하겠습니다.

아래는 props 값으로 name값을 받아서 출력해주는 예제입니다.

 

Welcome.js (컴포넌트)

import React from 'react'

class Welcome extends React.Component {
    render() {
        return (
            <div>
                {this.props.name} 님. 환영합니다! 
            </div>
        )
    }
} 

export default Welcome

위에서 작성된 Welcome 컴포넌트를 사용하는 App에서 아래와 같이 컴퍼넌트 태그 안에 props 값을 넣어 주는걸 볼 수 있습니다. 

App.js(부모컴포넌트)

import React from 'react'
import Welcome from './sample/Welcome'

class App extends React.Component {
  
  render() {
    return(
      <div>
        <Welcome name="홍길동"/>
      </div>
    )
  }
} 

export default App

결과

홍길동 님. 환영합니다!

2.2 props 기본값 설정

props 값을 설정하지 않은 경우 기본값을 설정할 수 있습니다. 아래는 props 기본 값을 설정하는 예제입니다.

props 기본값은 <컴포넌트명>.defaultProps 로 설정할 수 있습니다. 

import React from 'react'

class Welcome extends React.Component {
    render() {
        return (
            <div>
                {this.props.name} 님. 환영합니다! 
            </div>
        )
    }
} 

Welcome.defaultProps = {
    name: "이름 없음"
}

export default Welcome

컴포넌트를 사용하는 App 컴포넌트에서는 props 값을 제거하였습니다.

import React from 'react'
import Welcome from './sample/Welcome'

class App extends React.Component {
  
  render() {
    return(
      <div>
        <Welcome/>
      </div>
    )
  }
} 

export default App

결과

이름 없음 님. 환영합니다!

2.3 props 값 체크

필수 props 값에 대해서는 타입(type)에 대한 검증이 필요한데, 이를 위해서 propTypes 모듈을 사용합니다.

 

import React from 'react'
import PropTypes from 'prop-types';

class Welcome extends React.Component {
    render() {
        return (
            <div>
                {this.props.name} 님. 환영합니다! 
            </div>
        )
    }
} 

Welcome.propTypes = {
    name: PropTypes.string,
};

export default Welcome

결과

3 님. 환영합니다!

정상적으로 렌더링 했지만, 개발자 도구(F12)를 띄워 보면 아래와 같이 에러가 발생한걸 볼 수 있습니다.

2.4 props 필수 설정

필수적으로 설정되어야 하는 props를 지정할 수 있습니다. 간단한 예제를 보겠습니다. 

이전 예제와 거의 동일하며, props 뒤에 isRequired가 추가된 것을 볼 수 있습니다.

import React from 'react'
import PropTypes from 'prop-types';

class Welcome extends React.Component {
    render() {
        return (
            <div>
                {this.props.name} 님. 환영합니다! 
            </div>
        )
    }
} 

Welcome.propTypes = {
    name: PropTypes.string.isRequired,
};

export default Welcome

아래 코드에서는  props 값을 제거하였습니다.

import React from 'react'
import Welcome from './sample/Welcome'

class App extends React.Component {
  
  render() {
    return(
      <div>
        <Welcome/>
      </div>
    )
  }
} 

export default App

결과는 예상대로 props 값이 보이지 않습니다. 

님. 환영합니다!

위의 예제와 비슷하게, 필수 props로 설정한 값에 값이 없다는 오류 메시지가 출력이 되는 것을 확인할 수 있습니다.

 

 

작성중..