22-05-04 react 특강

npx create-react-app my-app(비트: npm create vite@latest
npm create vite@latest my-vue-react --template react)

react 라이브러리
jsx<<확장자>>js - webpack필요
webpack은 211년 3월 기준, 요즘은 vite사용

확장프로그램 ES7+ React/Redux/React-Native snippets(react검색)

my app폴더로 이동

npm run-script start
npm run-script build

---

App.js

TestComponent.js생성
rfce+tab

import React from 'react';

function TestComponent() {
  return <p>테스트 컴포넌트입니디ㅏ.</p>;
}

export default TestComponent;

App.js

import React, {useState} from 'react';
import TestComponent from './TestComponent';

function App() {

  //ES6+ 문법
  //배열로 리턴하는 함수의 값을 배열로 받을 수 있습니다.
  //state: 문자, 숫자, 배열, 오브젝트, 기타 등등

  const [Target, setTarget] = useState([false]);

  const 바꾸기 = () => {
    setTarget(!Target);
  }

  return (
    <div style={{margin: "20px"}}>
      {Target ? <p>타켓이 트루임!</p>: <p>타켓이 펄스임</p>}
      <button onClick={바꾸기}>타켓바꾸기</button>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import TestComponent from './TestComponent.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <TestComponent />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

---

App.js

import React, {useState} from 'react';
import TestComponent from './TestComponent';

function App() {

  //ES6+ 문법
  //배열로 리턴하는 함수의 값을 배열로 받을 수 있습니다.
  //state: 문자, 숫자, 배열, 오브젝트, 기타 등등

  const [List, setList] = useState(["A", "b", "c"]);
  const [Target, setTarget] = useState(1);

  const ListFunction = () => {
    let temp = [...List];
    temp.push(Target);
    setList([...temp]);
    setTarget(Target+1);
  }

  return (
    <div>
      <span>리스트 :</span>
      {List.map((엘리먼트, 인덱스)=> {
        return(<p key={인덱스}> {인덱스} : {엘리먼트}</p>)
      })
      }
      <p>타켓: {Target}</p>
      <br />
      <button onClick={ListFunction}>이거 누르면 타겟의 값이 List에 들어감</button>
    </div>
  );
}

export default App;