state
데이터가 저장될 곳이다.
JSX란?
HTML과 같지만 편리한 기등들 마저 가지고 있다.
변수를 JSX에 전달하는 방법
{}
Container를 리렌딩해주어야 변수가 업데이트 된다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.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 += 1;
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={Countup}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>[작동 원리]
1. Container을 렌더링 해줌 (count = 0)
2. 클릭 이벤트가 발생할 때마다. Countup 함수가 실행되고, count 변수의 수는 증가한다.
3. 하지만 Container의 함수는 더이상 실행되지 않기 때문에 h3 태그 요소를 바꿀 수 없다.
-> 때문에 이벤트 함수가 실행 될 때마다 리랜더링이 필요하다.우리가 값을 바꿀때마다, 다시 렌더링하는 것을 잊어서는 안된다.
바닐라에서 우리가 요소를 확인해 보면 구글 chrom 요소들이 업데이트 되고 있는 것을 바로바로 보여준다.
하지만, React.js 파일 검사 탭을 켜고, 버튼을 클릭해보면 h3, bubtton, div들은 업데이트 되지 않는게 보인다.
UI에서 바뀐부분만 업데이트 해주고 있다.
React.js는 변경이 필요 없는 부분을 제외하고 업데이트를 진행한다.
여러가지 요소들을 리렌더링 하려고 해도, 전부 다 새로 생성되지 않는다.
바뀌는 부분만 생성된다.
React를 사용하는 이유
변경이 필요한 부분만 변경이 일어나고, 불필요한 요소에는 변화가 나타나지 않기 때문에
때문에 interative한 것을 만들기에 최적화 되어있다.
container 컴포넌트가 전체를 리렌더링 하지만 HTML 코드에서는 오로지 숫자만 바뀐다.
React.js 어플 내에서 데이터를 보관하고, 자동으로 리렌더링을 일으킬 수 있는 최고의 방법을 배워야 한다.
1. HTML을 바로 만들 수 있다.
2. 바로 event를 설정시키고
3. UI를 업데이트 하면 자동으로 리랜더링이 일어난다.
rerender의 남발을 줄이기 위해서는?
Container에 상수를 만들어 준다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h3>Total clicks: {counter} </h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
usedata는 2개의 배열로 이루어져 있다.
modifier function은 값으로 업데이트하고 리렌더링이 일어난다.
우리가 modifier 함수를 실행해서 state를 변경할 때, 컴포넌트가 재생성 된다.
새로운 값을 가지고 리렌더링 된다.
이때, 모든 것을 바꿔주는 것이 아닌 변경되는 부분만 바꿔준다.
