Jaybon 의 지식창고

연산을 줄이기 위해 리스트가 바뀌었는지 확인.

같으면 업데이트x

다르면 업데이트o

--------------

push pop 쓰지말것

-------------

새로

rcc 엔터

public의 index.html 에

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

넣고

App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-md bg-dark navbar-dark">
          <a className="navbar-brand" href="#">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="collapsibleNavbar">
            <ul className="navbar-nav">
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <br />
      </div>
    );
  }
}

export default App;

또는 nav를 컴포넌트 또는 함수형 컴포넌트로 만들어서 App.js에 집어넣자

-----------------

Next.js 꼭 써보자

----------------

리액트는 하이퍼링크 (a태그)를 쓰지 못한다.

그래서 라우터를 사용해야한다.

SPA 싱글 페이지 애플리케이션

리액트는 싱글페이지이다.

아래 라이브러리를 사용하자.

yarn이 아니라면 npm사이트가서 설치법 확인

설명을 보려면 빨간박스

부트스트랩의 A링크도 다 Link to로 바꾸면 된다.

스타일 컴포넌트는 무조건 클래스 밖으로 빼는 것을 권장한다

추가 concat
삭제 filter
검색 filter
반복 map
수정 map
중간요소 추가 slice + concat

스프레드 연산자 [...]

중간요소추가

1,2,3을  1,2,4,3으로 만드는 법

비효율적인 방법

짧게 하는 법!

----

스프레드 연산자

장점
1. 깊은 복사에 좋다
2. 오브젝트 결합시 같은값을 중복처리하여 바꾼다

----------

-----------

스프레드 연산자로 a 와 b를 결합 (배열일 경우!!!)

-------

얕은 복사

깊은 복사

----

스프레드 연산자로 오브젝트 연산시 다른 현상이 일어난다(중요)

데이터가 덮어씌워진다

완전히 덮어씌어진다

d 라는 중복이 제거된다

맨위의 중간에 추가하는 기능을 스프레드로

----------------

검색

---------------

수정

이렇게하면 모양이 망가진다

오브젝트 결합시 덮어씌워지고 합쳐진다.(중요)

----------

immer (불변성 관리도구 / 스프레드관련)

---------

버츄얼돔
- state의 내용 변화를 연산한다 (내용이 일치하는지 달라졌는지 전체 확인) -> 연산후 변화된 부분 렌더링
- 연산이 많아지면 느려진다
- ShouldComponentUpdate -> 연산할지 말지 결정
if(prvState.num === State.num){return false true} -- >
같은배열이면 연산X, 다른배열이면 연산O , 깊은 복사로 연산을 줄일 수 있음(불변성)

-----------

수정하기

import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";

const ContainerBox = styled.div`
  display: grid;
  justify-content: center;
`;

class App extends Component {
  state = {
    posts: [
      {
        id: 1,
        title: "제목1",
      },
      {
        id: 2,
        title: "제목2",
      },
      {
        id: 3,
        title: "제목3",
      },
    ],
  };

  render() {
    const add = () => {
      // render안에 const로 만들면 계속 초기화 되지않는다
      this.setState({
        posts: this.state.posts.concat({
          id: 4,
          title: "제목4",
        }),
      });
    };

    const del = () => {
      // render안에 const로 만들면 계속 초기화 되지않는다
      this.setState({
        posts: this.state.posts.filter((post) => {
          return post.id !== 2;
        }),
      });
    };

    const update = () => {
      const data = {
        id: 2,
        title: "제목200",
      };

      this.setState({
        posts: this.state.posts.map((post) =>
          post.id === 2 ? { ...post, ...data } : post
        ),
      });
    };

    return (
      <ContainerBox>
        <button onClick={add}> 추가 </button>
        <button onClick={del}> 삭제 </button>
        <button onClick={update}> 수정 </button>
        {this.state.posts.map((post) => {
          return <Post id={post.id} title={post.title} />;
        })}{" "}
      </ContainerBox>
    );
  }
}

export default App;

내용이 변경된다

-------------

styled component 설치

state의 데이터를 map을 이용 해서 입력

Post.js

import React from "react";
import styled from "styled-components";

const PostBox = styled.div`
  height: 100px;
  width: 300px;
  border: 1px solid black;
`;

const Post = (props) => {
  return <PostBox>{props.title}</PostBox>;
};

export default Post;

App.js

import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";

class App extends Component {
  state = {
    posts: [
      {
        id: 1,
        title: "제목1",
      },
      {
        id: 2,
        title: "제목2",
      },
      {
        id: 3,
        title: "제목3",
      },
    ],
  };

  render() {
    const ContainerBox = styled.div`
      display: grid;
      justify-content: center;
    `;

    return (
      <ContainerBox>
        {this.state.posts.map((post) => {
          return <Post id={post.id} title={post.title} />;
        })}
      </ContainerBox>
    );
  }
}

export default App;

추가를 누르면 리스트가 아이템이 추가되도록 할 것

자바스크립트 배열 추가할 때는 무조건 concat 쓰자

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a = [{
            id: 1,
            username: 'ssar'
        }, {
            id: 1,
            username: 'ssar'
        }];
        console.log(a);
        let b = [{
            id: 2,
            username: 'cos'
        }];
        a = a.concat(); // 변수, 객체, 배열 다 들어갈 수 있다.
        console.log(a);
    </script>
</body>

</html>

App.js

import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";

class App extends Component {
  state = {
    posts: [
      {
        id: 1,
        title: "제목1",
      },
      {
        id: 2,
        title: "제목2",
      },
      {
        id: 3,
        title: "제목3",
      },
    ],
  };

  render() {
    const ContainerBox = styled.div`
      display: grid;
      justify-content: center;
    `;

    const add = () => {
      // render안에 const로 만들면 계속 초기화 되지않는다
      this.setState({
        posts: this.state.posts.concat({
          id: 4,
          title: "제목4",
        }),
      });
    };

    return (
      <ContainerBox>
        <button onClick={add}>추가</button>

        {this.state.posts.map((post) => {
          return <Post id={post.id} title={post.title} />;
        })}
      </ContainerBox>
    );
  }
}

export default App;

------------------

배열 필터링

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a = [1, 2, 3, 4];
        a = a.filter((n) => n == 3);
        console.log(a);
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let a = [{
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }, {
            id: 4
        }];
        let b = a.filter((n) => n.id != 3);
        console.log(b);
    </script>
</body>

</html>

--------------------

App.js

import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";

class App extends Component {
  state = {
    posts: [
      {
        id: 1,
        title: "제목1",
      },
      {
        id: 2,
        title: "제목2",
      },
      {
        id: 3,
        title: "제목3",
      },
    ],
  };

  render() {
    const ContainerBox = styled.div`
      display: grid;
      justify-content: center;
    `;

    const add = () => {
      // render안에 const로 만들면 계속 초기화 되지않는다
      this.setState({
        posts: this.state.posts.concat({
          id: 4,
          title: "제목4",
        }),
      });
    };

    const del = () => {
      // render안에 const로 만들면 계속 초기화 되지않는다
      this.setState({
        posts: this.state.posts.filter((post) => {
          return post.id !== 2;
        }),
      });
    };

    return (
      <ContainerBox>
        <button onClick={add}>추가</button>
        <button onClick={del}>삭제</button>

        {this.state.posts.map((post) => {
          return <Post id={post.id} title={post.title} />;
        })}
      </ContainerBox>
    );
  }
}

export default App;

새로운 프로젝트를 만든다

또는

App.css 내용지우고 아래와 같이 초기화

Hello 클래스의 배경을 설정

jsx문법에서는 class를 적을 때 className으로 사용

글자디자인 정도는 컴포넌트로 만들필요없이 css로 주자

css을 태그에 넣어주는 방법

한번만 쓸 스타일은 이렇게 넣자 (쌍따옴표 홑따옴표 둘다가능)

반복되는 것 위주로 스타일 컴포넌트로 만들자

폰트 컬러등 css 를 만들어두는 것이 편함

----

ref

https://velog.io/@marvin-j/React-ref-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

setState를 이용하지않고 (값 변경 없이) 컴포넌트를 변경하고 싶을 때 ref를 사용한다

입력할 때마다 password 에 변수 등록

input의 돔에 직접 접근하기위함

input 태그에 포커싱이 된다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>숙소, 체험, 장소를 모두 한 곳에서 - 에어비앤비</title>
    <link
      rel="shortcut icon"
      sizes="76x76"
      type="image/x-icon"
      href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico"
    />
    <link rel="stylesheet" href="css/styles.css"/>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">

            <svg width="102" height="32" fill="currentcolor" style="display:inline-block">
                <path d="M29.24 22.68c-.16-.39-.31-.8-.47-1.15l-.74-1.67-.03-.03c-2.2-4.8-4.55-9.68-7.04-14.48l-.1-.2c-.25-.47-.5-.99-.76-1.47-.32-.57-.63-1.18-1.14-1.76a5.3 5.3 0 00-8.2 0c-.47.58-.82 1.19-1.14 1.76-.25.52-.5 1.03-.76 1.5l-.1.2c-2.45 4.8-4.84 9.68-7.04 14.48l-.06.06c-.22.52-.48 1.06-.73 1.64-.16.35-.32.73-.48 1.15a6.8 6.8 0 007.2 9.23 8.38 8.38 0 003.18-1.1c1.3-.73 2.55-1.79 3.95-3.32 1.4 1.53 2.68 2.59 3.95 3.33A8.38 8.38 0 0022.75 32a6.79 6.79 0 006.75-5.83 5.94 5.94 0 00-.26-3.5zm-14.36 1.66c-1.72-2.2-2.84-4.22-3.22-5.95a5.2 5.2 0 01-.1-1.96c.07-.51.26-.96.52-1.34.6-.87 1.65-1.41 2.8-1.41a3.3 3.3 0 012.8 1.4c.26.4.45.84.51 1.35.1.58.06 1.25-.1 1.96-.38 1.7-1.5 3.74-3.21 5.95zm12.74 1.48a4.76 4.76 0 01-2.9 3.75c-.76.32-1.6.41-2.42.32-.8-.1-1.6-.36-2.42-.84a15.64 15.64 0 01-3.63-3.1c2.1-2.6 3.37-4.97 3.85-7.08.23-1 .26-1.9.16-2.73a5.53 5.53 0 00-.86-2.2 5.36 5.36 0 00-4.49-2.28c-1.85 0-3.5.86-4.5 2.27a5.18 5.18 0 00-.85 2.21c-.13.84-.1 1.77.16 2.73.48 2.11 1.78 4.51 3.85 7.1a14.33 14.33 0 01-3.63 3.12c-.83.48-1.62.73-2.42.83a4.76 4.76 0 01-5.32-4.07c-.1-.8-.03-1.6.29-2.5.1-.32.25-.64.41-1.02.22-.52.48-1.06.73-1.6l.04-.07c2.16-4.77 4.52-9.64 6.97-14.41l.1-.2c.25-.48.5-.99.76-1.47.26-.51.54-1 .9-1.4a3.32 3.32 0 015.09 0c.35.4.64.89.9 1.4.25.48.5 1 .76 1.47l.1.2c2.44 4.77 4.8 9.64 7 14.41l.03.03c.26.52.48 1.1.73 1.6.16.39.32.7.42 1.03.19.9.29 1.7.19 2.5zM41.54 24.12a5.02 5.02 0 01-3.95-1.83 6.55 6.55 0 01-1.6-4.48 6.96 6.96 0 011.66-4.58 5.3 5.3 0 014.08-1.86 4.3 4.3 0 013.7 1.92l.1-1.57h2.92V23.8h-2.93l-.1-1.76a4.52 4.52 0 01-3.88 2.08zm.76-2.88c.58 0 1.09-.16 1.57-.45.44-.32.8-.74 1.08-1.25.25-.51.38-1.12.38-1.8a3.42 3.42 0 00-1.47-3.04 2.95 2.95 0 00-3.12 0c-.44.32-.8.74-1.08 1.25a4.01 4.01 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.98.45 1.55.45zM53.45 8.46c0 .35-.06.67-.22.93-.16.25-.38.48-.67.64-.29.16-.6.22-.92.22-.32 0-.64-.06-.93-.22a1.84 1.84 0 01-.67-.64 1.82 1.82 0 01-.22-.93c0-.36.07-.68.22-.93.16-.3.39-.48.67-.64.29-.16.6-.23.93-.23a1.84 1.84 0 011.6.86 2 2 0 01.21.94zm-3.4 15.3V11.7h3.18v12.08h-3.19zm11.68-8.9v.04c-.15-.07-.35-.1-.5-.13-.2-.04-.36-.04-.55-.04-.89 0-1.56.26-2 .8-.48.55-.7 1.32-.7 2.31v5.93h-3.19V11.69h2.93l.1 1.83c.32-.64.7-1.12 1.24-1.48a3.1 3.1 0 011.81-.5c.23 0 .45.02.64.06.1.03.16.03.22.06v3.2zm1.28 8.9V6.74h3.18v6.5c.45-.58.96-1.03 1.6-1.38a5.02 5.02 0 016.08 1.31 6.55 6.55 0 011.6 4.49 6.96 6.96 0 01-1.66 4.58 5.3 5.3 0 01-4.08 1.86 4.3 4.3 0 01-3.7-1.92l-.1 1.57-2.92.03zm6.15-2.52c.57 0 1.08-.16 1.56-.45.44-.32.8-.74 1.08-1.25.26-.51.38-1.12.38-1.8 0-.67-.12-1.28-.38-1.79a3.75 3.75 0 00-1.08-1.25 2.95 2.95 0 00-3.12 0c-.45.32-.8.74-1.09 1.25a4.01 4.01 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.98.45 1.56.45zm7.51 2.53V11.69h2.93l.1 1.57a3.96 3.96 0 013.54-1.89 4.1 4.1 0 013.82 2.44c.35.76.54 1.7.54 2.75v7.24h-3.19v-6.82c0-.84-.19-1.5-.57-1.99-.38-.48-.9-.74-1.56-.74-.48 0-.9.1-1.27.32-.35.23-.64.52-.86.93a2.7 2.7 0 00-.32 1.35v6.92h-3.16zm12.52 0V6.73h3.19v6.5a4.67 4.67 0 013.73-1.89 5.02 5.02 0 013.95 1.83 6.57 6.57 0 011.59 4.48 6.95 6.95 0 01-1.66 4.58 5.3 5.3 0 01-4.08 1.86 4.3 4.3 0 01-3.7-1.92l-.09 1.57-2.93.03zm6.18-2.53c.58 0 1.09-.16 1.56-.45.45-.32.8-.74 1.09-1.25.25-.51.38-1.12.38-1.8a3.42 3.42 0 00-1.47-3.04 2.95 2.95 0 00-3.12 0c-.44.32-.8.74-1.08 1.25a3.63 3.63 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.95.45 1.55.45z"></path></svg>

        </div>
        <div class="menu">

            <ul>
                <li><a href="#">호스트가 되어보세요</a></li>
                <li><a href="#">도움말</a></li>
                <li><a href="#">회원가입</a></li>
                <li><a href="#">로그인</a></li>
            </ul>


        </div>
      </nav>

      <section>
        <div class="search__box"></div>
      </section>
    </header>
    <main>
      <section>
        <div class="sec__title"></div>
        <div class="card__box">
          <div class="card">
            <div class="card__img"></div>
            <div class="card__content"></div>
          </div>
          <div class="card">
            <div class="card__img"></div>
            <div class="card__content"></div>
          </div>
          <div class="card">
            <div class="card__img"></div>
            <div class="card__content"></div>
          </div>
          <div class="card">
            <div class="card__img"></div>
            <div class="card__content"></div>
          </div>
        </div>
      </section>
      <section>
        <div class="ad"></div>
      </section>
      <section>
        <div class="sec__title"></div>
        <div class="choo__box">
          <div class="choo__img"></div>
          <div class="choo__img"></div>
          <div class="choo__img"></div>
          <div class="choo__img"></div>
          <div class="choo__img"></div>
        </div>
      </section>
      <section>
        <div class="sec__title"></div>
        <div class="sec__content"></div>
        <div class="ad"></div>
      </section>
      <section>
        <div class="sec__title"></div>
        <div class="home__box">
          <div class="home">
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
            
            <div class="home__img"></div>
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3">
              <span class="star"></span>
              <span class="count"></span>
              <span class="type"></span>
            </div>
        
        </div>
      </section>
    </main>
  </body>
</html>

* {
  /* 전역에 패딩과 마진, 보더를 없앤다*/
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.logo {
  color: white;
}

header {
  background-image: url("../images/background.jpg");
  height: 880px;
  background-size: 100%;
  background-repeat: none;
}

nav {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding: 20px;
}

.menu ul {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 30px;
  list-style-type: none;
}

.menu ul a {
  text-decoration: none;
  color: black;
  font-weight: 800;
  color: white;
}

.search__box {
  position: relative;
  top: 50px;
  left: 50px;
  width: 430px;
  height: 400px;
  background-color: white;
}

----------------

fr을 쓰면 비율로 정할 수 있다

데이터는 페이지의 주인(App.js에서 패치)

데이터를 리턴해주는 서버 (REST API) 

App.js는 state를 가지고 있다

state는 컴포넌트와 바인딩이 되어있다

그래서 state가 변경되면 다시 렌더링 된다

App.js가 자식들에게 던져주는 데이터가 props

props의 장점은 어떤것을 던져줘도 오브젝트로 받을 수 있는 점

자식은 부모에게 props를 못 던진다

자식이 state를 변경하려면 state자체를 자식에게 넘겨줘야한다

데이터는 단방향 (부모 -> 자식) 으로 던져줄 수 있다 -> 이것이 props

클래스로 컴포넌트를 만드는 이유 - 생명주기를 이해하기 위함

jsx 문법

----

map은 스택을 가지고 있다

blog.naver.com/getinthere/222032363956

CORS 정책

리소스를 공유할 때 같은 도메인만 공유할 수 있도록 하는 것

스프링에서 @CrossOrigin을 사용하면 CORS 정책을 사용하지 않겠다는 것

---------------

https://medium.com/humanscape-tech/react-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-c7f45ef2d0be

-------

fetch이해

다운을 받기 전에 넣어줘서 대기중이 된 상태

자바스크립트 오브젝트

https://marketplace.visualstudio.com/items?itemName=jonkwheeler.styled-components-snippets