React 기초

React 프로젝트 생성

 

npx create-react-app@latest react-sample --template typescript

 

npm start : 개발서버 실행하기

npm run build: 실서비스를 위한 app을 빌드하기

 

간단 리엑트 사용

npm run build : 명령어를 실행하면 build 디렉토리에 js, css, index.html이 생성된다.

serve -s build: 웹 실행

 

pulbic/index.html이 src/index.tsx의 스크립트를 실행하는 구조이다.

 

public/index.html

src/index.tsx

 

초간단 컴포넌트

import React from 'react';

/**
 * 단순히 input 값만 출력하는 컴포넌트이다.
 * @constructor
 */
// 이름을 입력하기 위한 텍스트 박스를 반환한다.
const Name = () => {
  // input 요소의 onchange 이벤트에 대한 콜백 함수를 정의한다.
  /**
   * 개발로 배포하면 test는 두번 출력됨
   * 실서비스로 배포하면 test는 한번만 출력됨
   */
  console.log('test') // 두번 출력됨
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 입력된 텍스트를 콘솔에 표시한다.
    console.log(e.target.value)
  }

  return (
    // style 객체의 키는 캐멀 케이스가 된다.
    <div style={{padding: '16px', background: 'grey'}}>
    {/*  for 대신 htmlFor를 사용한다. */}
      <label htmlFor={'name'}>이름</label>
    {/*  class나 onchange 대신, className이나 onChange를 사용한다. */}
      <input id={'name'} className={'input-name'} type={'text'} onChange={onChange}/>
    </div>
  );
};

export default Name;