JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.
기초 지식은 다른 강의를 참조하도록 하라.
이 강의는 React의 사용법 위주로 작성되어 있다.
왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.
참조:
React 4장에서 보면 props라는 개념이 존재한다. 흔히 말하는 변수의 개념과 비슷하지만 엄밀히말하면 변수로 쓰기엔 무리가 있다.
그래서 이제 진짜 변수로 쓰는 state라는 것에 대해서 한번 알아볼 시간이다.
이름이 어쨰서 state일까라고 생각할 수 있지만 일종의 상태의 관점에서 보기 때문이다.
이는 보통 lifecycle과 event binding관점에서 봐야하지만 아직 두 개념을 이야기하지는 않았으므로 간략하게 설명하고 넘어 가겠다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
getInitialState: function () {
return {
clickCount: 0
}
},
myClick: function () {
this.setState({
clickCount: this.state.clickCount + 1
});
},
render: function () {
let count = this.state.clickCount;
return (
<div>
<input type="button" value="Click!" onClick={this.myClick}/><br/>
<a>{this.state.clickCount}</a>
</div>
);
}
});
ReactDOM.render(
<HelloWorld/>,
document.querySelector('#container')
);
</script>
</body>
</html>
react에서 먼저 라이프 사이클이라는 개념에 대해서 설명하고 넘어가야할 것이다.
life cycle - 컴포넌트가 생성되고 파괴되는 과정
여러분은 이제 계속해서 라이프사이클을 알아야한다.
컴포넌트는 생성되고 경우에 따라서 업데이트되며 또 경우에 따라서는 파괴가 된다.
아직 자세히 알건 없지만 어쨋든 라이프사이클은 간단히 설명하자면
생성 -> 마운트(장착, 그 후 렌더링됨) -> 업데이트(계속 반복됨) -> 파괴를 거치는데
우리는 변수를 state라고 부르고 이 state를 관리한다고 했다.
이 state는 지정된 녀석들만 사용할 수 있다.
그 이유는 앞으로 진행하면서 차차 이야기 할 것이다.
어 쩃든 여러분은 getInitailState라는 메소드에 주목할 필요가 있다.
getInitialState: function () {
return {
clickCount: 0
}
},
이 메소드는 변수(state)를 등록하고 초기화해주는 메소드이다.
이 초기화 되는 타이밍은 생상자 호출 후 마운트 되기 직전에 생성되는데 이 타이밍을 잘 알아둬야 나중에 문제가 없다.
지금 우리는 clickCount라는 변수를 만든 것이다.
Event bind -이벤트 붙히기
이 이벤트는 여러분이 흔히 html에서 사용하는 그 이벤트와 동등하다.
다만 react의 이벤트를 붙히는 과정이다.
myClick: function () {
this.setState({
clickCount: this.state.clickCount + 1
});
},
여러분이 붙혀줄 이벤트를 만들면된다.
이름은 여러분이 마음대로 하면 되는데 중요한건 state의 값을 바꿀때 setState를 사용해줘야한다.
this.setState({
clickCount: this.state.clickCount + 1
});
여러분이 바꿔줄 값을 바꿔줘야하는데 사실 이렇게 안바꿔도 값 자체는 바뀐다.
그냥 js를 바꿔주는것 처럼 하는 방법도 불가능 하지는 않다는 것이다.
하지만 이럴경우 "렌더링"은 자동으로 되지 않는다.
그래서 값을 바꿀때는 반드시 setState를 사용해 준다.
render: function () {
return (
<div>
<input type="button" value="Click!" onClick={this.myClick}/><br/>
<a>{this.state.clickCount}</a>
</div>
);
}
그리고 여러분이 사용할 이벤트를 변수로서 붙혀준다. 이제 준비는 끝났다.
제대로 적용되는지 확인해보자.
'Programming > JavaScript-React' 카테고리의 다른 글
| [React-09]react의 props 다시 자세히 알아보자 (0) | 2019.05.12 |
|---|---|
| [React-08]create-react-app, cli로 프로젝트 만들기 (0) | 2019.03.22 |
| [React-06]css - react css스타일 (0) | 2018.11.24 |
| [React-05]css - 기존 css스타일 (0) | 2018.11.24 |
| [React-04]props(변수처럼 사용하기) (0) | 2018.11.23 |