📚State
📑 JSX에 변수 전달하기
- 변수 선언후, 중괄호를 열어주고 변수 이름을 담아주면 된다.
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render()
}
function render(){
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>);
render()
</script>
</body>- render() 함수를 통해 변화된 내용을 새롭게 반영한다.
- Container 컴포넌트는 업데이트 된 counter를 가지게 된다.
하지만 위와 같은 방법이 최선은 아니다.
- 값을 바꿀 때마다 다시 렌더링 하는 걸 잊어서는 안 되기 때문이다.
📑React의 매력
- 클릭 버튼을 누를 때 구글 Chrome이나 Brave 요소들이 업데이트되고 있는 것을 바로바로 보여준다.
- 이 때 React.js 파일 검사 탭을 켜고 버튼을 클릭해보면 h3, button, div들은 업데이트 되지 않는 걸 확인할 수 있다. 오직 바뀐 부분만 업데이트해주고 있다.
- 우리가 여러가지 요소들을 리렌더링하려고 해도 전부 다 새로생성되지는 않는다는 것이다.
출처
무언가를 만들어낸다는 것은 무척이나 즐거운 일입니다.