광산김가네

[모각코] ReactJS 시작하기(1) 본문

카테고리 없음

[모각코] ReactJS 시작하기(1)

어둠의 그림자 2022. 7. 22. 10:12

0. 학습계기및 방법

  • 학습계기

이번 7/20 (수)부터 하계 모각코를 진행하게 되면서 팀원들과 함께 ReactJS라는 저명한 웹 프론트엔드 라이브러리르 학습하기로했다.

ReactJS의 경우 작년 초 겨울방학을 통하여 잠깐 학습할 기회가 있었는데 사실 그때는 Vanila JS도 익히지 못한 상태라 DOM, 뷰, 등의 용어들 자체를 이해하지못한 상태로 그냥 예제만 돌려보았는데 지금 남아있는게 아무것도 없다(ㅠㅠ)

하지만 지금은 웹프로그래밍 강좌를 수강한 이후의 시점이라서 잘 습득할수있을거라 기대된다ㅎㅎ

  • 학습방법

주로 노마드코더의 [ReactJS로 영화 웹서비스 만들기] 무료 강좌를 통해 진도를 나가고 리액트를 다루는기술 서적과 유튜브및 구글링을 적극적으로 활용하여 모르는 부분들을 채워나가려고한다

또한 함께 모각코를 진행하는 팀원들과 모각코 시간을 적극적으로 활용하여 질의응답도 하면서 서로 채워가려고한다 (두근두근)

  • 학습계획

계획은 먼저 리액트 강좌를 들어보고 난이도에 맞추어 진행하려고한다. 우선 이번주에는 7/20,7/23 총 2회차에 걸쳐 #2 **THE BASICS OF REACT;**에 대해서 수강하려고한다.

먼저 이번회차 모각코에서는 Vanila JS와 ReactJS와의 차이점및 큰 흐름을 파악해보았다

 

1. Vanila Js vs ReactJs

해당 강좌에서는 버튼을 눌렀을때 화면에 표출되는 숫자가 증가하는 단순한 예제로 두개를 비교해보았다.

먼저 Vanila JS의 코드이다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>Total clicks: 0</span>
    <button id = "btn">Click me</button>
</body>
<script>
    let counter = 0;
    const btn = document.getElementById('btn')
    const span = document.querySelector('span')
    function handleClick(){
        console.log("i have been clicked");
        counter += 1;
        span.innerText = `Total clicks :${counter}`;
    }
    btn.addEventListener("click",handleClick);
</script>
</html>

한번에 보기위해 html파일안에 script 태그를 이용하여 JS 코드도 함께 합쳤다

코드의 큰 흐름을 보면 html 태그를 JS에서 querySelector나 getElementBy(id,class,등등)으로 요소를 가져와서(=선언해서) 이를 함수에서 다뤄주는 형식이다.

또한 html의 내용을 변경해주고 싶다면 이또한 앞서 선언해준 변수의 요소들(위의 코드의 경우 innerText)로 값을 변경해주는 형태이다.

또한 함수를 실행하려면 addEventListner로 어떤 행동(위의 코드의 경우 click)을 할때 어떤 요소에다가 해당 함수를 실행시켜주겠다~라는 의미로 코드를 작성해준다.

다음은 ReactJS로 작성한 코드이다

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
		<div id="root"></div>
	</body>
	<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
	<script>
		const root = document.getElementById("root");
		const h3= React.createElement("h3",null,"Hello I'm word");
		const btn = React.createElement("button",{
				onClick : () => console.log("I'm clicked");
			},
"Click me");
		const container = React.createElement("div",null,[h3,btn]);	
		ReactDOM.render(container,root)
	</script>
</html>
  • 원래 script 태그로 라이브러리를 import 할 필요없이react 프로젝트를 생성하면 필요한 기타등등의 파일들이 모두 생성되는걸로 아는데 해당강의에서는 설명을 위해 고냥 위처럼 하는걸로 보인다

위의 Vanila Js 코드와 비교했을때 코드 길이는 비슷해보이지만 한줄한줄에서의 파워(?)가 다르다는것을 볼수있다.

해당 코드의 경우 html코드를 불러와서 작업하는게 아닌 script태그안에서 html 요소를 만들어주고 내용까지 설정할수있다

또한 createElement 함수내에서 함수를 생성하고, 이를 요소와 바로 연결지어줄수있다

(vs query나 id등으로 가져와서 요소를 선언해주고, addEventListner로 함수와 연결)

이와 같이 React Js는 전체적인 흐름에서 함수를 사용하는데 훨씬더 편리한 흐름을 가지고있다느것을 볼수있

저작자표시 비영리 변경금지 (새창열림)