REACT_Variable

[var, let, const] 사용하기

-ES5에서 사용하던 var는 유연한 방식으로 변수를 재선언, 재할당 할 수 있다 

이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변수값 변경이 발생할 수 있다

이러한 var의 단점을 보안하기 위해  ES6에서 let과 const가 추가됐다.

 

- R010_Variable.js

import React, {Component} from 'react';

class R010_Variable extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        var varName = 'react';
        console.log('varName1 : ' + varName);
        var varName = '200';
        console.log('varName2 : ' + varName);
        let letName = 'recat'
        console.log('letName : ' + letName);
        // let letName ='200'
        // Parsing error : Indentifier 'letName' has already been declared
        letName = 'react200';
        //새로운값을 재할당해서 오류가 안 난다...? 
        console.log('letName2 : ' + letName);
        const constName = 'react';
        console.log('constName : ' + constName);
        // const constName =  '200'
        // Parsing error : Indentifier 'constName' has already been declared
        // constName = 'react200'
        // Uncaught TypeError : Assignment to constant variable.
        // const는 초기값 받으면 수정이나 재할당 안 되기 떄문에 다 오류
        // 재할당 허용하지 않아서 새로운 값을 넣어도 오류
         
    }
    render() {
        return(<h2>[THIS IS variable ]</h2>)
    }
}
export default R010_Variable;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Variable from './R010_Variable.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Variable/>
    </div>
  );
}

export default App;

 

결과