[React] 변수 및 속성, 메서드 사용

 

 

1. 변수

---

React에서 아래와 같이 ` (백틱) 과 ${변수명}을 통해서 변수 사용이 가능하다. 

class DateTimeNow extends React.Component {
  render() {
    return React.createElement(
    	'span',
        null,
        `Current date and time is ${dateTimeNow}`
  }
}
ReactDOM.render(
  DateTimeNow,
  document.getElementById('content')
)

 

 

 JSX방식을 사용하면 중괄호 표기법을 사용하여 변수사용을 좀더 간결하게 할 수있다.

let helloWorldReactElement = <h1>Hello world!</h1>


class HelloWorld extends React.Component {
  render() {
    return <div>
      {helloWorldReactElement}
      {helloWorldReactElement}
    </div>
  }
}
ReactDOM.render(
  <HelloWorld/>,
  document.getElementById('content')
)

---

 

2. 속성

---

컴포넌트의 속성을 동적으로 다루기 위해 앞서 봤던 코드와 크게 차이가없다. 속성 호출은 {this.props.속성명}와 같이 사용하면 된다.

class HelloWorld extends React.Component{
	render(){
    	return <h1 id={this.props.id} title={this.props.title}>
        	Hello {this.props.frameworkName} World!!
        </h1>
	}
}

 

 

직전 코드에는 <h1>의 속성으로 id와 title 두가지가 존재한다. 만약 <h1>태그에 작성해야할 속성의 수가 많아진다면 코드를 작성 시간과 양이 늘어나게 될텐데 React에서는 펼침 연산자( ... )를 통해 이를 간단하게 구현할 수 있도록 해준다.  ( 속성이 늘어나는 경우는 속성을 통해 데이터를 전달해야하는 경우가 대표적일 것이다. 하지만 비표준 속성에 데이터를 추가하는 것은 일반적으로 안티패턴으로 여기니 가능하면 지양하도록하자. )

class HelloWorld extends React.Component {
  render() {
    return <h1 {...this.props}>Hello {this.props.frameworkName} world!!!</h1>
  }
}

ReactDOM.render(
  <div>
    <HelloWorld
      id='ember'
      frameworkName='Ember.js'
      title='A framework for creating ambitious web applications.'/>
    <HelloWorld
      id='backbone'
      frameworkName='Backbone.js'
      title='Backbone.js gives structure to web applications...'/>
  </div>,
  document.getElementById('content')
)

---

3. 메서드

---

 앞서 봤던 변수 및 속성을 사용하는 방법과 같다. 바로 예시를 보자. class Content에 getUrl() 이라는 메소드를 정의했다. 해당 메서드는 render()에서 사용하는데 사용방법은 {this.메소드명()}이다.  

class Content extends React.Component {
  getUrl() {
    return 'http://webapplog.com'
  }
  render() {
    return (
      <div>
        <p>Your REST API URL is: <a href={this.getUrl()}>{this.getUrl()}</a></p>
      </div>
    )
  }
}

ReactDOM.render(
  <Content />,
  document.getElementById('content')
)