오늘의 React

▶ React는 왜  쓰나?

1. Single Page Application

• 우리가 인터넷을 사용할 때 여러 웹사이트를 방문한다. 일반적으로 웹사이트는 여러 페이지로 구성되어 있다. 예를 들어, 쇼핑몰 사이트에는 홈페이지, 상품 목록 페이지, 장바구니 페이지 등이 있다.
• 보통, 이렇게 다른 페이지로 이동할 때마다 새로운 화면이 로딩되고, 기존에 본 화면은 사라진다. 이런 경우, 우리는 화면 전환을 기다려야 하고, 때때로 느린 로딩 때문에 불편을 느낄 수 있다.
• 그래서 만들어진게 SPA이다. 하나의 페이지로 구성된 웹사이트이다. 이렇게 하면, 페이지 이동 없이 필요한 정보만 빠르게 가져와서 화면에 보여준다. 그래서 화면 전환을 기다릴 필요가 없고, 사용자 경험이 좋아진다.
• 예를 들어, 쇼핑몰 사이트에서 상품 목록에서 장바구니로 이동할 때, 전체 페이지를 로딩하는 대신에 필요한 부분만 빠르게 바뀐다.
• 결론적으로 SPA는 하나의 웹 페이지로 구성되어, 페이지 이동 없이 필요한 정보만 빠르게 가져와서 화면에 보여주는 웹사이트를 말한다. 이로 인해 사용자는 더 빠르고 편리한 경험을 누릴 수 있다.

2. html 재사용 편리

3. 앱개발 기능

 

▶ JSX 문법 3개

1. JSX란

• 자바스크립트 안에서 html을 좀 쉽게 작성할 수 있게 처리(.js 파일에서 쓰는 html 대용품)
  • 원래 JSX 없이 리액트에서 div를 만드려면 아래처럼 작성해야한다.
  • 그러나 JSX를 사용하면 이렇게 복잡하게 쓰지 않아도 된다.

React.createElement("div", null, "Hello World")

• 문법 1. class 넣을 땐 className
  • 우리가 작성하는 코드는 자바스크립트 파일 안에서 작성되는 것이다. 따라서 class라고 하면 class를 선언해달라는 문법이기 때문에 겹치지 않기 위해서 className이라고 작성한다.

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h3>hello</h3>
      </div>
    </div>
  );
}

export default App;

• 문법2. 중괄호{} 문법
  • 원래 자바스크립트에서 변수에 담긴 어떤 값을 html에 넣고 싶으면 아래처럼 작성해서 넣어야 했는데 JSX의 중괄호 문법을 사용하면 편하게 변수를 쓸 수 있다.
  • 중괄호는 className = {place} 안에도 사용할 수 있고 태그 안에도 id={place} 이런 식으로 사용 가능하다. 상상하는 모든 곳에 사용가능하다. 전문 용어로 데이터 바인딩이라고 한다.

document.querySelector("h4").innerHTML = place;

import './App.css';

function App() {

  let place = "경기도";
  
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4>장소</h4>
      </div>
      <h4>{ place }</h4>
    </div>
  );
}

export default App;

 

• 문법3. style={}
  • html에 style을 넣고 싶으면 className을 사용해도 좋지만 style={ { color : "red" , "fontSize" : "10px" }}해도 된다.
  • 여기서 주의사항 우리가 기존 css에서는 글씨 크기를 지정할때 font-size 를 보통 사용하는데 JSX에서 그렇게 쓰면 "font에서 size를 빼주세요"라는 뜻이 되니깐 fontSize이런 식으로 camelCase 방식으로 작성해야 한다.