(TIL 2) React.js 주요개념_JSX
1) 🤔JSX란?
Javascript + XML의 줄임말!
자바스크립트에 XML을 추가한 확장형 문법으로 이해하면 된다(XML은 HTML의 표현법을 확장한 문법)
JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어서 매우 편리하다.
컴포넌트 안에 HTML을 넣어서 예제를 작성해 볼 것이다!
그런데 컴포넌트 작성 방법을 먼저 알아야 함
2) 컴포넌트 작성방법2가지
1) class Component방식
function example() {
return (
);
}
2) function Component방식
class example extends React.Component {
render() {
return (
);
}
}
1) class Component방식
function example() {
return (
);
}2) function Component방식
class example extends React.Component {
render() {
return (
);
}
}Hooks가 나온 뒤로 사람들은 function Component 방식을 많이 사용하는 듯 하다!
그런데 난 우선 학원에서 class 방식을 배웠기에 한동안은 class Component 작성 방식을 사용할 것이다.
⭐어떤 방식을 쓰던 여기서 알고 넘어가야 될 것은 JSX를 쓰면 return 값 안에 HTML을 적을 수 있는 것이다!!
3) JSX 사용예제
<!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>Hello world찍기</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component{
render(){
return(
<>
<h1 className="title">React 주요 개념</h1>
<ul>
<li>JSX</li>
<li>엘리먼트와 렌더링</li>
<li>Component와 Props</li>
<li>State와 생명주기</li>
<li>리스트와 key</li>
<li>State 끌어올리기</li>
<li>합성vs상속</li>
</ul>
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</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>Hello world찍기</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component{
render(){
return(
<>
<h1 className="title">React 주요 개념</h1>
<ul>
<li>JSX</li>
<li>엘리먼트와 렌더링</li>
<li>Component와 Props</li>
<li>State와 생명주기</li>
<li>리스트와 key</li>
<li>State 끌어올리기</li>
<li>합성vs상속</li>
</ul>
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>다음과 같이 return 안에 HTML을 작성해보았다!
✔ 여기서 배우고 갈 점!
1) return값은 최상위 엘리먼트 하나만 인식 할 수 있다!
그래서 return에서 <></>로 전체를 묶어준 것이다.
만약 <></>를 없애면 다음과 같이 빨간줄이 생겨버린다.
2) JSX는 XML 마크업 규칙을 따른다! (⭐빈 엘리먼트에서 슬래시 중요!⭐)
JSX는 앞서 말했듯이 자바스크립트와 XML의 줄임말이다. 그러므로 당연히 XML 규칙을 따를 것이라고 유추해 볼 수 있고, 난 기존에 XML 규칙을 배운 적이 없기에 익숙하지 않았다.
XML은 반드시 종료태그를 입력해야 한다! 그리고 HTML과 차이점을 하나 들자면 XML에서는 img,br과 같은 빈엘리먼트 안에 슬래시(/)를 꼭 써줘야만 한다.
ReactDOM.render(
<App />,
document.querySelector('#root')
)다음과 같이 App 컴포넌트를 불러와 쓸때도 빈태그를 쓰는데 꼭 마지막에 슬래시(/)를 넣어줘야함!
3) 컴포넌트명은 PascalCase(대문자로 시작) 사용!!
컴포넌트명을 지정해줄때는 PascalCase 방식을 사용한다!
이것은 React 명명규칙임!!
4) class 선택자는 className으로 입력하기
Component 생성 방식에 class가 사용되기 때문에 기존의 class선택자는 className으로 입력해줘야 오류가 나지 않는다!
안녕하세요!😊 국비지원으로 개발쪽 공부를 시작한 학생입니다!
혹시나 제가 잘못된 정보를 제공하고 있다면 댓글 부탁드립니다! 💚
글 읽어주셔서 정말 감사합니다🙇♀️
Author And Source
이 문제에 관하여((TIL 2) React.js 주요개념_JSX), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlgus2134/TIL-2-React.js-주요개념JSX저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
