WIL 3 DOM、React入門所に駐車

28303 ワード
React 航海 DOM テキストリンク
ドキュメントオブジェクトモデル(DOM)Documentオブジェクトモデル
定義:オブジェクトを使用してWebドキュメントを整理し、JavaScriptを使用してWebドキュメントにアクセスおよび制御します.
Web上でJavaScriptを使用する理由は、特定の条件またはユーザーの動作が満たされると、Webドキュメントのすべてまたは一部が動的になるためです.Webドキュメントのすべての要素を個別に制御して、反応させる必要があります.
DOMは、Webドキュメントをオブジェクトとして定義します.また、Webドキュメントを構成するすべての要素(テキスト、画像、テーブルなど)がオブジェクトとして定義されます.例えば、Webドキュメント全体がドキュメントオブジェクトであり、挿入された画像が画像オブジェクトである.DOMは、Webドキュメントとそのすべての要素を「オブジェクト」として処理します.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM Tree 알아보기</title>
</head>
<body>
    <h1>DO it!</h1>
    <img src="image/doit.jpg" alt="공부하는 이미지">
</body>
</html>

DOMツリー
DOMツリーで分岐する項目をノードノードノード,DOMツリーの先頭のhtmlノードをルートルートノードと呼ぶ.
各ノード間の関係は、親ノード、子ノード、および兄弟ノードとして表すことができます.親ノードには子ノードがあり、親ノードにも同じ兄弟ノードがあります.
* DOM에 접근하기
getElementById(id): id명으로 접근합니다.
querySelector(): id명이나 선택자를 사용해 접근합니다.
* 이벤트 처리하기
요소.addEventListener(이벤트, 함수)

function handleWindowOffline() {
  alert("SOS no WIFI!");
}
window.addEventListener("offline", handleWindowOffline);
* 새로운 요소 추가하기
appendChild() 요소 노드를 DOM에 연결합니다.
* 노드 삭제
부모노드.removeChild(자식노드)
ソース
Do it! HTML+CS+JavaScript Web標準の定義
バーチャルDOM(バーチャルドーム)
応答の主な特徴は仮想DOMの使用である.
応答でデータを変更し、実際のDOMをWebブラウザに更新する場合は、次の3つのステップを実行します.
1.データを更新すると、UI全体が仮想DOMに再表示されます.
2.以前の仮想DOMの内容を現在の内容と比較する.
3.変更された部分のみを実際のDOMに適用します.

変化する大規模なアプリケーションの導入
いつでも応答と仮想DOMが提供されます.これが更新処理の簡潔さです.ユーザーインタフェースの更新中の複雑さを解消し、更新を容易にします.
일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용합니다.

DOM 요소의 id
<div id="my-element"></div>
<div ref={my_wrap}>

id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다.
바로 ref 개념입니다.

ref는 'DOM을 꼭 직접적으로 건드려야 할 때' 사용합니다.
class형 
import React from "react";
React.createRef()

함수형  
import React from "react";
const my_wrap = React.useRef(null);

import { useRef } from "react";
const my_wrap = useRef(null);

return (
   <div ref={my_wrap}>
     {my_lists.map((list, index) => {
       return <ItemStyle key={index}>{list}</ItemStyle>;
     })}
   </div>
ソース
はんのうぎじゅつ
[スパルタコードクラブ]反応ベースクラス
航海99 react入門駐車、他のグループのDIY質疑応答
랜덤 값을 가져오는 방법은?
  
math.floor(math.random()*5) 
5까지는 math.random으로 난수를 만들어주고 
주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는  math.floor를 활용한다.
react-router-dom패키지에서 사용하는 hooks중에 useHistory, useparams, Route란?
  
usehistory - html의 a태그와 비슷한 정보.
params - params는 파라미터로 props로 따로 정보를 받아오지 않아도 데이터를 받아올 수 있음.
Route - 자식요소가 부모요소에서 렌더링 될 경우 필요없는 부분이 있을 수 있기때문에
URL의 형태로 자식요소의 필요한 부분만 불러올 수 있게 해주는 패키지.

import { Route } from "react-router-dom";
배열의 내장함수인 .map과 .from를 이번 과제에서 어떻게 사용하였나?
  
.from은 빈배열을 만들기 위해 사용하였고,
.map은 월요일부터 일요일까지 순차적으로 렌더링하기위해 사용함.

import { useState } from "react";
import { useHistory } from "react-router-dom";
import styled from "styled-components";

function Days({ day }) {
  const toDetail = useHistory();
  const [n, sN] = useState(Math.floor(Math.random() * 5));
  console.log(n);

  return (
    <SortedRow>
      {day}
      {Array.from({ length: 5 }, (c, i) => {
        return (
          <div>
            <Circle style={{ backgroundColor: n <= i ? "#ddd" : "red" }} />
          </div>
        );
      })}
      <div>
        <Triangle
          onClick={() => {
            toDetail.push(`/detail/${day}`);
          }}
        />
      </div>
    </SortedRow>
  );
}

function Main() {
  const day = ["월", "화", "수", "목", "금", "토", "일"];

  return (
    <>
      <Wrap>
        <div>
          <h1>내 일주일은?</h1>
        </div>
        {day.map((day, i) => (
          <Days day={day} />
        ))}
      </Wrap>
    </>
  );
}

const Wrap = styled.div`
  background-color: #eee;
  width: 70vw;
  height: 70vh;
  margin: 30px auto;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
`;

const Circle = styled.div`
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin: 5px;
`;

const Triangle = styled.div`
  appearance: none;
  background-color: transparent;
  border-color: purple;
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1.6rem solid purple;
  color: #fff;
  cursor: pointer;
`;

const SortedRow = styled.div`
  display: flex;
  flex-direction: row;
`;

export default Main;
useState가 무엇이고 어떤 용도로 사용하였나?

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, 
리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 
컴포넌트에서 동적인 값을 상태(state)라고 부른다. 
리액트에는 useState 라는 함수가 있는데, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다.

import { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;
Chapter 12 Generics、列挙型、Anneration/1.Generics
中関村の携帯電話の資料の登り取り---1