노마드코더 강의 7일차.

심심해서 만들어보는 React JS 강의 수강 2번째

 1. ReactJS로 영화 웹 서비스 만들기 (완료)

 2. 실전형 리액트 Hooks 10개

     > 작업은 Code SandBox에서 진행! (온라인에서 코딩할 수 있는 템플릿 제공)

        - https://codesandbox.io/

     > useState

        - useInput

        - useTabs

     > useEffect

        - useTitle

        -  usePageLeave

        -  useClick

        -  useFadeIn

        -  useFullscreen

        -  useHover

        -  useNetwork

        -  useNotification

        -  useScroll

        -  usePreventLeave

        -  useConfirm

        -  useAxios

     > 강의 제목은 hook 10개인데 10개 이상을 배우네(?)

     > 공식 사이트 : https://react.dev/reference/react/hooks

시작에 앞서... 리액트 훅이란?
- 리액트 훅(React Hook)은 리액트 버전 16.8에 도입된 개념으로, 함수형 컴포넌트에서 상태 관리를 할 수 있도록 해주는 함수입니다. 
- 리액트 훅은 리액트 클래스형 컴포넌트에서 사용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 해줍니다. 
- 리액트 훅은 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수입니다. 
- 리액트 훅은 기본적으로 UI의 상태 관련 동작 및 부수 작용(side effects)을 캡슐화하는 가장 간단한 방법입니다. 
- 리액트 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. 

온라인 환경 세팅 후 실제 hook 개발 진행!

Coding Apple 강의 1일차.

심심해서 만들어보는 React JS 강의 수강 v2

 - 

React로 간단한 블로그 만들어보기.

  1. 준비물

     > nodejs (npm을 사용하기 위해 설치)

     > npm

     > create-react-app (기본 환경이 세팅된 react 프로젝트 생성하는 명령어)

1. npx create-react-app react_blog
2. npm start
3. 생성된 프로젝트 vscode로 열기
 - node_modules : react를 사용하기 위한 라이브러리 코드 보관함
 - public : static 파일 모아두는 폴더
 - src : 코드 짜는 폴더
 - index.js : welcome 세팅
 - package.json : 프로젝트 정보

2. App.js

/* eslint-disable */ //Lint 끄는 기능 (=warning 메시지 끄기)

import { useState } from "react";
import "./App.css";

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]); //Destructuring 문법(return을 다중으로 받음)
  let [발행일자, 발행일자변경] = useState([
    "2월 17일 발행",
    "5월 25일 발행",
    "9월 8일 발행",
  ]);
  let [따봉, 따봉변경] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <h4>React Blog</h4>
      </div>
      <button
        onClick={() => {
          //state가 array/object시 주의해서 사용해야함!!!(shallow copy를 해야함)
          //let copy = 글제목 선언 시 RAM에 '글제목'과 동일한 주소를 가지는 copy 변수를 생성하고 내부 데이터를 세팅함
          //let copy [...글제목] 선언 시 RAM에 새로운 주소를 가지는 copy 변수를 생성하고 내부 데이터를 세팅함
          //copy[0] 시 copy의 내부 데이터가 변경됨
          let copy = [...글제목]; //[...]으로 하지 않으면 state는 기존 object와 신규 object가 동일하다고 판단함(object가 가리키는 글제목의 주소값이 동일하므로!)
          copy[0] = "여자 코트 추천";
          글제목변경(copy);
        }}
      >
        글수정
      </button>
      <div className="list">
        <h4>
          {글제목[0]} <span onClick={() => 따봉변경(따봉 + 1)}>👍</span> {따봉}
        </h4>
        <p>{발행일자[0]}</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>{발행일자[1]}</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>{발행일자[2]}</p>
      </div>
      <Modal />
    </div>
  );
}

//컴포넌트로 만들면 좋은 케이스
//1. 반복적인 html 축약할 때
//2. 큰 페이지들
//3. 자주 변경되는 것들

//컴포넌트의 단점 : state가져다 쓸 때 문제가 생김(state는 scope이 local임)
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

export default App;

3. App.css

.App {
  text-align: center;
}

div {
  box-sizing: border-box;
}

.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

이 이후는 유료강의...

노마드코더 강의 6일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > react app 설치 (React JS, React-Dom, Babel)

     > propTypes : npm i prop-types 

2. Movie App 확장

 - 기존 버전에 css 추가

 - Detail 레이아웃은 여전히 개발하지 않았음. (추후 강의 전부 수강 후 진행 예정)

 - https://github.com/walterpark5193/react-for-beginners/tree/main

 * Breaking Change : 버전을 업데이트하면서 코드가 깨져서 코드를 수정해야 하는 Case

 - React.js는 기존 소스코드에 신규 기능을 추가하는 방식이기에 Breaking Change가 없다.

 - 즉, 옛날 코드도 여전히 동작한다는 의미