React `string 안에 ${변수명}` 잘 안될 때

React Variables and String
Variables in String format 

처음 시작할 때 잘 모를수도 있는 내용이라 적어봅니다.

아래와 같은 코드가 있습니다.

  render() {
    const {username} = this.state;
    return (
        <div className="App">
          <header className="App-header">
            mysql connect test<br/>
            {username? <p>{`hello ${username}!`}</p> : <p>loading...</p>}
          </header>
        </div>
    );
  }

string 구문 안에 ${변수명} 을 사용할 수 있죠.

결론부터 말씀드리면 ' 대신 ` 를 사용해야합니다.

 ' 은 single quotation 이고

 ` 는 키보드의 숫자1 왼쪽에 있는 기호입니다. 이름은 Grave

 

'hello ${username}'

의 출력은 hello ${username} 이 됩니다.

 

`hello ${username}`

의 출력은 hello bryan 이 됩니다.