git add를 하다가 깜짝 놀람..

OS마다 줄 바꿈에 대한 문자열이 다르기 때문에 git에서 어느 쪽을 선택해야 할지 경고 메시지를 띄운 것!

core.autocrlf라는 기능을 켜주어야 한다.

window

git config --global core.autocrlf true

Linux, MAC

git config --global core.autocrlf input

yarn start!!!가 안된다구!

현재 나의 윈도우에 적용된 node 버전은 17 17버전에서 어떤 모듈과 충돌이 있는 듯 하여 16으로 내려보자

맥북이 고장나는 바람에 급하게 윈도우로 작업을 하던 중에 node를 17로 깔았나 보다.

nvm을 이용해서 버전을 바꿀 수 있다고 한다.

node 버전변경하기

nvm 활용해서 노드 버전을 변경하려고 하는데 계속 글자가 깨지는 에러가 발생했다.

cmd 프롬포트를 관리자로 열어주면 이 문제는 발생하지 않음

이제 16으로 바꾸었으니 다 지워보고 node 모듈도 재설치해보고

하 열렷다

Error: Text content does not match server-rendered HTML.

Error : Hydration failed because the initial UI does not match what was rendered on the server.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

eun / chae 를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())] 함수에서 에러가 발생

함수를 사용하지 않고 userId에 하드 코딩 시에는 에러가 발생하지 않는다.

함수 실행 결과가 랜덤이라 매 번 값이 달라지기 때문에 "서버와 클라이언트의 text content가 같지 않다"는 오류가 발생하게 된다. 서버와 클라이언트에서 같은 값을 사용할 수 있도록 정식 데이터를 사용하여 해결하자.

Redux

• 액션, 리듀서, 미들웨어 등 boilerplate 코드가 많이 발생함
• Redux 의 상태 구조는 트리 구조를 따름
• Redux 에서는 reselect 같은 3rd-party 라이브러리가 필요

Recoil

• Recoil 은 boilerplate-free API 를 제공함.
• React 의 useState 처럼 간단한 게터(get) / 세터(set) 인터페이스로 사용 가능
• Recoil 은 방향 그래프(directed graph, digraph) 를 따름
• Recoil 은 상태를 사용하는 컴포넌트를 수정하지 않고 파생 데이터(derived data)를 대체할 수 있음
  • 기본적으로 아톰(atom)의 데이터가 변경되면 해당 atom 을 구독하는 모든 컴포넌트들은 갱신
• AtomEffect 를 사용해서 특정 상태의 갱신 이후의 사이드 이펙트를 자체적으로 정의 가능
• 상태 갱신 이후에 영향받는 컴포넌트에서 직접 useEffect를 사용할 필요가 없음

Atom / Selector

Atom

• recoil 의 상태 단위
• store에 저장되고 갱신되는 데이터는 모두 Atom을 기반
• 아톰이 갱신될 때 그 상태를 구독(subscribe) 하고 있는 컴포넌트는 새로운 값으로 리렌더
• 아톰은 atom() 함수에 key 와 default 을 전달해서 작성

• 활용 사례 : 최초 로그인 시, accessToken을 atom에 저장하여, 다른 컴포넌트(사이드 바, 마이페이지 등)에서 사용할 수 있었다.

Selector

• Selector 는 상태를 기반으로 전달된 데이터를 가공할 때 사용
• selector() 함수에 key 와 get 와 set 를 전달하여 작성

import { selector } from 'recoil';
...

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

• get 프로퍼티 : 계산에 사용되는 함수
• 전달된 get 인수를 사용해서 아톰(Atom)이나 다른 셀렉터(Selector)에 접근
• 접근한 아톰이나 셀렉터가 업데이트 되면 다시 계산
• fontSizeState 상태를 가져와 폰트 사이즈를 출력하는 순수 함수처럼 동작.
• 셀렉터는 쓸 수(write)없기 때문에 useRecoilState를 사용하지 않고 useRecoilValue를 사용

import { useRecoilState, useRecoilValue } from 'recoil';


function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

• 활용 사례 : 유저의 accesstoken이 만료된 것을 파악하고, restore하며 새로운 accesstoken을 발급받을 때, 활용했었다.

비동기 데이터 쿼리

Redux

• redux-thunk, redux-observable, redux-saga 등의 Middleware 사용
• Middleware : action 을 dispatch 하고 reducer 에서 상태 업데이트를 하기 전 비동기 처리(예: 네트워크 요청, setTimeout)를 하는 중간자 역할
• Redux Middleware를 위해 추가되는 boilerplate 코드가 많아짐 + 앱의 규모가 커질 수록 복잡도가 늘어나고 코드 양이 더욱 방대해짐

Recoil

• 동기 / 비동기 함수 모두 selector 에서 처리
• render() 함수가 동기이기 때문에 promise 가 resolve 되기 전에 렌더링 할 수가 없음
• 이때 대기중인 데이터를 처리하기 위해 Recoil 은 React Suspense 와 함께 사용
• 컴포넌트를 Suspense 로 감싸서 대기중인 하위 항목들을 잡아내고 fallback UI 를 대신 렌더링

/ store.js
export const todoIdState = atom({
  key: "todoIdState",
  default: 1
});

export const todoItemQuery = selector({
  key: "todoItemQuery",
  get: async ({ get }) => {
    const id = get(todoIdState);

    const response = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${id}`
    );

    return response.data;
  }
});

// App.js
import { RecoilRoot } from "recoil";
import { Suspense } from "react";

import Container from "./container";

export default function App() {
  return (
      <RecoilRoot>
        <Suspense fallback={() => <p>Loading...</p>}>
          <Container />
        </Suspense>
      </RecoilRoot>
  );
}

// container/index.js
import { todoItemQuery } from "../store";
import { useRecoilValue } from "recoil";

const Container = () => {
  const data = useRecoilValue(todoItemQuery);

  return <div>{data.title}</div>;
};

export default Container;

파라미터에 따라 비동기 데이터 요청

• 파라미터를 기반으로 쿼리하고 싶을 땐 selectorFamily 를 사용

// store.js
import axios from 'axios';
import { selectorFamily } from 'recoil';

export const todoItemQuery = selectorFamily({
  key: "todoItemQuery",
  get: (id) => async () => {
    const response = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${id}`
    );

    return response.data;
  }
});


// App.js
import { RecoilRoot } from "recoil";
import { Suspense } from "react";

import Container from "./container";

export default function App() {
  return (
      <RecoilRoot>
        <Suspense fallback={<div>Loading...</div>}>
          <Container id={1} />
        </Suspense>
      </RecoilRoot>
  );
}


// container/index.js
import { todoItemQuery } from "../store";
import { useRecoilValue } from "recoil";

const Container = ({ id }) => {
  const data = useRecoilValue(todoItemQuery(id));

  return <div>{data.title}</div>;
};

export default Container;

나는 보통 프로그래머스로 문제를 풀고 -> github에 문제 풀이 과정을 업로드 해두었는데, 백준이 node.js 라고 해서 이쪽으로 알고리즘 공부를 섞어서 해야겠다고 생각했다.

1. node.js 설치

   • 이미 node.js는 설치 되어있음!

   

2. vs code Code Runner 설치

3. 파일구조 만들기

실행 JS : index.js 예시 담길 txt파일 : example.txt 백준문제 풀이 파일 저장 폴더 : Baekjoon/Q

4. 문제 풀기

1) 예제를 txt 파일에 저장한다. ( 문제의 예제 복사, 붙여넣기 )

2) 실행 JS 파일 : index.js ( example.txt의 내용을 받아서 실행 )

let fs = require('fs');
let input = fs.readFileSync('example.txt').toString().split(' ');
let a = parseInt(input[0]);
let b = parseInt(input[1]);
console.log(a+b);

3) index.js를 실행해서 통과가 되면 백준에 업로드할 코드로 만들기

• readFileSync 안의 파일 이름 바꾸고 백준에 제출

let fs = require('fs');
let input = fs.readFileSync('/dev/stdin').toString().split(' ');
let a = parseInt(input[0]);
let b = parseInt(input[1]);
console.log(a+b);

4) fs 모듈 이용하기

1) 한 줄로 입력을 받을 때

let fs = require('fs');
let input = fs.readFileSync('/dev/stdin').toString().split(' ');

2) 여러 줄로 입력을 받을 때

let fs = require('fs');
let input = fs.readFileSync('/dev/stdin').toString().split('\n');

지난 번에 70개 보다는 적군... 오늘은 nth-check 이녀석이 문제인가 보다

음..버전은 똑같은데요?

그래서 그냥 에러 메세지를 들고 구글링을 하기로 했다

누군간 있겠지 이 에러 해결한 사람

오 ... 깃허브 이슈까지 있는 문제인가보다.

중요한 것은 이 부분인듯하다. 꽤 상세한 글이군요. 이 해결 방식은 문제를 무시하는 해결방식이 아니라고 한다.

아무튼 갑분 react-scripts 이사 nth-check 너는 어떤 넘이냐구,, 우선 시키는대로 옮겨서 다시 npm install을 해봐야겠다.

좋아. 나도 devDependencies 로 옮길게. 그리고 깃에 푸시하면 되겠다.

• Player 클래스를 만들 때,
  • JS => constructor 안에 this 형식으로 만들어준다
  • TS => 파라미터를 작성하면, constructor 를 자동으로 만들어준다
  • TS => private 혹은 public property를 만들 수 있다 (자바스크립트로 컴파일 되지 않음)
    • nickname 만 사용할 수 있게 만들어준다

추상클래스

• 다른 클래스가 상속받을 수만 있는 클래스
• 직접 새로운 인스턴스를 만들 수는 없음

• 추상클래스 안의 메서드
  • pivate, public 도 작동 가능 ( 자바스크립트에서는 무시되고 실행되니 문제가 됨 )

추상메소드

• 메소드 : 클래스 안에 존재하는 함수
• 메소드를 클래스 안에서 구현하지 않고 메소드의 call signature 만 적는 것
• 구현 부분 :

• 해보기
  • User 추상 클래스가 getNickName 이라는 추상 메소드를 갖는다
  • 이 메소드의 리턴값은 void
  • call signature 만 작성
  • 이를 상속받은 Player 클래스에서는 getNickName을 구현해야 함
  • 즉, 추상 메소드는 추상 클래스를 상속받는 모든 것들이 구현을 해야 하는 메소드

Protected

• private

  • 해당 클래스의 인스턴스, 메소드에서는 접근이 가능하지만 추상 클래스의 경우 인스턴스화 할 수 없음
  • 필드가 외부로부터는 보호되지만, 다른 자식 클래스에서는 사용되기를 원한다면 사용 할 수 없음
  • 아예 밖에서는 사용 할 수 없지만, 상속받은 클래스 안에서는 사용 할 수 있음

• public 프로퍼티를 보여주고는 싶지만, 수정을 할 수 없게 만드려면?
  • readonly 사용하기

Interface

type vs interface

• type 의 경우 단일한 타입 / 배열 / 객체의 형태를 가질 수 있다.

• interface 의 경우 객체 형태만 가능하다

• typed의 상속, 연산자를 사용함

• interface의 상속, 클래스와 비슷함
• 객체지향 프로그램의 개념을 활용해서 디자인되었기 때문에 비슷

• interface는 property 축적이 가능
• 같은 이름으로 3개의 인터페이스를 만들었지만, 타입스크립트가 하나로 합쳤다

• type 에서는 불가능

• interface 는 컴파일 시 js로 바뀌지 않고 사라진다.

추상클래스 인터페이스로 바꾸기

• implements 를 사용한다!
• JS로 컴파일 시 User 인터페이스가 컴파일 되지 않아 매우 가벼워짐 ~

• User 인터페이스를 상속받은 Player 클래스
• 에러가 계속 발생 => 인터페이스를 상속할 때는 property를 private/protected 로 만들지 못함

• public 으로만 사용할 수 있음

• 여러 인터페이스 동시에 사용하기

• 함수에서 사용해보기
• argument에 인터페이스를 사용하여, argument의 객체 모양을 지정하기
• return 에도 인터페이스를 사용할 수 있음

• new 형식이 아닌, interface 내의 내용을 그대로 작성해주면 됨!

github 에서 메일이 왔는데, 로그인했다는 메일인 줄 알고... 최근에는 깃허브 계정으로 회원 가입한게 없는데 ??? 하고 생각했었다. 그런데 레파지토리 이름과 함께 보안????

보안이 취약하므로 package.json이나 yarn.lock의 패키지를 최신 버젼으로 업데이트 해주어야 안전하다는 이야기 같다!!!

git hub에서 문제라고 알려주었던 파일에 가서 npm audit

그리고 나면 ... 결과가 나온다

npm audit fix 를 하라고 하니 해본다

엄청나게 많은 것들이 바뀐 것 같은...?

혹시 안된것이 있을까봐 강제로도 한 번 해봤다 npm audit fix --force

잘 되었나?

• slider 컴포넌트를 만들던 중, 발생한 타입스크립트 에러
• 암시적인 형식이 아닌 명시적인 형식을 선언

• Paramter에 들어가는 인자들에 대한 타입도 작성해서 걸어준다.
• 위치 { } : 타입 !!

• 사용자가 스크롤 할 때마다 새로운 데이터를 가져온다
• 모든 데이터를 한 번에 가져오는 것보다 효율적 ex. 트위터
• 언제 새로운 데이터를 가져오는가?
  • 사용자가 버튼을 눌렀을 때
  • 페이지의 특정 지점을 스크롤 했을 때

useInfiniteQuery

• 페이지네이션과는 다른 api 사용

• 페이지네이션

  • 현재 페이지를 컴포넌트 상태에서 추적
  • 사용자가 새 페이지를 열기 위해 버튼을 클릭했을 때, 업데이트 된 상태가 쿼리 키를 업데이트하고 쿼리 키가 데이터를 업데이트 하는 방식

• useInfiniteQuery

  • 다음 쿼리가 무엇인지 추적함
  • 다음 쿼리가 데이터의 일부로 반환
  • 사용할 api에서는 result 라는 데이터 배열을 가진 객체를 프로퍼티로 갖는다.
  • 또한, api에서는 다음에 사용할 쿼리와 이전 쿼리, 총 페이지 수를 알려준다.

useQuery vs useInfiniteQuery

1. 반환된 데이터의 형태가 다르다.

• useQuery : 단순히 쿼리 함수에서 반환되는 데이터 형태
• useInfiniteQuery : 두 개의 프로퍼티를 갖는다 1) pages : 배열 형태 : 페이지에 있는 각 요소가 useQuery에서의 데이터와 같은 형태 2) pageParams : 각 페이지의 매개변수 기록 (많이 사용되는 편은 아니다!) : 모든 쿼리는 페이지 배열에 고유한 요소를 가지고 있고 그 요소는 해당 쿼리에 대한 데이터에 해당한다 => 페이지가 진행되며 쿼리도 변경됨 : pageParams는 검색된 쿼리의 키를 추적

2. 구문이 다르다.

• pageParams : 쿼리 함수에 전달되는 매게 변수

useInfiniteQuert("sw-people(쿼리 키)", ({ pageParam = 
defalutUrl (첫번째로 정의한 Url을 기본값으로 사용) }) => fetchUrl(pageParma)

• React-Query가 pageParam의 현재 값을 유지

• 컴포넌트 상태 값의 일부 XX

• useInfiniteQuery에 옵션을 사용

  • getNextPageParam : (lastPage, allPages) >> 다음페이지로

    • 마지막 페이지의 데이터, 모든 데이터에서 다음 페이지의 url 획득

    • pageParam을 업데이트 (next 프로퍼티 사용)

      

3. 반환 객체의 특수한 프로퍼티

• fetchNextPage : 사용자가 더 많은 데이터를 요청할 때 호출 ex. 더 많은 데이터가 필요하여 버튼을 누를 때 / 스크린에서 데이터가 소진되는 지점을 누를 때
• hasNextPage : getNextPageParam의 반환 값을 기반으로 하는 함수
  • 이 프로퍼티를 useInfiniteQuery에 전달하여 마지막 쿼리의 데이터를 어떻게 사용할 것인지 지정
  • undefined 인 경우 => 더 이상 데이터 없음
  • useInfiniteQuery에서 반환 객체와 함께 반환 된 경우 hasNextPage는 거짓
• isFetchingNextPage : 다음 페이지를 가져오는 지 ? 아니면 일반적인 페칭인지 구별 가능

Flow

1. 컴포넌트가 마운트 되다
2. 이 시점에서 useInfiniteScroll이 반환된 객체의 data : undefined 프로퍼티가 정의되어 있지 않다. (쿼리를 만들지 않았기 때문에)
3. useInfiniteScroll이 쿼리 함수를 사용하여 1페이지를 가져온다

4. 쿼리 함수는 useInfiniteScroll의 첫 번째 인수 그리고 pageParam을 인수로 받음 첫 pageParam은 우리가 기본 값으로 정의한 것이 지정

5. pageParam을 사용하여 첫 번째 페이지를 가져오고 반환 객체 데이터의 페이지 프로퍼티를 설정한다. => 인덱스가 0인 배열의 첫 번째 요소 설정 => { .. } 쿼리 함수가 반환 하는 값

6. 데이터가 반환된 후 react-query가 getNextPageParam (useInfiniteScroll의 옵션)을 실행 => lastPage, allPages를 사용해서 받아온 내용을 바탕으로, pageParam을 업데이트 => 다음페이지 링크가 업데이트 된다

7. 다음 페이지? hasNextPage 값을 정의하는 방식 => pageParam이 정의되어있는가 여부

8. 다음페이가 있는 상태에서 1) 다음페이지 버튼 누르기 2) 스크롤 하기 등을 통해 fetchNextPage 함수를 호출 할 때, useQuery가 useInfiniteScroll을 실행한다

9. 이를 사용해서 또 다음 요소를 업데이트하거나, 데이터의 프로퍼티인 페이지 배열에 다음 요소를 추가

10. 새 데이터를 가지고 getNextPageParam 실행하여 NextPageParam을 설정

11. 더이상 페이지가 없다면? pageParam : undefined

12. hasNextPage 도 거짓이 된다 => 작업 완료, 더이상 데이터 없음

사용하기

React-Infinite-Scroller

• loadMore = {fetchNextPage} : 데이터가 더 필요할 때 불러오는 함수

• hasMore = {hasNextPage} : hasNextPage는 useInfiniteQuery 에서 반환된 내용을 해체하여 사용

• 무한 스크롤 컴포넌트 부분

• pages 배열 -> result 배열 로 넘어가기

• 현재 사용하고 있는 api의 구조

• console.log 확인해보면?

• 데이터가 정의되지 않는 오류가 발생함

페칭과 에러

• useQuery 처럼 isLoading 사용하기 => 캐시된 데이터가 없을 때의 데이터 정의
• isError, error => 에러 발생 시 화면 정의

• 더이상 에러가 발생하지 않는다 ㅎㅎ
• 그런데 정해진 위치에 도달해서 새로 데이터를 가져 올 때 사용자에게 피드백을 주지 않는다 => 데이터 수집하는 피드백을 줘보자.

isLoading 을 isFetching 으로 바꾼다면?

• 최초 데이터 패칭은 잘 되지만, 새로운 페이지가 열릴 경우 스크롤이 위로 돌아간다

• 왜? 데이터는 더 있지만 새로운 페이지가 열릴 때마다 바로 조기 retrun 이 되어버리기 때문이다.

isLoading과 isFetching 을 함께 사용하기

• loading 중 일 때,
• isFetching 중 일때를 각각 지정해준다.

• 스크롤도 끊기지 않고, 데이터를 새로 가져오는 것도 보인다.

양방향 스크롤 (Bi-directional Scrolling)

• 데이터의 중간부터 시작할 때 유용 (시작점 + 이전 데이터 + 이후 데이터)
• next 메서드처럼 previous 메서드도 존재
• 둘 다 수행하면 양방향 스크롤이 가능함

• 함수 위에 마우스를 올렸을 때 확인할 수 있는 것
• 함수를 어떻게 호출해야 하는지 알려주는 역할
• 함수의 인자 타입과 반환 타입을 알려줌

• 직접 Add 타입을 만들어서, add 함수에 적용시키면
• a,b의 타입을 직접 알려주지 않아도 타입스크립트는 추론이 가능하다

오버로딩 Overloading

• 패키지나 라이브러리에서는 오버 로딩을 많이 사용함
• 오버로딩은 함수가 서로 다른 여러개의 call signatures를 가지고 있을 때 발생

• b의 타입이 string | number 으로 두 가지 형태의 call Signatures 를 가지고 있어서 오류가 발생

• b의 타입을 구분해서 사용해야 함

사용 예시

• push 함수 인자 config 는 string 혹은 Config(객체) 타입이 될 것

• typeof 를 통해 config의 타입이 string 일 경우 => console.log 의 config 역시 string

• string이 아니라면 Config 타입이기 때문에, 객체 안의 key 에 접근할 수 있어진다

파라미터의 개수가 다를 때

• call Signatures 에 따라 c가 있을 때도 있고, 없을 때도 있다
• c가 옵션으로 존재하여 에러 발생

• c 의 타입이 number 일 것이라고 알려주어야 한다

다형성 Polymorphism

• poly : many, several, much, multi
• morphism : form(형태), structure(구조)

• 작동은 하지만, 다형성을 활용하지는 못했음
• number[], boolean[], string[] 등의 concrete 타입을 사용하지 말고 Generics 타입을 사용해보자
• concrete type : number, string, boolean, void, unknown 등 지금까지 배운 타입들

• 이렇게 여러 타입이 섞여있는 배열일 경우는?

제네릭 Generics

• 타입의 placeholder 같은 역할. 타입을 유추하게 만들어주는 역할

• 사용하는 이유는?

  • call signaure을 작성할 때, 들어올 데이터의 타입을 확실하게 알지 못할 때 사용
  • concrete 타입도 알지 못할 때

• 사용 방법

• 타입스크립트가 직접 타입을 유추한다

• return 의 타입도 제네릭으로 표현하면

• a,b,c 의 타입이 자동으로 유추되고 있다

any와의 차이?

• any일 때

• generic일 때

• 에러를 미리 방지하지 못한다

여러개의 제네릭 타입

• 새로운 제네릭 타입을 추가할 수 있다

• 중첩해서 사용할 수 있다.

key

• Value를 특정하는 이름

• 배열에 map을 사용할 경우 key를 지정해주어야 한다.

• 키가 중요한 이유는? map에서 컴포넌트 재사용을 위해서

• 키를 통해서 기존 트리와 이후 트리의 자식들이 일치한지 확인

• key 값으로 줄 수 있는 것 : id, index(배열의)

• index의 경우 항목들이 재배열되지 않는다면 동작이 가능하나, 그 배열의 순서가 재배열 되는 경우 비효율적으로 동작 할 수 있으니 유의할 것

• 제대로 key 값을 주려면 중복이 없고, 바뀌지 않는 값으로 주자

26 상태 끌어올리기

• 자식 컴포넌트에 있던 함수, 변수 등을 부모 컴포넌트에서 관리를 할 수 있게 lifiting up
• 자식(형제) 컴포넌트로 내려준다
• props drilling : 과도한 liftingdms drilling을 야기할 수 있다 => 너무 많은 컴포넌트 들이 props를 알게 되고, 이를 변경시킬 수 있는 위험 요소가 존재할 수 있음!! => context api 등과 같은 상태관리 라이브러리를 이용해 해결할 수 있음

Data Fetch

fetch api

• 네트워크 통신

import React from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = React.useState(null);
  const [errorMessage, setErrorMessage] = React.useState(null);

  React.useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json"
    )
      .then(function (response) {
        return response.json();
      })
      .then(function (myJson) {
        setData(myJson.data);
      })
      .catch((error) => setErrorMessage(error));
  }, []);

  if (errorMessage != null) {
    return <p>error</p>;
  }

  if (data == null) {
    return <p>loading</p>;
  }

  return (
    <div>
      {data.people.map((el, index) => (
        <div key={index}>
          <div> {el.name}</div>
          <div> {el.age}</div>
        </div>
      ))}
    </div>
  );
}

1. fetch를 이용해서 데이터를 불러온다

2. then => 성공 했을 때 상황

3. error => 에러가 났을 때 상황

4. loading => 데이터가 오기 전, 에러가 발생하지 않은 상황

   = > 각 상태에서의 화면을 보여주자!!!!

타입 안정성

• 개발자 경험을 누릴 수 있다.
• 코드에 버그가 줄어든다
• 런타임 에러가 줄어든다
• 생산성이 증가된다

자바스크립트의 유연성

• 배열과 boolean 의 계산에서..(유효하지 않아야하는데...)

• 문제점 1 : 배열이 사라지고, string 타입으로 변했다

• 문제점 2 : boolean이 사라지고 string 타입으로 변했다

• 함수를 만들어서 실행해보면..

• 숫자만 들어와야하는데, string이 들어와 있을 때 이 함수를 실행시키면 안된다.
• 하지만 자바스크립트는 잘못된 타입이 들어와도 실행을 막지 못한다
• 입력값이 2개가 들어와야 하는 함수지만, 1개가 들어와도 실행이 된다.
• 에러 혹은 에러 메세지를 발생 시키거나, 예외처리를 하지 않고 NaN을 반환한다
• 자바스크립트가 a, b가 필수값인지 선택값인지 알지 못하고 있음

=> 다른 언어에서는 이와 같은 문제가 발생하지 않는다.

• 런타임 에러 : 콘솔 안에서 발생하는 에러. 유저의 컴퓨터에서 코드가 실행될 때만 일어나는 에러

• 은채 변수에 객체를 설정 후, hello() 함수를 실행해 보았을 때 에러 발생 => 에러가 날 줄 모르고 자바스크립트는 실행한 후 에러를 보여줌 (유저의 컴퓨터에서 코드가 실행되면 나타나는 에러) => 코드가 실행 되기 전에 언어 자체적으로 eunchae 객체에는 hello()라는 함수가 없다는 것을 보여주어야 함

타입스크립트 작동 방식

• 컴파일 : 작성한 타입스크립트를 -> 자바스크립트로 변환
• 타입스크립트가 먼저 코드를 확인하여 변환 후 오류가 나지 않게 확인
• 타입스크립트가 성공적으로 컴파일 되어 자바스크립트 코드로 변환

• 자바스크립트에서는 hello() 함수에서 에러를 발견하지 못한다
• 타입스크립트에서는 hello() 함수가 존재하지 않는다는 에러를 발생시킨다

• 타입스크립트에서는 a,b 가 무엇인지 알려주지 않으면 에러 발생한다
• 2개의 인자가 필요한 데 1개만 작성했을 때 에러를 발생시켜준다

암시적 유형 vs 명시적 유형

• 타입스크립트는 타입을 추론한다

• a의 타입을 변경할 수 없다

• b의 타입을 지정하는 것 => 타입체커와의 소통!
• boolean이 아닌 string을 지정하여 오류 발생

• 숫자로 이루어진 배열

• 문자열을 push 하려 할 경우 에러가 발생

• 다른 타입끼리는 섞지 않는다

• 만약 c가 빈 배열인데, 숫자만 들어가게 될 배열이라면? number[]

• 타입스크립트가 추론하기 어려울 경우에는, 명시적으로도 적어주자

• 객체 안 name은 string 이기 때문에 불가능함

• 타입을 명시적으로 적어주지 않았을 때 , any 가 등장한다

TS 유형

선택적 변수 '?'

• player 객체에 age가 있지만, age를 사용하지 않을 때는 오류가 발생한다.
• age가 있기도하고, 없기도 할 경우에는 ' ? '을 사용한다.

타입 별칭 (Type Aliases)

• 같은 타입을 여러번 반복해서 사용하는 것은 비효율적이다

• 상단에 Type을 적어두고 , 사용한다.

• 중첩 가능

인자와 retrun의 Type

• 함수에서 (인수 : 타입)
• 해당 함수에서 반환하는 객체에는 age가 없기 때문에 오류 발생

• () 뒤에서 return 의 타입을 지정해주면, age를 사용할 수 있게 된다.

• 화살표 함수에서 사용하기

readonly

• name을 변경하려고 할 경우 에러 발생
• eunchae의 타입은 Player 라는 것을 알고 있는 타입스크립트는, readonly 속성이 붙은 name의 변경을 허용하지 않는다.

• 자바스크립트에서는 에러가 발생하지 않지만, 타입스크립트에서는 readonly가 붙은 배열에 변형을 가할 때 에러를 발생시킨다.

Tuple

• player에는 최소 3개의 데이터가 배열에 들어가도록 지정해두었는데, 현재 빈 배열 상태라는 에러

• 항상 정해진 갯수의 요소를 가진 배열을 만들 때 사용
• 미리 배열에 들어갈 요소들의 타입을 지정해두는 것

• readonly와 함께 사용할 경우 배열의 인덱스로 접근하여 변경 불가능

undefined

• JS와 TS에서 볼 수 있는 undefined 타입
• 주로 선택적 변수를 사용할 때 확인할 수 있다.

any

• 비어있는 값을 쓰면 나타나는 any

• 타입스크립트의 보호장치들로부터 빠져나오는 any
• 모든 보호 장치들을 비활성화시키는 any
• any를 사용하지 않는 최소화 해야한다

• any를 사용할 경우 타입스크립트에서도 이 코드가 실행되어버린다.

unknown

• a를 unknown 타입으로 설정할 경우, number 데이터와의 계산이 실행되지 않는다.

• a가 unkonown 이지만, number/string 일 때를 확인하는 과정을 거치고 나면 a의 타입이 number/string 으로 정해져 오류가 실행되지 않는다.

• 변수의 타입을 미리 알지 못할 때 unknown을 사용한다

• typescript가 강제로 타입 체크 과정을 거친다

void

• void는 아무것도 retrun 하지 않는 함수를 대상으로 사용한다
• void를 따로 지정할 필요 없이 자동으로 인식
• void는 비어있는 것을 의미

never

• 함수가 절대 return 하지 않을 때 발생

• return 이 있는 경우 에러가 발생한다.

• 타입이 두 가지 일 수도 있는 상황에 발생가능

• 첫 번째 name은 string

• 두 번째 name은 number

• 세 번째 name은 never
• 절대 실행되지 않아야 할 코드, 올바른 타입의 데이터가 들어왔다면 실행될 수 없다.

• 리액트는 html에서 사용하는 class 대신 className 을
• style : 객체, 카멜케이스, className보다 먼저 적용됨

20 Ref로 Dom 다루기

Dom 조작하기

• input Element 가 있고 화면이 뜨자마자 focus를 주고 싶다면?

JS => ?.focus()

• DOM 트리는 body와 여러 다른 요소를 포함. Document는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공

const inputRef = React.useRef()
const divRef = React.useRef()

React.useEffect(()=>{
    input.current.focus()

    setTimeout(()=>{
        divRef.current.style.backgroundColor = "pink"
   }, 3000)
},[])

retrun (
<>
    <input ref={inputRef} />
    <div
        ref = {divRef}
        style ={{height : 100 , width: 100, backgroundColor : "red"}}>
    </div>
</>
)

• 1) 화면이 뜨자마자 input 에 focus 주기
• 2) 3초 뒤 배경 색 바꾸기

왜 useRef?

• 내 생각 ? 가상돔을 사용하여 최적의 렌더링을 하고 있는데 진짜 Dom을 조작해버리면 안될 것 같아

21-22 Form

기본 구조

• label
• input
• select (option)
• submit

console.dir()

• 콘솔에서 지정된 JavaScript 객체의 모든 속성을 볼 수 있는 방법

react에서만 사용하는 속성

• label의 htmlFor : input과 연결 시킬 때 ( JS에서는 for )
• input의 defaultValue : 변하지 않는 경우일 때

validattion

• startsWith() : 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환

• disabled ={true} 혹은, true 대신 상세 조건 설정하기

• onSubmit 혹은 onChange 할 때도 검증 가능 => state와 event.target.value 등을 적절히 사용해보자

23 Error

Catch Error

try {
...
} catch (error) {
...
}

• ErrorBoundary : 감싸고 있는 컴포넌트에서 에러가 발생할 경우, 특정 화면을 보여줄 수 있게하는 컴포넌트

• class 컴포넌트로 작성해야 함

• fallback 을 사용할 수도 있다. 에러가 발생했을 때 보여줄 수 있는 컴포넌트를 만들어 활용할 수 있음

react-router-dom을 5 버전으로 설치하고 처음 사용하려고 하자마자 발생한 오류이다. next.js 없이 react 로만 초기 셋팅을 하는게 이렇게 어려울 줄이야 react router 셋팅하고, /project 로 왔는데 시작부터 이렇게 에러를 !

import './App.css';
import { Router, Switch, Route } from 'react-router-dom';
import ProjectPage from './components/project';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path={'/project'} component={ProjectPage}></Route>
      </Switch>
    </Router>
  );
}

export default App;

코드에서는 history, location을 사용한 적도 없는데!??

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

Router를 살짝 바꿔주었다. 이렇게 처음부터 어이없게 헤매다니..

DocumentFragment

• DocumentFragment 노드를 사용하면 오직 메모리 상에만 존재하는 경량화된 DOM을 만들 수 있다

    <script>
      const docFrag = document.createDocumentFragment();
      // const docFrag = document.createElement('div');

      for (let i = 0; i < 10; i++) {
        let divEl = document.createElement('div');
        divEl.innerText = 'hello~ this is ' + i;
        docFrag.appendChild(divEl);
      }

      document.body.appendChild(docFrag);
    </script>

• DocumentFragment 를 만든 후,
• body에 바로 appendChild 하는 것이 아닌, 이 DocumentFragment 노드에 appendChild 한 후,
• body에는 DocumentFragment 노드를 붙이는 것!
• 결과는 똑같다!

왜 해???

• DocumentFragment 만들고 하는 것과 , div를 하나 만들어서 하는 것과 무엇이 다른가?

• div 태그로 만들었다면

• 자식 요소들을 만들기 위해 어쩔수 없이 같이 생겨난 부모 div

• DocumentFragment로 만들었다면

• 부모 요소 없이, 만들고자 했던 부분들만 생겨났다.

DocumentFragment 의 특징

• DocumentFragment를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않는다 그 자식 노드들만 추가 된다

• DocumentFragment DOM에 추가하면 DocumentFragment 노드의 자식 요소들은 더이상 메모리 상에 존재하지 않는다

  • 확인하기 : body에 붙이기 전, 후를 비교해보자

    

  • 자동으로 자식 요소들이 삭제 되어 메모리 상에 존재하지 않는다!

  • div 였다면?

  • 자식 요소들이 그대로 남아 메모리 상에 존재한다.

• 여러개의 각기 다른 부모 요소에 요소를 집어 넣을 때 효율적

• 1번

  • for문을 이용해서 100개의 div 요소를 만든다
  • 만들어진 요소를 부모 요소(container) 에 각각 집어넣는다
  • 부모요소의 갯수만큼 실행하는데 -> 각 부모 요소에 appenChild를 이용해서 elements의 요소들을 하나씩 순서대로 집어넣는다'
  • j번째 요소를 집어넣을 때 배열은 참조타입이기 때문에 값 자체가 복사되지 않는다
  • cloneNode() 안했을 때 : 마지막 div에만 요소가 들어감

  

  • cloneNode() 메서드를 활용하여 요소 자체를 복사하자

  

  • 각 div 마다 100개의 요소가 생긴다.

  • 2번 document.createDocumentFragment() 사용해보기

  

  • el 요소들을 바로 frag에 등록한다 (빈 배열 필요 없음)
  • 부모 요소에 바로 frag를 등록한다 (이중 for문 필요 없음)
  • farg도 참조타입이기 때문에 clone해서 값 자체를 붙여주자

cloneNode

• DocumentFragment를 DOM에 추가할 때, DocumentFragment의 자식 노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않기 때문에 유지하고 싶다면 사용할 것

• cloneNode를 하지 않으면 appendChild 이후 최종적으로 아무것도 남지 않지만

• cloneNode를 하면 100개의 요소를 마지막에도 확인할 수 있다

브라우저가 사용자의 입력을 받았을 때

브라우저 화면에서 이벤트 발생

• 이벤트 : 마우스 클릭, 휠 움직임, 마우스 포인터 이동, 화면 터치 등 모든 종류의 사용자 제스처

이벤트 대상 찾기

• 이벤트가 발생한 좌표에 무엇이 있는지 확인
• 렌더링 과정 중의 '페인트 기록'을 찾는다.

캡처링 단계

• 페인트 기록을 통해 좌표를 알아냈다면
• 해당 좌표에 위치한 요소의 이벤트 리스너를 실행
• 이 과정이 캡쳐링 단계 (capturing phasese)

• 이 때 타켓 요소의 가장 최상위 window 객체로부터 캡처링 단계의 이벤트 리스너가 등록이 되어있는 지 확인
• 있다면 실행
• 계속 자식 요소로 전파되며 만나는 캡쳐링 이벤트 리스너 실행
• 타켓 요소까지 이동

버블링 단계

• 캡쳐링이 끝나고, 최초에 이벤트가 발생했던 요소에 버블링 이벤트 리스너가 있다면 실행
• 다음 직계 부모 요소에 버블링 이벤트 리스너가 있다면 실행
• 가장 최상위 window 객체까지 계속 전파

<!DOCTYPE html>
<html>
  <head>
    <title>이벤트 캡쳐링, 버블링</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button type="button">click</button>

    <script>
      window.addEventListener(
        "click",
        function () {
          console.log(1);
        },
        useCapture
      );

      document.addEventListener(
        "click",
        function () {
          console.log(2);
        },
        true
      );

      document.documentElement.addEventListener(
        "click",
        function () {
          console.log(3);
        },
        true
      );

      document.body.addEventListener(
        "click",
        function () {
          console.log(4);
        },
        true
      );

      document.querySelector("button").addEventListener(
        "click",
        function () {
          console.log(5);
        },
        true
      );

      document.querySelector("button").addEventListener(
        "click",
        function () {
          console.log(6);
        },
        false
      );

      document.body.addEventListener(
        "click",
        function () {
          console.log(7);
        },
        false
      );

      document.documentElement.addEventListener(
        "click",
        function () {
          console.log(8);
        },
        false
      );

      document.addEventListener(
        "click",
        function () {
          console.log(9);
        },
        false
      );

      window.addEventListener(
        "click",
        function () {
          console.log(10);
        },
        false
      );
    </script>
  </body>
</html>

캡쳐링 단계

1. 윈도우 객체
2. document
3. document의 documentElement(html요소)
4. body
5. button ( 타깃요소 )

버블링 단계

6. button ( 타깃요소 )
7. body
8. document의 documentElement(html요소)
9. document
10. 윈도우 객체

• addEventListner ("이벤트 타입", 이벤트 발생 시 실행할 함수, useCapture => 캡쳐링 단계에서 해당 리스너를 실행 여부 T/F)

• 버튼 클릭 했을 때 : 캡쳐링 -> 버블링 실행

• 버튼 바깥을 클릭했을 때 : 5, 6번 실행되지 않음

이벤트 위임

• 이벤트 리스너가 div 요소에 있고 사용자가 부모 요소 div의 자식인 button 태그를 클릭했다면?

  • 브라우저는 이벤트가 발생한 button 태그를 찾는다
  • 이벤트 캡쳐링, 버블링을 통해 button 태그의 부모 요소인 div의 이벤트 리스너를 실행한다

  

event 객체 = 돔에서 일어나는 이벤트의 정보 포함

• event.currentTarget은 이벤트가 등록된 요소
• 이벤트 리스너 안의 this 가 참조하는 대상과 같음
• 이벤트가 최초에 발생한 요소는 event.target에 참조

확인해보기

• 버튼을 누르면?
  • this = event.currentTarget
  • event.target = 이벤트가 최초에 발생한 button

또 확인해보기

• 버튼을 눌렀을 때, 아이템을 만들건데 이벤트는 더 상단의 div에 있을 때.

  • 이벤트 리스너는 div를 클릭 할 때로 만들었음
  • event.target의 태그 이름이 button 이면, li태그를 만들어서 ul안에 배치

• 버튼을 누르면 새로운 li들이 생겨난다.

• li들을 눌렀을 때 console.log 찍히게 이벤트 발생시키기도 추가

• 기존에 있던 아이템, 새로 생긴 hello~들을 누르면 hit 이 콘솔에 나온다.

• 버튼, li, 새로 생긴 자식 요소 들에도 모두 이벤트가 등록되었다.

이벤트 위임

• 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치한다면
  • 그 요소가 몇 개든 상관없이 이벤트 등록 가능
  • 요소가 동적으로 생성되어 계속 추가되어도 같은 기능 유지
• 이벤트 위임 : 이벤트 흐름을 활용하여 단일의 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 되는 방법

• 생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드 (부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업

발생 속성

• width, height, padding, margin, float, position 등
• 레이아웃에 영향을 주는 모든 속성은 리플로우를 발생시킨다.

Repaint

• Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리)를 다시 레이어에 그리는 작업

발생 속성

• color, border-radius, background, box-shadow 등
• 시각적으로 보여지는 모든 속성

리플로우와 리페인트는 렌더링 과정에서 레이아웃 단계와 페인트 단계를 다시 거치는 과정

렌더링 속도에 영향을 미치는 이유

• 렌더링 과정은 순차적으로 진행되기 때문
• 각 렌더링 과정들은 반드시 전 단계의 데이터가 필요
• 전 단계에서 변화가 일어났다면? -> 다음 단계에도 모두 영향을 미침

• 스타일 -> 레이아웃 -> 페인트
• 스타일에 변화가 생기면 -> 레이아웃, 페인트 까지 모두 영향을 받는다
• 레이아웃만 변화가 생기면? -> 페인트가 영향을 받는다

애니메이션 생각해보기

• 왼쪽에서 오른쪽으로 이동하는 애니메이션을 만들었을 때
  • 60fps로 움직이게 했다면
  • 요소의 레이아웃이 변경되기 때문에 렌더링 엔진은 60장의 프레임에 0.1초 간격으로 리플로우, 리페인트 과정을 수행
  • 이 과정 중에 0.1초 안으로 리플로우,리페인트를 끝내지 못한다면 애니메이션이 버벅거리는 것을 보게 된다.
  • reflow, repaint 해야할 요소가 많으면 많아질 수록 자연스럽지 못한 애니메이션을 그리게 된다
  • 브라우저 전체적인 성능에 영향

해결방법

CSS Troansform 속성

• transform을 사용하여 만드는 애니메이션은 cpu 대신 gpu를 사용하여 화면 렌더링 처리
• CPU는 해야 할 일이 아주 많기 때문에... (OS 구동, 브라우저 구동 등)
• GPU는 여러개의 코어가 간단한 작업을 동시에 협업하는데 특화 -> 애니메이션을 빠르게 처리
• CPU 코어가 4-8개 vs GPU 코어가 5nnn개 (기기마다 차이 있음)

requestAnimationFrame()

• 자바스크립트를 통해 일어나는 애니메이션 정보를 브라우저에 매 프레임마다 미리 알려줌
• 자바스크립트 애니메이션이 프레임의 시작 시 실행되도록 보장

• 방향키를 움직였을 때, 그 방향으로 쭉~~ 움직이도록 => 부드러운 애니메이션 실행

• 모던 웹 브라우저 들여다보기
• 렌더링 트리 생성, 레이아웃 및 페인트
• How Browsers Work : Behind the scenes of modern web browsers

웹브라우저의 기본적인 구조

• 사용자 인터페이스 : 웹 페이지에서 보이는 부분 외 부분 (주소창, 뒤로가기/앞으로가기, 새로고침버튼, 즐겨찾기 등)
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진을 중개
• 렌더링 엔진 : htm 코드를 사용자에게 렌더링해주는 부분,
  • 이미지,css,js등을 통신을 통해 다운받는다
  • 작성했던 자바스크립트 코드를 해석한다
  • 브라우저마자 selectbox, button 등이 다른데 os에 의존하는 UI형태
• 자료저장소 : 쿠키와 같이 지속적으로 저장되어야 하는 것들이 저장되는 공간

렌더링 엔진

파싱

• HTML을 파싱하여 DOM으로 변환
• 작성했던 코드를 트리구조로 변환

• 오타, 잘못된 문법 => 예외처리
• link, img 태그 => 리소스 다운로드
• script 태그 => DOM 파싱 중단, 자바스크립트 해석

• document.write를 통해서 h2 태그가 생성됨 => DOM 구조의 변화가 생기기 때문에 파싱 중단

스타일 계산

• CSS를 파싱하여 CSSOM으로 변환

• CSSOM(CSS Object Model ~ 트리형태)정보를 통해 DOM 노드에 대한 스타일 결정
• 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능

레이아웃 트리 생성

• 돔과 계산된 스타일을 따라가며 요소의 크기, 좌표와 같은 정보를 담은 레이아웃 트리(렌더트리)를 생성
• 화면에 표현되는 정보만 트리에 담기게 된다
  • display : none => 돔에는 있었지만 레이아웃 트리에는 보이지 않음
  • 가상요소는 화면에 보일 수 있기 때문에 돔에는 없었지만 레이아웃 트리에는 보일 수 있음
  • visibilty : hidden => 돔에도 있고, 레이아웃 구조는 유지해야하기 때문에 있음!

페인트 기록

• 레이아웃 트리(렌더트리)가 생성되면 이 트리를 따라 페인트 기록 생성
• 페인트 기록에는 요소를 렌더링하는 순서가 저장
• 지금까지의 정보를 바탕으로 한 페이지를 여러개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등의 모든 시각적 부분을 그리는 작업이 진행

컴포지팅

• 각각의 레이어를 스크린에 픽셀로 표현 (레스터링)
• 나누었던 레이어들을 합성해 페이지 그리기 (컴포지팅)

컴포넌트

• DOM : 논리 트리

• 컴포넌트 :** 엘리먼트의 집합**

• 엘리먼트 : 요소

  

• useState가 바로 상태값을 관리해주는 react의 훅이다.
• useState() 안에 들어있는 값이 초기 값
• 이 안에는 문자도, 배열도, 불린 값도 넣을 수 있다
• const [우리가 관리해야 할 state 상태 , 업데이트 하는 함수]

14 컴포넌트 사이드 이펙트 다루기

• use~~로 시작하는 것들이 react의 훅이다.

사이드 이펙트?

• 부작용
• 의도하지 않은 효과 vs 부수 효과(변경, 효과가 일어날 때 그 효과를 다른 곳에도 전파하기 위함)

• input에 쓴 내용을 남겨놓고 싶다면? => 로컬스토리지, 세션스토리지, 쿠키 등의 브라우저 저장 공간을 활용하자

• onChange에 들어갈 함수에 localStorage 에 저장하는 함수를 써준다. setItem()

• 다시 접속했을 때도 남아있게 하고 싶다면, keyword state의 초기값을 로컬스토리지에서 받아오고, input의 값으로 해볼까?

문제점 1

• 하지만, 로컬스토리지에서 값을 읽어오면서 데이터가 크거나, 길면 딜레이가 생겨 문제가 생길 수도 있다. 그럴 때, useState에는 함수로 값을 넣어줄 수 있다. 초기값을 리턴하는 함수를 사용해서 처음 값을 읽어오는 시간이 길더라도, 함수가 실행되면 값을 받아올 수 있게하자. => lazy initialize

• render 보다 늦게 initialize가 찍힌다.

문제점 2

• 어떤 동작을 하던지 계속해서 render 중
• keyword가 바뀌었을 때만, 발생하는 사이드 이펙트로 로컬스토리지에 keyword가 저장되게 하자

• useEffect 에서 두 번째 인자(dependency array)로 빈 배열을 두면 최초 렌더 시, 한 번만 실행
• keyword가 바뀔 때마다 실행 되게 하려면, keyword state를 넣어준다.
• 의존성 배열을 작성하지 않으면, 모든 변화에 반응하게 된다

15 커스텀 훅 만들기

• keyword, typing, result가 바뀔 때 마다 로컬스토리지에 저장하고 싶다고하면 -> useEffect를 3번??? (비효율)

• 반복되는 부분은 => 함수화

• useState/useEffect가 반복되는 부분은 => use 커스텀 훅

• state 값을 로컬스토리지에 저장하는 커스텀 훅을 만들어보자
• 처음 만들었던 state와 로컬스토리지에서 값을 받아오는 초기값셋팅
• 훅을 실행하면, useEffect도 state가 변할 때 실행하여 로컬스토리지에 저장하게 한다
• 이 훅은 결과적으로 [state, setState] 를 반환하게 된다.

• 우리가 사용할 state와 useState 대신 커스텀 훅을 쓰고, 인수로 state 이름을 보내준다
• typing의 경우 타입이 boolean 이었기 때문에, 두 번째 인수로 보내주고 다른 것들은 기본값이 "" 일 수 있게 한다

application 확인

• 아무것도 안 썼을 때

• 작성 중일 때

• click 했을 때

16 hook flow 이해하기

hook flow

• 훅의 호출 타이밍
• useState에 setState 시 prev(이전 동작)을 주입할 수 있음

 const rootElement = document.getElementById("root");

      const App = () => {
        console.log("App render start");
        const [show, setShow] = React.useState(() => {
          console.log("App useState");
          return false;
        });

        React.useEffect(() => {
          console.log("의존성 배열 없음");
        });

        React.useEffect(() => {
          console.log("의존성 빈배열");
        }, []);

        React.useEffect(() => {
          console.log("의존성 배열에 show");
        }, [show]);

        const handelClick = () => {
          setShow((prev) => !prev);
        };

      console.log("App render end"); // 여기!!

        return (
          <>
            <button onClick={handelClick}>search</button>
            {show ? (
              <>
                <input />
                <p></p>
              </>
            ) : null}
          </>
        );
      };

      console.log("App render end"); // 여기 아님!! 틀렸음
      ReactDOM.render(<App />, rootElement);

• 최초 렌더링 _ - ⚠️ 가장 바깥의 end ?? ====> 나는 왜 end가 먼저 render 되는거지???_

  => 콘솔 위치를 ㅋㅋㅋ DOM이 그려지기 전에 했으니까! retrun 이전에 console.log를 해주자

• 상단부터 순서대로 render -> useState -> end -> 이후에 useEffect

• search 버튼 클릭했을 때 1) 렌더 2) 항상 실행되는 의존성 배열없는 useEffect / show가 변했을 때 실행되는 useEffect

17 hookflow 이해하기

• Child 를 만들고, 기존 input/p 위치에 Child 컴포넌트를 넣어준다.
• 최초 렌더링 시 console 순서는 처음과 같다.

• show가 true 되었을 때는 app render/end -> Child render / end -> useEffect 확인

• Child 안에서도 useState를 만들어서 사용해보자.
• input의 value가 바뀔 때마다 state도 바뀔 것

• show = true

• Child가 나타나면서, App -> Child render/useState/end -> App에 있는 useEffect 실행

• text가 바뀔 때는 Child 내부의 render가 반복된다. App은 바뀌지 않음.

• Child 안의 useEffect도 확인해보자

• 부모 (App) -> 자식 (Child) -> 자식의 useEffect -> 부모의 useEffect (최초 렌더링이 아니어서 빈배열은 작동하지 않음)

clean up

• App, Child 에 있는 useEffect 들에 모두 return 을 해주어 clean up을 해보자
• return을 하면서 다른 함수를 호출하면, 다시 동작할 때 이전의 사이드 이펙트를 지우고 다시 생성하는 것?

• App에 있던 useEffect 들이 cleanup하는 것이 Child보다 먼저 실행되었따.

• input 작성하면
• render -> cleanup -> useEffect

• show = false
• Child 컴포넌트가 아예 제거 되는 상황인데, cleanup 함수가 모두 실행되었다.
• [] useEffect도 clean up 은 실행되었다는 점