TAB 2022 2학기 학회활동 [팀 스터디]
TIL 포스팅입니다.
작성자 : 38기_김민서
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로 작성한 코드이다
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 태그로 라이브러리를 import 할 필요없이react 프로젝트를 생성하면 필요한 기타등등의 파일들이 모두 생성되는걸로 아는데 해당강의에서는 설명을 위해 고냥 위처럼 하는걸로 보인다
위의 Vanila Js 코드와 비교했을때 코드 길이는 비슷해보이지만 한줄한줄에서의 파워(?)가 다르다는것을 볼수있다.
해당 코드의 경우 html코드를 불러와서 작업하는게 아닌 script태그안에서 html 요소를 만들어주고 내용까지 설정할수있다
또한 createElement 함수내에서 함수를 생성하고, 이를 요소와 바로 연결지어줄수있다
(vs query나 id등으로 가져와서 요소를 선언해주고, addEventListner로 함수와 연결)
이와 같이 React Js는 전체적인 흐름에서 함수를 사용하는데 훨씬더 편리한 흐름을 가지고있다느것을 볼수있다
2. JSX란?
javascript를 확장한 문법으로써 xml과 굉장히 유사하게 생긴 친구이다.
코드가 브라우저에서 실행되기 이전인, 번들링되는 과정에서 일반 JS 형태로 변환된다고 한다.
변환과정을 예제로 가져와봤다.
변환전
function App(){
return (
<div>
Hello <b>react</b>
</div>
);
}변환이후
function App(){
return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}저번에 노마드코더 강좌에서 배웠던 createElement 이런걸 앞으로 코드에서 직접적으로 쓰는것이아닌,
위에 있는 변환전 코드처럼만 쓰면 알아서 변환을 해주는 그런 멋있는 애인것이다.
[React 기초] JSX란? / JSX 문법
JSX란? JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스
developerntraveler.tistory.com
JSX 문법
1. 컴포넌트에 여러요소, 즉 2개이상 있다면 부모요소가 감싸는 형태여야한다.
예제는 해당블로그에서 참고하였는데
function App(){
return(
<h1>테스트1</h1>
<h2>테스트2</h2>
)
}
//올바른코드
function App(){
return(
<div>
<h1>테스트1</h1>
<h2>테스트2</h2>
</div>
)
}이런식으로 div태그로 감싸줘야한다고 한다.
그 이유는 리액트가 Virtual Dom방식에서 컴포넌트 변화를 방지할때 컴포넌트 내부가 DOM트리구조로 이루어져야하기때문이다,
2. 자바스크립트 표현식
자바스크립트를 사용할수있다고 한다!
다만 {}로 감싸주면 되고 유효한 모든 JS 표현식을 넣을수있다.
3. 조건문/반복문 대신 조건부 연산자(;삼항 연산자) 사용
파이썬이나 c언어 등에서 많이사용하는 if나 for문같은 경우 JS표현식이 아니기때문에
사용이 불가하다.
따라서 조건이나 반복하고싶을 경우에 JSX에서의 사용방법을 알아보자
1. 외부에서 사용
function App() {
let desc = '';
const loginYn = 'Y';
if(loginYn === 'Y') {
desc = <div>GodDaeHee 입니다.</div>;
} else {
desc = <div>비회원 입니다.</div>;
}
return (
<>
{desc}
</>
);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]2. 내부에서 사용
function App() {
const loginYn = 'Y';
return (
<>
<div>
{loginYn === 'Y' ? (
<div>GodDaeHee 입니다.</div>
) : (
<div>비회원 입니다.</div>
)}
</div>
</>
);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]<- 이런 경우에는 ?와 같은 삼항 연산자를 사용하여 조건을 걸어준것을 볼수있다.
3. 화살표 함수 사용
function App() {
const loginYn = 'Y';
return (
<>
{
(() => {
if(loginYn === "Y"){
return (<div>GodDaeHee 입니다.</div>);
}else{
return (<div>비회원 입니다.</div>);
}
})()
}
</>
);
}
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]4. 주석사용방법
JS와 동일하게 /**/이지만 특이하게 {}로 또 감싼다는 규칙이있다.
+이외에 camelCase 규칙으로 이름을 지정한다는 규칙이있다.
'22 - 1학기 > 팀 스터디' 카테고리의 다른 글
| [웹 FE 스터디] REACT ~3.5 (0) | 2022.10.06 |
|---|---|
| [웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State (0) | 2022.09.29 |
| [웹 FE 스터디] React : 수정 ~ 삭제 기능 (0) | 2022.09.29 |
| [웹 FE 스터디] React : Creat~Delete (0) | 2022.09.27 |
| [웹 FE 스터디] 리액트 시작하기(2) - JSX, elements, props (0) | 2022.09.22 |
