React & React 주요 개념.(Component, Props, State)
React는 사용자 인터페이스 구축에 사용되는 오픈 소스 JavaScript 라이브러리이다. 특히 단일 페이지 애플리케이션용으로 쓰인다. 이 또한 재사용 가능한 UI 구성요소를 만들어서 쓸 수 있다.
react는 virtual Dom 을 써서 status에 따라 유기적으로 rendering 을 해줄 수 있는 것이다.
react 쓰는 이유는 component로 설계해서 그것들을 재사용 할 수 있어서 사용성 때문에 쓴다. virtual dom을 씀으로써 렌더링이 빨라진다. 함축을 해서 추상화 함으로 사용자가 내부 코드까지 볼 필요 없다.
react의 data flow는 flux나 redux를 쓴다.
flux
모든 데이터는 dispatcher로 흐른다. action이 dispatcher로 흐르는데 이 action 들은 사용자가 view와의 상호 작용으로 생성이 된다. 그런 후에 그것들이 callback 와 함께 등록된 stores 불러와서 all stores에 행동 강령을 전달한다. 등록된 콜백으로 stores가 state에 맞는 action 들에 한 해 서서 respond 한다. stores는 change event라는 걸 발산하고 controller-view 한태 data 계층에 변화가 있다고 알려준다. controller-view는 그걸 듣고 store에서 data를 event handler 로 데이터를 받는다. controller-view는 setState() 메서드로 자신들과 그 해당되는 자식들을 다 렌더링을 다시 한다.
이렇게 함으로써 데이터 플로우는 한 방향으로 만들 수 있고 state는 한 곳에 저장되게끔 하고 어플들을 다 independent 하게끔 만들어서 SOC 설계 방식을 따라 만들 수 있다. 그렇게 함으로써 하나를 수정하면 다른 것을 수정 안 해도 되게끔 만들 수 있다.
Redux는 flux 와 같은 개념이지만 다른 점이 있다면 store 이 하나이다. store 이 하나여서 데이터들은 다 거기에 저장되어 있고 보기 쉽고 조작도 쉽다. 또한 미들웨어로 정의함으로써 쓰고 있는 action들을 조작할 수 있다.
Component, prop, state
component로 우리는 데이터들을 제 조립해서 지정한 인터페이스를 보여준다. react에서 쓰는 하나의 모듈이라고도 볼 수 있다. 보통 컴포넌트를 분리해서 작성해서 프로젝트의 유지 및 보수를 수월하게끔 관리를 한다.
const Hello = () => <h1>Hello!</h1>;이것 또한 component이다. 정확히 말해서는 화살표 함수를 쓴 함수 component이다.
component를 만들때
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}class로 통해서 만들고 render을 쓰는것이다.
그런 후에 index.js 에서
import React from 'react';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// 첫번째 파라미터는 무엇을 보여줄지. 두번째 파라미터는 어떤 DOM 에다가 보여줄지.함수(스테이트리스) 와 class(스테이트풀) component
함수형은 props를 써서 react 요소를 return 을 해줘서 렌더링을 해준다.
class component는 logic 을 담고 있고 state도 담고 다른 component를 담음으로써 container 역할도 한다.
둘 중 어느 것을 골라야 할 때 고려해야 할 점은 state를 관리하던가, lifecycle 메서드나, logic이나 event handler을 써야 할 때 class를 쓰고 아니면 함수형 component를 쓰면 된다.
prop는 component를 쉽고 다양하게 커스텀 하게 쓸 수 있게 만든 방식이다. 그것들은 속성/데이터를 한 컴포넌트에서 다른 컴포넌트를 보내는 방법을 갖는다. 보통 parent에서 child 컴포넌트로 한방향 데이터플로우 를 갖는다. 주의점은 prop로 보낸것들은 read-only이고 절대로 수정하면 안 된다.
react component ‘Welcome’ 이름을 갖는 예시
<div id="root"></div>function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));//Hello React!es6 class를 써서 react component ‘Welcome’ 이름을 갖고 render 메서드를 쓴 예시
class Welcome extends React.Component {
render() { return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />, document.getElementById('root')); //Hello React!속성 전달 인자를 갖는 예시
class Welcome extends React.Component {
render() { return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));//Hello React!state 란 동적인 데이터와 컴포넌트의 성격을 저장하는 객체이다. 동적인 데이터라서 정보가 변하는 것을 렌더링 중간중간에 감지할 수 있다. state는 무조건 class로 만 정의할 수 있다.
state는 props 와 비슷하지만, state는 private 하고 모든 것은 그 componenet에 정의된 state에서 결정된다. props에 의하여 출력이 결정되지 않는다.
class Hi extends React.Component {
render(){
return <h1>Hi</h1>;
}
}위에 있는 코드는 일반 class component이다.
class Hi extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ‘MyName’
}
}
render(){
return <h1>Hello { this.state.name }</h1>;
}
}이것은 스테이트를 추가한 것이다. 위에 보시다시피 props를 불러오는데 super()은 constructor을 쓸 때는 필수이고 props를 부르긴 했는데 안 쓴다. 이것은 왜냐면 나중에 확장성을 위해서 연동이 되는지 확인 용이다. state를 초기화할 때 this.state를 썼는데 그 후에 state 변화를 주기 위해서 this.setState를 써야 한다. 이것을 써야지만 component 가 state에 변화에 따라 브라우저에 다시 렌더링을 보장할 수 있다.
정리해서 쉽게 쓸 수 있고, DOM 조작이 쉽고, 빠르고, 선언적 UI이고, 컴포넌트를 재사용이 가능하고, 데이터 플로우가 한 방향이라서 쓰기 좋다.
References:
https://facebook.github.io/flux/docs/in-depth-overview
https://stories.jotform.com/7-reasons-why-you-should-use-react-ad420c634247
https://www.w3schools.com/whatis/whatis_react.asp
https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb