React(라이브러리)

{{{#!wiki style="margin: -10px -10px"		<tablealign=center><tablewidth=320><tablebordercolor=white,#1f2023>	React	}}}
<colcolor=#087ea4,#58C4DC> 종류	라이브러리
라이선스	MIT 라이선스
개발	Meta Platforms
언어	JavaScript, TypeScript
버전	18.3.1 (2024. 4. 26. 업데이트)

1. 개요

1.1. React 19.0(RC)

• 서버 컴포넌트와 서버 액션을 통해 서버로부터 값을 불러오거나 변경하는 기능 추가
• 폼 양식 관련 Hooks 및 낙관적 상태 관리 지원
• 비동기 Hook인 use 훅 추가
• 자원 미리 불러오기(resource preloading)
• ref 는 이제 일반 속성이 되어 useRef 훅이 불필요.
• createContext 로 만든 컨텍스트 자체가 이제 Provider 역할을 하게 됨(소비는 useContext 및 use 훅 사용)
• 초기화를 제외한 재렌더링 시 상태를 관리할 수 있는 지연 상태 관리 훅 useDeferredValue 추가
• <meta> 태그 직접 지원
• 스타일시트 관련 태그 직접 지원
• <script async> 태그와 속성 조합으로 비동기 스크립트 지원, react가 스크립트 자원 관리.
• 사용자 정의 태그(웹 컴포넌트 표준 포함) 지원
• 향상된 오류 보고

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

3.1. 상태 관리 라이브러리

• Redux
• Recoil - React와 마찬가지로 Meta에서 개발한 라이브러리이다. React 전용이다.
• Jotai - Jotai는 React를 위한 원자적(atomic) 접근 방식의 경량화된 상태 관리 라이브러리로, React의 useState와 유사한 API를 제공하면서도 전역 상태 관리와 자동 최적화된 렌더링을 지원한다.
• Zustand
• MobX

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. 개발 환경 만들기

5.1. Next.js

• 설치

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. 강의

• 인프런에서 처음 만난 리액트(React)라는 강의가 무료로 공개되어 있다. 소문난 명강의_소플의 처음 만난 리액트 2판의 저자가 진행한 강의이다.
• 생활코딩 유튜브 플레이리스트, 코딩앙마 유튜브 플레이리스트 등의 유튜버가 리액트 강의 영상을 무료로 공개하고 있다.
• 위키독스에서 React 리액트 마스터: 모바일과 웹 사용자 인터페이스 개발을 위한 최고의 라이브러리라는 전자책을 무료로 볼 수 있다.
• 노마드 코더 ReactJS로 영화 웹 서비스 만들기 강의가 무료로 제공되고 있다.

9. 논란

10. 여담