React(라이브러리)

<colbgcolor=#ffffff,#1f2023><colcolor=#087ea4> 리액트 React
종류	라이브러리
라이선스	MIT 라이선스
개발
언어	JavaScript, TypeScript
버전	18.2.0 (2022. 6. 14. 업데이트)
| | |

1. 개요

2. 예시

#!syntax javascript
import ReactDOM from 'react-dom';

function App ({name}){
  return (
    <h1>Hello, {name}!</h1>
  )
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

[ 펼치기 / 접기 ]

#!syntax javascript
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}

ReactDOM.render(<App name="홍길동" />, document.getElementById('root'));

2.1. 해설

#!syntax javascript
function App ({ name }) {
  return (
    <h1>Hello, {name}!</h1>
  );
}

#!syntax javascript
import { jsx } from "react/jsx-runtime";

function App(props) {
  const name = props.name;
  return jsx("h1", {
    children: ["Hello, ", name, "!"]
  });
}

2.2. 리액트가 있고 없고의 차이 (컴포넌트)

• 리액트가 없을 때

#!syntax xml
<header>
  <h1>Logo</h1>
</header>
<nav>
 <ul>
  <li>
    <a href="#">메뉴1</a>
  </li>
  <li>
    <a href="#">메뉴2</a>
  </li>
 </ul>
</nav>
<section>
  <p>Hello World!</p>
</section>

• 리액트가 있을 때

#!syntax javascript
const Hlogo = () => {
  return (
    <header>
      <h1>Logo</h1>
    </header>
  );
};

const Anav = () => {
  return (
    <nav>
      <ul>
        <li>
          <a href="#">메뉴1</a>
        </li>
        <li>
          <a href="#">메뉴2</a>
        </li>
      </ul>
    </nav>
  );
};

const Bsection = ({ amumal }) => {
  return (
    <section>
      <p>{amumal}</p>
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <Hlogo />
      <Anav />
      <Bsection amumal="Hello World!" />
    </div>
  );
};

export default App;

3. Virtual DOM

4. JSX

#!syntax javascript
const element = <h1>Hello, world!</h1>;

• HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.
• 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
• 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
• 기존의 HTML에서 주석은 <!-- COMMENT -->이렇게 했었지만 JSX에서는 {/*주석*/} 으로 표현한다.
• HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다. [1]
• JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.[2]

5. 개발환경 만들기

• 설치

npx create-react-app .

npx create-react-app [Project name]

npm install npx -g

npx create-react-app . --template typescript

• 실행

npm start

• 빌드

npm run build

serve -s build

• 설치

npm i -g yarn 

yarn create react-app .

yarn create react-app [Project name]

yarn create react-app . --template typescript

• 실행

yarn start

• 빌드

yarn build

serve -s build

6. React Native

7. React를 사용하는 웹 사이트/프로그램

• npm
• Nintendo Switch Online 스마트폰 앱
• 넷플릭스
• 디스코드
• 라프텔
• 레딧
• 비발디(웹 브라우저)
• 아마존 웹 서비스
• 에어비앤비
• 워드프레스닷컴 (칼립소)
• 인스타그램
• 코빗
• 티스토리
• 트위치
• 트위터
• 페이스북
• 핀터레스트
• 콜렉티브
• 로블록스
• 픽시브
• 드롭박스
• 중고나라
• Melon 윈도우 플레이어[3]
• 토스(금융)

8. 여담