읽기 학습

학습의 계기

오래전부터 React에 관심이 많아서 가끔 조사를 하기도 했지만 일련의 절차와 구조를 어디에 정리하고 싶어서 여기서 배운 내용을 정리했습니다.
엔지니어 경력이 짧아서 잘못된 내용이 있을 수 있습니다...

설치 노드

React를 실행하려면 node가 필요하므로 먼저 node를 설치합니다.
저는 편한 것 같아서nodebrew를 사용합니다.
Homebrew를 사용하면 다음 명령으로 nodebrew를 설치할 수 있습니다.

brew install nodebrew

nodebrew를 통과하는 경로입니다.

export PATH=$HOME/.nodebrew/current/bin:$PATH

안정판 node의 설치는 다음 명령을 통과합니다.

nodebrew install stable

버전별로 설치할 수도 있지만 따로 찾아보세요.
설치된 노드를 사용하려면 다음 명령을 실행하십시오.

nodebrew use <インストールしたnodeのバージョン>

yarn 설치

패키지 관리자yarn을 설치합니다.
npm를 사용할 수 있지만 yarn의 성능이 더 좋기 때문에 yarn을 사용합니다.
다음 명령을 사용하여 설치됩니다.

npm install -g yarn

create-react-app 설치

실제 React 프로젝트를 만들기 위해creat-react-app을 설치합니다.
각종 패키지를 설치해야만 읽기를 시작할 수 있지만,create-react-app을 사용하면 번거로운 작업을 줄일 수 있습니다.
다음 명령을 사용하여create-react-app을 설치합니다.

yarn global add create-react-app

create-react-app을 설치한 후 프로젝트를 만듭니다.

create-react-app プロジェクト名

명령을 실행하는 디렉터리에 프로젝트 이름으로 지정된 디렉터리가 만들어졌다고 생각합니다.
이제 이동해서 읽을 수 있습니다.

Hello World

방금 만든 항목에 코드를 추가합니다.
당신이 결정한 Hello World를 보여 드리겠습니다.
src/App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World
        </p>
      </header>
    </div>
  );
}

App.이렇게 js의 앱 기능을 변경하면 다음과 같이 표시됩니다.

이제 세상을 도울 수 있게 됐어요.

JSX

React는 JSX라는 JavaScript 구문을 사용하여 확장합니다.
JSX를 사용하지 않아도 쓸 수 있지만 JSX가 편리하기 때문에 JSX를 사용합니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World
        </p>
      </header>
    </div>
  );
}

이렇게 JavaScript에 HTML을 쓸 수 있습니다.
JSX에는 부모 요소가 있어야 하므로 모든 HTML 요소는 div로 묶여 있습니다.

클래스 이름

코드에서 알 수 있듯이 클래스 이름을 추가하려면className을 사용하십시오.
class는 자바스크립트의 예약어로 여겨지기 때문에 사용할 수 없습니다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World
        </p>
      </header>
    </div>
  );
}

함수

일반적으로 변수 정의를 할 수 있습니다.

function App() {
  const message = <div>Hello World</div>;
  return (
    message
  );
}

변수를 포함할 수도 있습니다.

function App() {
  const helloWorld = 'Hello World';
  const message = <div>{helloWorld}</div>;
  return (
    message
  );
}

{}에서 JavaScript 표현식을 쓸 수 있습니다.
JavaScript 형식이면 무엇이든 쓸 수 있으므로 {2+2} 처럼 쓸 수도 있습니다.

이벤트

HTML의 onclick 속성은 onClick처럼 낙타 상자로 만들어집니다.

function App() {
  const helloWorld = 'Hello World';
  const message = <div className='message'>{helloWorld}</div>;
  const button = <input type="button" value="button" onClick={() => {console.log('Clicked')}} />;
  return (
    <div>
      {message}
      {button}
    </div>
  );
}

React.Fragment

React에서 JSX는 부모 요소가 있어야 한다고 쓰지만, 이렇게 하면 불필요한 요소가 증가합니다.
이럴 땐 React.프레임을 사용합니다.

function App() {
  const helloWorld = 'Hello World';
  const message = <div className='message'>{helloWorld}</div>;
  const button = <input type="button" value="button" onClick={() => {console.log('Clicked')}} />;
  return (
    <React.Fragment>
      {message}
      {button}
    </React.Fragment>
  );
}

이렇게 하면 여러 개의 하위 원소를 포함할 수 있으며, 필요하지 않은 원소는 증가하지 않는다.
Component, props, State 다음에 공부해야 하기 때문에 다음 문장으로 요약합니다.