TAB 2022 2학기 학회활동 [팀 스터디]
TIL 포스팅입니다.
작성자 : 40기_박지민
ref. 노마드 코더 React JS로 영화 웹서비스 만들기
▶ReactJS
어플리케이션이 상호작용하기 쉽게 만들어주는 라이브러리
element를 업데이트 할 수 있어 유저에게 보여지는 내용, 즉 HTML을 업데이트 할 수 있다!
*React-dom : React element를 HTML에 두는 역할. JS로 element를 만들어 역으로 HTML에 삽입시킨다.
∴ 앱 실행 시 소스를 보면 작성한 컴포넌트는 보이지 않음
↓ React 사용을 위해 필요한 코드
<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>
▶ReactJS로 element 생성
* 잘 쓰이지 않는 방식.
<html>
<body>
<div id = 'root'></div>
</body>
<script>
const root = document.getElementById('root');
const 원하는 태그명 = React.createElement(
'태그명',
{class나 property, eventlistner},
"content"
);
ReactDOM.render(태그명,root); // 해당 태그가 body의 root자리로.
</script>
</html>
▶EventListner
바닐라JS에서 사용되는 event명 앞에 on을 붙여줘야 ReactJs에게 eventlistner를 생성한다고 알려줄 수 있음
" event명 : () => 함수내용 " 형식으로 작성
▶ReactDOM.render()
() 내에 사용자에게 보여줄 내용 작성
ReactDOM.render(넣을 내용, 넣을 위치); 형태.
단, 두 가지 이상을 render하고 싶을 경우
const 변수명 = React.createElement("div",null,[넣을 태그, 넣을 태그]) 코드 추가 후 넣을 내용에 변수명 삽입.
▶JSX
JavaScript를 확장한 문법.
html과 유사한 형태로 작성하나 style 작성 시 중괄호 두 겹을 필요로 한다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
~JSX 내용~
</script>위와 같이 JSX를 위한 Js코드 import 후 *type="text/babel"을 추가해줘야 오류 없이 작동한다.
* Babel(코드변환기) 통해 코드를 브라우저가 이해 가능한 형태로 바꿔주는 역할
▷ JSX 유무 차이 :
◇ JSX 미사용 (createElement 사용)
const h3 = React.createElement(
"h3",
{id:'title',onMouseEnter:()=>console.log("mouse enter"),},
"Hello I'm a title"
);함수 뒤 : () =>
◇ JSX 사용
const Title = (
<h3 id= "title" onMouseEnter={()=>console.log("mouse enter")}>
Hello I'm a title
</h3>
);
함수 뒤 = { ()=> }
* " function 함수명(){return( ~ );} " = " const 함수명 = ()=> ( ~ ); "
▶State
[웹 FE 스터디] React : 이벤트 ~ 생성 기능 (tistory.com) 기본적인 내용은 해당 링크 참고
해당 포스팅에서는 예제를 통해 State 사용 여부에 따른 코드 차이만 비교
◇ State 미사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>no state</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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 onClick(){ counter = counter + 1; render();}
function render(){ReactDOM.render(<Container/>,root);
function Container(){
return(<div>
<h3>Total Clicks:{counter}</h3>
<button onCLick={onClick}>Click me</button></div>);
}
</script>
</html>◇State 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [counter,setCounter] = React.useState(0);
const onClick = ()=> { setCounter(current => current + 1); } //setCounter(counter+1);도 가능
return( <div>
<h3>Total clicks : {counter}</h3>
<button onClick={onClick}>Click me</button>
</div> );
}
const root = document.querySelector("#root");
ReactDOM.render(<App/>, root);
</script>
</html>'22 - 1학기 > 팀 스터디' 카테고리의 다른 글
| [웹 FE 스터디] ReactJs ~6.4 (0) | 2022.11.03 |
|---|---|
| [웹 FE 스터디] 3.6~6.4 (0) | 2022.11.03 |
| [웹 FE 스터디] 리액트 시작하기(3) (0) | 2022.10.06 |
| [웹 FE 스터디] REACT ~3.5 (0) | 2022.10.06 |
| [웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State (0) | 2022.09.29 |
