[React] Data Binding

 

데이터를 변수에 저장 ( var a = '변수'; )하고 이것을 그대로 { } 안에 넣어 사용가능

 

만약 기존 자바스크립트였다면 document.getElementbyId("a"); 를 사용해야함

변수를 { } 중괄호 안에 넣는 아이디어를 여러곳에 활용할 수 있는데

 

• 이미지 파일 import

1번줄에 있는

import logo from './logo.svg';

는 logo이미지 파일을 가져올 때쓴다.  img src={logo}로 사용

같은 방식으로 id 나 href, className 태그에도 변수를 { } 안에 넣는 아이디어로 사용 가능

 

• 함수를 담을 수 도 있음

import logo from './logo.svg';
import './App.css';

function App() {

  var a = function(){
    return '변수당'
  }

  return (
    <div className="App">
      <h1>{ a() }</h1>
    </div>
  );
}

export default App;

 

• style 설정할때는 object형으로 { } 안에 작성

import logo from './logo.svg';
import './App.css';

function App() {

  var a = function(){
    return '변수당'
  }

  return (
    <div className="App">
      <div style={ { fontSize : 20, color : "red" } }>
        {a()}
      </div>
    </div>
  );
}

export default App;