WIL 3 DOM, React 입문 주차

28373 단어 React항해99DOMDOM

문서 객체 모델 (DOM) Document Object Model
정의: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 합니다.

DOM은 웹 문서를 하나의 객체로 정의합니다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의합니다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체입니다. 이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다.

<!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 트리에서 가지가 갈라져 나간 항목을 node 노드라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 root 루트 노드라고 합니다.
각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있습니다. parent 부모 노드에는 child 자식 노드가 있으며, 부모 노드가 같은 sibling 형제 노드도 있습니다.

* DOM에 접근하기
getElementById(id): id명으로 접근합니다.
querySelector(): id명이나 선택자를 사용해 접근합니다.
* 이벤트 처리하기
요소.addEventListener(이벤트, 함수)

function handleWindowOffline() {
  alert("SOS no WIFI!");
}
window.addEventListener("offline", handleWindowOffline);
* 새로운 요소 추가하기
appendChild() 요소 노드를 DOM에 연결합니다.
* 노드 삭제
부모노드.removeChild(자식노드)

출처
Do it! HTML+CSS+자바스크립트 웹 표준의 정석

Virtual DOM (가상돔)

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟습니다.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기
리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성입니다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있습니다.

일반 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 지네릭스, 열거형, 애너테이션 / 1. 지네릭스(Generics)
[사이드프로젝트] 그저 그런 REST API로 괜찮은가? - 진정한 REST API 구현해보기 - IndexController(진입점) 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage