코드를 재사용하기 매우 유용하다. 컴포넌트가 html을 가지고 있고, 자바스크립트를 그것에 넣을 수 있다. 또한, 다른 변수나 리소스를 그대로 넣을 수 있다. 따라서, 리소스 관리가 편해질 수 있다.
모델, 뷰, 컴포넌트가 있다. 이것은 기존 DOM에서 하던 일들을 보다 깔끔하게 처리할 수 있다.
리액트는 빌드해서 사용하는 것이다.
그러니까, 프론트엔드 개발자가 이것을 이용하여 개발하고나서, 빌드한 결과물을(js, html, css 등 모두 연동 시켜준 결과물) 사용하면 된다. 따라서, 리액트를 처음 시작할때 npm start를 보고 '서버단에서 처리하는건가' 하고 놀란 가슴은 진정시키자.
리액트 처음 시작할때 궁금한 것들
어떠한 모드로, App을 가져오고, 그것을 index.html에 이어주는데 이때 그 둘의 접점은 한개도 없다. 그러나 document를 사용할 수 있는데, 그것은 웹팩 덕분이다.
props가 어떠한 값들을 담을 수 있다는 것은 어림 짐작할 수 있는데, super은 처음본다. 더욱이 C# 개발자라면 말이다.
super는 여기서 그 클래스가 extends하는 클래스의 constructor를 호출하는 것 이다. 이렇게 명시적으로 하고나서야 this를 사용할 수 있다.
그럼 super(props)를 하는 이유를 보자.
리액트 컴포넌트 constructor 내부에서 받아온 그 props를 extends 되는 클래스의 this.props로 설정한다.
따라서, 내 클래스의 constructor에서 this.props를 바로 사용할 수 있게 하는 것 이다.
대부분 this를 위하여 하는 행위들이다.
예를들어, 함수를 사용하기 위해서는 함수를 bind해야한다.
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에서 할 수 있게된 점, 그리고 아주 편리하게 동적인 활동이 가능하다는 점에서 리액트는 긍정적이다.
MQTT 개념 (0) | 2021.07.25 |
---|---|
C++ 람다 Lambda 함수와 Capture 구문 (0) | 2021.07.10 |
안드로이드 개발 Trouble shooting (0) | 2021.03.25 |
러스트 Rust, 라이프 타임이란? (0) | 2021.03.08 |
Fedora 33 설치 후기 및 장단점 (2) | 2020.12.02 |