th42500의 TIL

[React.js] JSX를 활용한 React.js 프로그래밍 본문

Frontend/React.js

[React.js] JSX를 활용한 React.js 프로그래밍

th42500 2022. 4. 20. 12:28

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다.

자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요.

https://nomadcoders.co/react-for-beginners/lobby

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

 

JSX를 활용한 React.js 프로그래밍

JSX?

👉 Javascript를 확장한 문법

👉 HTML과 유사한 문법을 사용하여 React.js 요소를 생성

 

JSX를 활용하여 React.js 코드 작성

JSX를 사용하여 코드를 작성했을 때의 다른 점

1️⃣ html과 유사한 형태의 코드를 작성

2️⃣ props에 eventListener를 등록할 때에 on으로 시작

3️⃣ eventListener 정의 시 콜론(:)이 아닌 등호(=)를 이용하여 정의 

4️⃣ 각 요소의 내용들을 ( )로 묶어줌

5️⃣ 렌더링 하고자 하는 React Element를 모두 함수에 담아 하나의 컴포넌트처럼 사용

더보기

밑의 2가지 방법 중 아무 방법이나 사용 가능

 

1️⃣ arrow function으로 구현할 경우 👉 2️⃣번 코드의 return문을 포함한 것과 같아 사람들이 더 선호

const Title = () => (
    <h3 id="title" onMouseEnter = {() => console.log("mouse enter")}>
        Hello, I'm a title!
    </h3>
);

2️⃣ arrow function으로 구현하지 않는 경우

function Title() {
	return (
        <h3 id="title" onMouseEnter = {() => console.log("mouse enter")}>
            Hello, I'm a title!
        </h3>
    );
}

6️⃣ 각 컴포넌트를 렌더링 시 반드시 첫글자는 대문자

    👉 소문자로 작성할 경우 HTML 태그로 인식

<!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 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");

		const Title = () => (
			<h3 id="title" onMouseEnter = {() => console.log("mouse enter")}>
				Hello, I'm a title!
			</h3>
		);

		const Button = () => (
			<button id="btn" onClick = {() => console.log("I'm clicked")}>
				Click Me!!
			</button>
		);

		const Container = () => (
			<div>
				<Title />
				<Button />
			</div>
		);
		ReactDOM.render(<Container />, root);
	</script>
</html>

JSX로 적은 코드는 브라우저가 이해하지 못해 브라우저가 이해할 수 있는 형태로 바꾸어 주어야 한다.

 

https://babeljs.io/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

Babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할이다.

 

<script scr="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<script type="text/babel"></script>

Babel을 이용하기에 앞서 CDN을 이용하여 import 해준다.

 

앞서 적었던 코드들을 Babel을 이용하여 JSX로 적은 코드를 변환한다면

Babel을 이용하여 JSX 코드 변환

위와 같이 자동으로 변환되어 브라우저가 JSX를 인식할 수 있게 된다.

 

결과 페이지
작성한 JSX 코드
Babel을 이용하여 JSX가 변환된 코드 👉 <head>에 담김

이번 시간에는 JSX, Babel을 이용한 JSX코드 변환, 컴포넌트 안에 다른 컴포넌트 삽입에 대해 배울 수 있었다.

'Frontend > React.js' 카테고리의 다른 글

[React.js] Unit Converter (단위 변환) 앱 만들기  (0) 2022.04.29
[React.js] State를 Setting 하는 2가지 방법  (0) 2022.04.28
[React.js] React.useState()를 이용하여 자동으로 리렌더링 하기  (0) 2022.04.27
[React.js] vanillaJS VS React.js  (0) 2022.04.20
[JavaScript & React.js] 버튼을 클릭한 횟수 출력하기  (0) 2022.04.19
'Frontend/React.js' Related Articles more
Comments