React 두번째 수업

React의 큰 특징들

 

• Facebook이 개발
• 단방향 바인딩 ( 부모에서 자식으로 이동) 
• 가상 DOM
• JSX라고 하는 리액트만의 문법이 있다.

 

 return (
      <React.Fragment>
        <h1>Counter Example</h1>
        <div>
          <button onClick={this.increase}>Add</button>
            {this.state.counter}
          <button onClick={this.decrease}>Minus</button>
        </div>
      </React.Fragment>
    );

fragment로 감쌈으로써 엘리먼트요소를 하나 이상 쓸 수 있다.

만약 쓰지 않으면, 엘리먼트요소는 한개밖에 쓸 수 없음.

 return (
     
        <h1>Counter Example</h1>
        <div>
          <h1>ex</h1>
        </div>
      
    );

위처럼 쓰면 오류남.

 

 

화살표함수의 this는 상위스코프를 가르킨다. 는 특성을 이용해서 React에서는 화살표함수를 써준다.

(만약, 화살표함수를 쓰지 않는다면 일일히 this를 바인드 해주어야함)

 

***

Chrome의 개발자도구

Audits를 통해서 SPA의 성능을 볼 수 있고 어떤것이 문제일지 알 수 있다.

***