https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
<!--index.html-->
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
//counter를 증가시키고 다시 render를 호출
function countUp() {
counter = counter + 1;
render(0);
}
//render함수가 호출되면 똑같은 과정 반복
//데이터가 바뀔때마다 Container를 rerender
function render() {
//Container를 root에 담아줌
ReactDOM.render(<Container />, root);
}
//button 클릭할 때 countUp함수 호출
const Container = () => (
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
render();
</script>
</html>
리액트의 가장 큰 장점 : 변경된 부분만 업데이트 됨(변경된 부분 + 변화가 일어난 부분의 자식 컴포넌트들까지)
=> 일반 js를 쓴 브라우저는 노드 정보가 바뀔때마다 노드 트리를 5단계에 걸쳐 처음부터 다시 생성
하지만 리액트는 가상dom을 써서 우리 눈에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 실제dom에 던져줌
=> 브라우저 작동원리와 연관
프론트엔드는 렌더(트리)단계를 얼마나 최적화 하는가가 매우매우 중요!!
하지만 이 방법은 계속해서 render해주는 것을 잊으면 안됨 -> 최고의 방법은 아님
'Study > React' 카테고리의 다른 글
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - prop types (0) | 2023.01.17 |
|---|---|
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - Props (0) | 2023.01.17 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State Functions (0) | 2023.01.11 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - setState (0) | 2023.01.10 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - react vs vanila js (0) | 2023.01.03 |
