이번에는 리액트를 배우기 시작했따. 처음 배우는 리액트라서 많이 떨리긴 했지만, 그래도 어쩌겠어 해야지... 리액트가 이제 프엔의 길에 막 들어선 거라고 그랬는데, 진짜 해 보니까 장난 없긴 하더라... 노션에다가 슬쩍슬쩍 정리는 해 놓았지만, 그래도 여기에도 써 놔야 내가 나중에 잘 찾아서 써먹을 것 같음

일단 리액트를 시작하기 전, 리액트를 코드 안에 작성해 놔야 한다고 했다.

리액트 문서 란에서 CDN 링크 클릭

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

☝️위 코드를 HTML안에 입력해야 함

Javascript XML = JSX 코드

JS에 XML을 추가한 문법이고, 보통 리액트에서만 사용
HMTL 문서 구조를 JS에서도 사용가능 따라서 JS 내부에서도 HTML을 짜듯 코드 구성 가능하다고 한다. 이를 읽기 위해서는 Babel(바벨)이라는 컴파일러(번역기)가 필요하고 한다.

Babel(바벨)

Babel · The compiler for next generation JavaScript

JSX 코드 에서 지켜야 할 것

class 👉 className

기존 HTML에서 style 또는 클래스를 정할 때 kebab-case 를 주로 사용하였지만 JSX 에서는 반드시 camelCase 로 사용을 해야 한다.
JS로 번역할 때 ‘–’ 는 빼기의 의미를 가지니까, 바벨이 헷갈려 한다고 한다.

🤓 바인딩 해 보기

function App() {
  const str = "안녕, 리액트 세상";
  return <div className="App">{str}</div>;
}
export default App;
//🔍함수 넣기 가능
function App() {
  function amazingJSX() {
    return "안녕, 리액트 세상";
  }
  return <div className="App">{amazingJSX()}</div>;
}
// 🎉alert 속성 넣어보기
function App() {
  function alertFunc() {
    alert("안녕, 리액트 세상"");
  }
  return <div className="App">{alertFunc}</div>;
}
// 🖼️이미지 넣어보기
import logo from "./logo.svg";
function App() {
  return (
    <div className="App">
      <img src={logo} alt="로고" />
    </div>
  );
}

🎀인라인 스타일 적용하기

//틀린 문법
function App() {
  return (
    <div className="App">
            <div style="font-size:32px">인라인 스타일</div>
    </div>
  );
}
//맞는 문법
function App() {
  return (
    <div className="App">
            <div style={{ fontSize: "32px" }}>인라인 스타일</div>
    </div>
  );
}
//객체를 만들어서 전달 가능
function App() {
  const fontStyle = { fontSize: "32px" };
  return (
    <div className="App">
      <div style={fontStyle}>인라인 스타일</div>
    </div>
  );
}

🤡 함수형 컴포넌트와 클래스형 컴포넌트

보통 함수형 컴포넌트가 깔끔하고 쓰는 코드의 양이 적기 때문에 클래스형 컴포넌트보다 함수형 컴포넌트를 사용하는 경우가 많다고 한다.

//함수형 컴포넌트
function MainHeader() {
  return <h1>🤓안녕,컴포넌트 세상!</h1>;
}
export default MainHeader;
//클래스형 컴포넌트
 import React, { Component } from "react";
 class MainHeader extends Component {
   render() {
     return <h1>🤓안녕, 클래스 컴포넌트 세상</h1>;
   }
 }
 export default MainHeader;

오늘은 여기까지. 다음 부터는 State와 3항연산자를 배워야 하는데, 잘 할 수 있을지나 모르겠다... 그래도 처음 배우는 것 치고는 재미있게 배운 것 같다. 약간 HTML이랑 CSS 처음 배웠을 때 느낌으로 재미있게 하는 중 하지만 그래도 어려운 코딩의 세계...