[React] TODO 애플리케이션을 만들면서 React의 기초(렌더링된 구조/상태 관리)를 배웁니다.

이마
백문이 불여일견, 토도 앱을 만들면서 리액트를 배운다.
환경 구축 & 프로젝트 제작
기본적으로 ↓에 적힌 대로 진행됩니다.
· NodeJS 설치node -v프로젝트 제작

npx create-react-app react-practice

• 동작 확인

cd react-practice
npm start

초기 화면을 표시합니다.

프로젝트 구성
・src
- React의 소스 코드를 여기에 씁니다.
・public
- HTML 파일/이미지 파일 등...HTTP 요청을 통한 링크

렌더링 프로세스
index.} 및 indexjs
・index., 렌더링 처리를 위해 React(JavaScript)를 수행합니다.
·ReactDOM.render()=재현
・ReactDOM.render(①React要素, ②①を反映する場所)① React 요소 ② index.<div id="root"></div>에 반영됩니다.

App.js
・index.js에서 import App from './App';에서 참조한 App.js를 바탕으로 재현하기 때문에 이 앱은js와 연결된 구성 요소를 만들어서React 응용 프로그램의 절차를 실현합니다.
・export의 App 함수는 HTML 같은 것을 값으로 되돌려 주는 함수이다.
・index.React 요소를 js의ReactDOM.render()에 전달하는 첫 번째 인자가 필요하기 때문에 HTML 같은 것을 썼으면 React 요소를 생성합니다.

HTML 같은 놈의 정체 ='JSX'라는 프로그래밍 언어
・HTML의 유형은 프로그래밍 언어인'JSX'이다.
· JSX로 작성된 처리는 React입니다.createElement 함수를 통해 React 요소를 생성하는 프로세스로 변환합니다.
↓왜?↓
・ReactDOM.render () 로 전달되는 첫 번째 인자를 생성하는 React 요소의 처리가 바로 이 React입니다.createElement 함수이기 때문입니다.
・매번 ↓와 같은 문법으로 React 요소를 정의하는 것보다 JSX와 같은 HTML의 것은 당연히 쓰기 쉬우므로 JSX의 느낌을 사용한다.

// aは"React要素"
var a = React.createElement('h1', { myaddr: 'bar' }, 'First element!')
// 第１引数にReact要素が渡される
ReactDOM.render(a, document.getElementById('root'))

TODO 응용 프로그램을 만듭니다.
입력 및 추가
참고 자료
TODO 어플리케이션 제작에 필요한 기능
・"추가"를 누르면 TODO 퀘스트 일람표에 반영
· 반영된 TODO 퀘스트는 계속 보류해야 합니다
・"이미 실행"후 퀘스트 사라짐
'컨디션'을 유지해야 한다는 것이다.React에서 React Hooks를 사용하여 상태 관리를 수행합니다.
아까 App.js에 직접 써 보세요.

import { useState } from 'react';

function App() {

 /**
  * todo = ステートの値
  * setTodo = ステートの値を更新するメソッド
 */
  const [todo, setTodo] = useState(``)
  const [todoList, setTodoList] = useState([]);
  
  // TODOリストに入力項目を追加する関数
  const addTodoList = () => {
    if (!todo) return
    const newTodoList = [todo];
    // 配列(オブジェクト)に対して"イミュータブル"な操作で追加する
    setTodoList([newTodoList, ...todoList]);
    setTodo(``);
  }

  return (
    <div>
      <h1>TODOタスク一覧</h1>
      <ul>
        {todoList.map((item) => {
          return <li>{item}</li>
        })}
      </ul>
      <form onSubmit={(e) => {
        e.preventDefault();
        addTodoList();
      }}>
          
        <input
          type="text"
          value={todo}
          onChange={(e) => setTodo(e.target.value)}
        />
        <input
          type="submit"
          value="追加"
          // addTodoList関数そのもの渡す。
          // 実行自体はform要素のonSubmit()で実施する
          onSubmit={addTodoList}
        />
      </form>
    </div>
  );
}

export default App;

이렇게 된 기분이야.

추가된 부분은'이미 실행'※ 추후 추가 기록