티스토리 뷰

React

[노마드] ReactJS 영화 웹 서비스 만들기 #2.5 JSX

JxxxxH 2023. 3. 16. 15:52

JSX 란?  (javascript XML) 자바스크립트를 확장한 문법

보통의 HTML과 비슷하지만 property를 HTML 태그의 속성처럼 적으면 된다.

 

바벨 설치하기

JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게  https://unpkg.com/@babel/standalone/babel.min.js 를 설치.
▶ JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.
▶ 바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함.

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

    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I'm a title
        </h3>
      );
    }
    const Button = () => (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("im clicked")}
      >
        Click me
      </button>
    );
    //컴포넌트 첫글자는 반드시 대문자
    const container = (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(container, root);
  </script>
</html>
style={{ backgroundColor: "tomato" }}   // 스타일은 { }가 2개임
= ( ) => ( )  : 화살표 함수가 function이랑 return문을 이미 포함하고 있는 것이다.
위 funcion Title(){return()} 과 const Button=()=>() 는 같은 것이다.

 

여기서  const Button = ( ) => ( ) 중괄호로 감싸는게 아닌 소괄호로 감싸여 있는데 그 이유는?

: 소괄호는 return한다는걸 전제로 하는것이고, 중괄호는 return을 안한다는 걸 전제로 하기 때문이다.

따라서 중괄호로 감싸려면 {return ~~ } 이런식으로 써야한다.

 

JSX part.2 컴포넌트를 다른 컴포넌트 안에 넣는 방법

컴포넌트의 첫글자는 반드시 대문자!!

다른곳에서 사용할 때는 항상 대문자로 시작해야 된다.

<title />  --> 이렇게 하면 그냥 HTML title 태그가 되어버린다.
<Title /> --> 이렇게 써야 내가 여기 만든 Title요소가 된다.
const container = (
  <div>
    <Title />
    <Button />
  </div>
);

 

 

'React' 카테고리의 다른 글

[노마드 ReactJS 영화 웹] #5 CREATE REACT APP  (0) 2023.06.14
[노마드 ReactJS 영화 웹] #4 Props  (0) 2023.06.13
[노마드 ReactJS 영화 웹] #3.5 Inputs and State  (0) 2023.06.05
[노마드 ReactJS 영화 웹] #3.2 setState  (0) 2023.06.04
[노마드] ReactJS 영화 웹 서비스 만들기#2  (0) 2023.03.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함