티스토리 뷰

개발/React

Day 2 - ReactJS

zpqmdh 2022. 12. 22. 19:12

오늘은 2일차이다. 새로운 것을 배우는 것은 역시 항상 재밌다.

조금 시간이 지나면 지루해지는데 리액트는 어떨지.. 흥미 잃지 않고 열심히 하자 끝까지! 아자자

그나저나 퇴근하고 스터디까지 하려니까 좀 힘듦.. <- 이제 고작 2일차인데? ;ㅁ;

state: 데이터가 저장되는 곳

 

<!DOCTYPE html>
<html>

<body>
    <div id="root"></div>
</body>
<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>

</html>

버튼을 클릭할 때 마다 Total Clicks 증가.

하지만 값이 바뀔 때 마다 render 함수를 호출하여 다시 rendering 해줘야 함

 

vanilaJS와 비교해보면 값이 바뀔 때마다 h3, button, div는 업데이트되지 않고 UI에서 바뀐 부분만 update 해준다.

render함수를 호출하면 새 Container 컴포넌트(전체)를 생성할 것이라고 생각하지만!

ReactJS는 새로 렌더링하더라도 전체를 전부 재생성할 필요 없이 바뀐 부분만 새로 생성할 수 있게 도와줌

 

const data = React.useState();

위의 코드는 [undefined, f] 를 return 해준다. undefined는 data이고 data를 바꿀 때 사용하는 함수가 f이다.

argument로 초기화 가능함

 

배열에서 요소들을 꺼내서 이름을 부여하는 방법

const food = ["tomato", "potato"]
const [myFavFood, mySecondFavFood] = food;
myFavFood // 'tomato'
mySecondFavFood // 'potato'

 

<!DOCTYPE html>
<html>

<body>
    <div id="root"></div>
</body>
<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"); 
    function App() { 
    	const [counter, modifier] = React.useState(0); 
        const onClick = () => { 
        	modifier(counter+1); 
        }; 
        return (
    		<div>
        		<h3>Total Clicks: {counter}</h3>
        		<button onClick={onClick}>Click me</button>
    		</div>
    	); 
    } 
    ReactDOM.render(<App />, root);
</script>

</html>

코드가 엄청 간결해짐

React.useState(0);으로 counter는 0으로 modifier 함수를 만들고

modifier 함수가 자동으로 렌더링 해줌

(리액트 짱이다!)

저작자표시

'개발 > React' 카테고리의 다른 글

Day 6 - ReactJS  (0) 2022.12.27
Day 5 - ReactJS  (0) 2022.12.26
Day 4 - ReactJS  (0) 2022.12.25
Day 3 - ReactJS  (2) 2022.12.23
Day 1 - ReactJS  (1) 2022.12.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함