React의 기본, 컴포넌트

프로젝트 생성

create-react-app 모듈을 글로벌로 설치합니다

npm install -g create-react-app

create-react-app 명령어로 프로젝트를 생성합니다.

create-react-app 원하는이름

앱을 실행하고 localhost:3000에서 제대로 동작하는지 확인합니다.

npm start

컴포넌트 기본

React에서 가장 기초가 되는 개념은 컴포넌트 입니다. React는 '컴포넌트 기반 라이브러리'라고 소개되곤 하는데요, 이는 웹 페이지를 HTML 코드 하나로 생각하는게 아니라 여러 부분을 컴포넌트라는 단위로 분할해서 처리한다는 것을 의미합니다.

먼저 컴포넌트가 어떻게 생겼는지부터 느껴봅시다! 아래 코드는 제가 react 프로젝트 내 src/App.js 파일에 작성한 코드입니다.

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Compo />
      </div>
    );
  }
}

class Compo extends React.Component {
  render() {
    return (
      <div>
        <p> Compoent test! </p>
      </div>
    );
  }
}

export default App;

이 코드에는 App이라는 컴포넌트와, Compo라는 컴포넌트, 이렇게 두 개의 컴포넌트가 존재합니다. 그냥 딱 훑어 보았을 때 두 컴포넌트가 가지고있는 공통점을 찾아볼까요?

class - extends React.Component의 형태를 띄고 있습니다.
class 안에 render 메소드를 호출하고 있습니다.
render 안에 return을 호출하고 있습니다.
return 안에는 container element <div>로 감싸져 있는 무언가가 있습니다.

컴포넌트 변수 선언

위의 기본적인 컴포넌트 형태에서 조금만 더 내용을 추가한 예시를 살펴봅시다. 저는 return 내 html 내용에 변수를 삽입하고 싶었고, 아래와 같은 코드를 작성하였습니다.

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Compo />
      </div>
    );
  }
}

class Compo extends React.Component {
  render() {
    let text = 'Compoent test!';
    return (
      <div>
        <p> {text} </p>
      </div>
    );
  }
}

export default App;

Compo 클래스에 보면 let text.. 라는 내용이 있습니다. ES6 에서는 변수를 선언할 때 block scope인 let을 사용하는 것을 권장합니다. 그래서 let을 사용하여 'Component test!'라는 변수를 먼저 선언해줬습니다. 그리고 변수를 return 내 html 코드에 사용하고 싶으면 위와 같이 중괄호 { } 를 사용하시면 됩니다.

props, props 타입 & state

컴포넌트 내 데이터를 처리하는 방법 중 가장 대표적인 것이 props와 state입니다. Props는 컴포넌트 내부의 변하지 않는 데이터를 처리할 때 사용하며, State는 변하는 동적인 데이터를 처리할 때 사용합니다. props의 타입을 검증해서 에러 발생을 줄이거나, 에러 로그를 띄울수 있도 있습니다.

this.props.이름: <Compo 이름 = "value"/> 의 형태로 사용합니다.
this.props.children: <Cmpo> value </Compo> 의 형태로 사용합니다.
defaultProps (기본값 설정): 컴포넌트 설정이 끝난 후 Comp.defaultProps = { 이름 : value } 의 형태로 사용합니다.

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Compo test="Hello world!"> Children test </Compo>
      </div>
    );
  }
}

class Compo extends React.Component {
  render() {
    return (
      <div>
        <p>propsName: {this.props.test}</p>
        <p>chiledren: {this.props.children}</p>
      </div>
    );
  }
}

export default App;

propTypes: 컴포넌트 설정이 끝난 후 Comp.propTypes = { 이름 : 타입 } 의 형태로 사용합니다.

Comp.propTypes = {
	value: React.PropTypes.string,
	secondeValue: React.PropTypes.number
	thirdValue: React.PropTypes.any.isRequired
}

this.state (렌더링 전): state는 초기값 설정이 필수입니다. constructor 안에서 this.state = { }으로 설정을 해주셔야 합니다.
this.setState (렌더링 후): state 값을 수정할 때는 this.setState({ ... })을 사용합니다.

Yuho Jeong