[⚛️React.Js] 리액트 프로젝트 생성

1. Create

npx create-react-app project-name-here
// npx create-react-app project-name-here --template typescript

 

2. Run

npm start

그러면 리액트 로고가 돌아가는 화면이 나온다.

 

3. 컴포넌트 분리

Header.js (모든 함수는 대문자로 시작해야한다.)

export const Header = () => ( // 상태 비저장 구성 요소를 화살표 함수로 사용하는 경우 콘텐츠는 대괄호 "{}" 대신 괄호 "()"에 들어가야 하며 반환 함수를 제거해야 한다.
    <p>I am Header</p>
);

App.js

import logo from './logo.svg';
import './App.css';
import { Header } from './component/Header';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Header/>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

4. Handling Event

Calculator.js

export function Calculator() {
    function plus() {
        console.log(10 + 20);
    }
    function minus() {
        console.log(10 - 20);
    }
    return (
        <>
            <div>10, 20</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
        </>
    )
}

 

5. State

import { useState } from 'react';

export function Calculator() {

    const [result, setResult] = useState(0);

    function plus() {
        setResult(10 + 20);
    }
    function minus() {
        setResult(10 - 20);
    }
    return (
        <>
            <div>10, 20</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <div id="result">{result}</div>
        </>
    )
}

 

6. Props

Calculator.js

import { useState } from 'react';

export function Calculator(props) {

    const [result, setResult] = useState(0);

    function plus() {
        setResult(props.first_num + props.second_num);
    }
    function minus() {
        setResult(props.first_num - props.second_num);
    }
    return (
        <>
            <div>{props.first_num}, {props.second_num}</div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <div id="result">{result}</div>
        </>
    )
}

App.js

        <Calculator first_num={0} second_num={1}/>
        <Calculator first_num={2} second_num={3}/>
        <Calculator first_num={4} second_num={5}/>