리액트 React.JS 튜토리얼 핵심 공략

리액트를 사용하는 이유

코드를 재사용하기 매우 유용하다. 컴포넌트가 html을 가지고 있고, 자바스크립트를 그것에 넣을 수 있다. 또한, 다른 변수나 리소스를 그대로 넣을 수 있다. 따라서, 리소스 관리가 편해질 수 있다.

모델, 뷰, 컴포넌트가 있다. 이것은 기존 DOM에서 하던 일들을 보다 깔끔하게 처리할 수 있다.

 

사용하는 방법

리액트는 빌드해서 사용하는 것이다.

그러니까, 프론트엔드 개발자가 이것을 이용하여 개발하고나서, 빌드한 결과물을(js, html, css 등 모두 연동 시켜준 결과물) 사용하면 된다. 따라서, 리액트를 처음 시작할때 npm start를 보고 '서버단에서 처리하는건가' 하고 놀란 가슴은 진정시키자.

 

리액트 처음 시작할때 궁금한 것들

1. index.js의 ReactDOM.Render

어떠한 모드로, App을 가져오고, 그것을 index.html에 이어주는데 이때 그 둘의 접점은 한개도 없다. 그러나 document를 사용할 수 있는데, 그것은 웹팩 덕분이다. 

stackoverflow.com/questions/41738421/how-react-js-index-js-file-contacting-index-html-for-id-references

How React JS index.js file contacting index.html for id references?

2. super은 뭐고 super(props)는 왜 하는가?

props가 어떠한 값들을 담을 수 있다는 것은 어림 짐작할 수 있는데, super은 처음본다. 더욱이 C# 개발자라면 말이다.

super는 여기서 그 클래스가 extends하는 클래스의 constructor를 호출하는 것 이다. 이렇게 명시적으로 하고나서야 this를 사용할 수 있다.

그럼 super(props)를 하는 이유를 보자.

리액트 컴포넌트 constructor 내부에서 받아온 그 props를 extends 되는 클래스의 this.props로 설정한다.

따라서, 내 클래스의 constructor에서 this.props를 바로 사용할 수 있게 하는 것 이다.

 

대부분 this를 위하여 하는 행위들이다.

예를들어, 함수를 사용하기 위해서는 함수를 bind해야한다.

App.js 예시를 보자

class App extends Component
{
  constructor(props) {
    super(props);
    this.state = {clicked:0};

    this.clickPlus = this.clickPlus.bind(this);
  }

  clickPlus(){
    this.setState(s => ({
      clicked: s.clicked+1
    }));
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.clickPlus}>
          {this.state.clicked}
        </button>
      </div>
    );
  }

}

상태라는 것이 변할때마다 다시 그 값을 변경해주기 때문에, this.state.clickd 변수는 그냥 써도 인스턴스로 사용되었다고 볼 수 없다.

 

마무리

html을 js에서 할 수 있게된 점, 그리고 아주 편리하게 동적인 활동이 가능하다는 점에서 리액트는 긍정적이다.