• 같은 레벨에 있는 노드들을 먼저 거쳐가야 한다.

• 자식노드를 보기전에 형제노드를 먼저 체크한다. (수평레벨 체크)

배열이나 리스트로 queue를 만들고 Push 생성 unshift 제거 큐를 만들어서 요소를 추적하고, 그 방문한 데이터의 리스트를 만들어 마지막에 출력

BFS 의사코드

1. 큐에 루트노드를 위치시킨다.
2. 큐에 무언가가 있으면 루프를 계속 돌린다.
   • 큐에서 dequeue( 배열 shift ) , 데이터의 리스트에 큐에서 꺼내온 값을 넣어줌.
   • 노드 왼쪽에 값이 있다면 큐에 넣어주기
   • 노드 오른쪽 값이 있다면 큐에 넣어준다.
3. 큐에 아무것도 없어 종료가 되면 방문한 데이터 리스트를 출력한다.

BFS 소스코드 (이진트리)

function bfs(bst){
    let queue=[bst.root]
    let visited=[]
    //자바스크립트는 빈배열 값을 true로 판단
    while(queue.length!==0){
        const node = queue.shift();
        visited.push(node.value);

        if(node.left) queue.push(node.left);
        if(node.right) queue.push(node.right);
    }
    return visited;
}

위의 코드는 자식의 왼쪽 오른쪽 최대 2개의 노드를 가지는 이진트리일 때 이다. 만약 자식이 2개 이상일 경우 해당 부분은 변경해야한다.

Depth-first Search ( 깊이우선 탐색 ) / 전위 중위 후위

DFS 소스코드

    class BinarySearchTree{
        constructor(){
            this.root = null;
        }
        insert(value){
            let newNode = new Node(value);

            if(!this.root){ 
                this.root = newNode;
                return this 
            }

            let curNode = this.root;
            let count=0;
            while(curNode){
                if(value === curNode.value) return undefiend;
                if(value < curNode.value) {
                    if(curNode.left === null) {
                        curNode.left = newNode;
                        return this;
                    }
                    curNode = curNode.left
                }
                else {
                    if(curNode.right === null) {
                        curNode.right = newNode;
                        return this;
                    }
                    curNode = curNode.right
                }
            }
            return this;
        }

        find(value){
            if(!this.root) return false;

            let curNode = this.root;
            while(curNode){

                if(curNode.value===value) return true;

                if(value<curNode.value) curNode= curNode.left;
                else curNode = curNode.right;

            }
            return false   
        }

        dfs_pre(){
            let visited= [];
            let current = this.root;

            function traverse(node){
                visited.push(node.value);
                if(node.left) traverse(node.left);
                if(node.right) traverse(node.right);
            }
            traverse(current);
            return visited;
        }
        dfs_post(){
            let visited=[];
            let current = this.root;

            function traverse(node){

                if(node.left) traverse(node.left);
                if(node.right) traverse(node.right);
                visited.push(node.value);
            }
            traverse(current);
            return visited;

        }
    }

    class Node{
        constructor(value){
            this.value = value;
            this.left = null;
            this.right= null;
        }

    }

traverse 헬퍼함수에서 위치만 바꿔주면 전위, 중위, 후위가 된다.

• 전위순위 부모노드-왼쪽자식-오른쪽자식

  1. visited [] 나중에 출력시킬 데이터

     최상위 노드를 current 변수에 저장

  2. 헬퍼함수를 만든다.

     • 현재 노드에 저장된 값을 visited 배열에 push

     • 왼쪽 자식이있다면 왼쪽 자식을 넘겨 헬퍼 함수를 또 부른다.

     • 오른쪽 자식이 있다면 오른쪽 자식을 넘겨 헬퍼 함수를 부른다.

       function traverse(node){
         visited.push(node.value);
             if(node.left) traverse(node.left);
         if(node.right) traverse(node.right);
       }

• 후위 왼쪽자식- 오른쪽자식-부모노드

  전위와 동일하지만 할퍼함수에서 순서가 바뀐다.

  왼쪽 헬퍼함수 , 오른쪽 헬퍼함수 현재노드 값 visited 배열에 저장

    function traverse(node){
        if(node.left) traverse(node.left);
        if(node.right) traverse(node.right);
        visited.push(node.value);
    }

• 중위 왼쪽 - 부모- 오른쪽

BFS, DFS 어느것을 선택?

• BFS는 큐가 나중에 비어지게 되긴 하지만 데이터를 저장함으로 공간복잡도가 DFS에 비해서 크다.
• 시간복잡도에서는 차이가없다. 왜냐면 100개 노드가 있다면 모드 방문해야하는 것은 동일하기 때문이다.
• 깊이보다 너비가 넓은 트리의 경우 DFS가 BFS보다 더 적은 공간을 점유한다.
  • 트리가 넓다면 너비우선은 큐를 저장하는데에 더 많은 공간을 사용한다.
• 깊이가 아주 긴 트리라면 DFS가 더 많은 공간을 차지하게 된다.

-가 붙은 숫자를 시작으로 뒤에가 가장 값이 클때 괄호를 닫아줘야한다. +와 -연산만 존재함으로 가장 값이 클 때는 + 연산이 이어져서 나오는 부분이다. (다음 - 를 만나기 전까지! )

10+20-30+40-50 이라고 가정하면 10+20-(30+40)-50 이 가장 작은 값이다.

1. -를 기준으로 나누면 아래와 같다. [ '10+20' , '30+40' , '50' ]
2. 배열을 순회하면서 +연산이 필요한 부분은 모두 더해준다. [30, 70, 50]
3. • 기준으로 분리했으니, 첫번째 배열부터 시작하여 값을 빼준다. 정답 : -150

const fs = require("fs");

//1. - 기준으로 배열로 분리
let input = fs.readFileSync("/dev/stdin").toString().split("-");
//1번 input = [ '10+20' , '30+40' , '50' ]

//3번 answer = -130
// reduce에서 값을 -해서 누적하여 값 반환 
let answer = input.reduce((total, item, idx) => {

  //split : 각각 배열은 문자열로 되어있으며, + 연산자가 있는 것도 있다. 
  //map : + 기준으로 나눠 배열로 만들고 숫자로 만든다.
  //reduce : 값을 누적하여 합해준다 > 합한 값이 나오도록 한다. 
  //2번 sum= [30, 70, 50]
  let sum = item
    .split("+")
    .map((a) => +a)
    .reduce((total, cur) => total + cur);

  return idx === 0 ? total + sum : total - sum;

}, 0);

console.log(answer);

리턴할 때 처음에 total-sum 으로 해줬는데 그럴경우, -30-70-50이 되어버린다. 첫번째의 경우는 양수 값이기 때문에 30-70-50이 되어야하기 때문에, 첫번째 인자일 경우는 값을 더할 수 있도록 해야한다.

js는 입력받는 것이 타 언어에 비해 까다로운데, 이것을 정리해보려고 한다.

백준 4344번 문제로 입력받기 예시

// 예시 입력 데이터 
2
5 50 50 70 80 100
7 100 95 90 80 70 60 50

1. rest연산자 이용, 개행을 기준으로 배열 생성

let [n, ...input] = fs.readFileSync("index.txt").toString().split("\n");

개행을 기준으로 배열에 담아주는데 첫번째 인자는 개수를 나타내기 때문에 따로 담아주기 위해 배열에 rest 문법을 사용하여 나머지는 input에 담아주었다.

<결과> n = 2 input = [ '5 50 50 70 80 100', '7 100 95 90 80 70 60 50' ]

2. n번만큼 for문을 돌려 각각 처리를 한다.

공백을 기준으로 나누고 1번과 동일하게 0번째는 요소의 개수를 나타냄으로 num이라는 변수에 받고, 나머지를 data에 묶어준다. 

for (let i = 0; i < n; i++) {
  let [num, ...data] = input[i].split(" ").map((item) => +item);

  //필요한 작업처리 후 console.log()
}

map은 각 요소가 숫자로 바껴야하기 때문에 +를 사용하여 숫자로 변경했다.

<결과> [ 50, 50, 70, 80, 100 ] [ 100, 95, 90, 80, 70, 60, 50 ]

문제 소스코드

const fs = require("fs");

var [n, ...input] = fs.readFileSync("/dev/stdin").toString().split("\n");
for (let i = 0; i < n; i++) {
  let [num, ...data] = input[i].split(" ").map((item) => +item);
  const avg = data.reduce((total, cur) => total + cur, 0) / num;

  let highCnt = 0;
  data.forEach((item) => {
    if (item > avg) highCnt++;
  });
  console.log(((highCnt / num) * 100).toFixed(3) + "%");
}

프로그래머스처럼 데이터 가공하여 변경

데이터 가공

// 예시 입력 데이터 
2
5 50 50 70 80 100
7 100 95 90 80 70 60 50

예시 데이터가 위와 같다고 했을 때, solution 함수에 인자가 어떻게 주어지면 좋은지에 대해서 생각해봤다. (n , [[ , , ],[ , , , ]] ) 위와같이 첫번째 인자에는 총 데이터의 개수 두번째 인자의 경우는 배열의 길이가 n개인 배열로 이루어진 데이터로 설정했다.

// 인자로 받을 데이터 형식
( 2, [ [ 50, 50, 70, 80, 100 ], [ 100, 95, 90, 80, 70, 60, 50] ] )

문제 소스코드

 // 데이터 가공
const fs = require("fs");

let n;  // 데이터 개수 
let testCase = [];  // 데이터를 배열로 받음
let input; 

[n, ...input] = fs.readFileSync("index.txt").toString().split("\n");
for (let i = 0; i < n; i++) {
  let [_, ...data] = input[i].split(" ").map((item) => +item);
  testCase.push(data);
}

//---------------------------------
function solution(num, testCase) {
  for (let data of testCase) {
    const avg = data.reduce((total, cur) => total + cur, 0) / data.length;

    let highCnt = 0;
    data.forEach((item) => {
      if (item > avg) highCnt++;
    });
    console.log(((highCnt / data.length) * 100).toFixed(3) + "%");
  }
}

solution(n, testCase);

백준에서는 입력을 모두 처리해줘야하는데, 이를 프로그래머스에서는 인자로 넘겨주기 때문에 데이터를 바로 사용할 수 있다.

백준에서는 자바스크립트를 통해서 문제를 거의 풀지 않았기 때문에 한번 정리해봤고, 입력하는 방식에 대해서 확실히 이해했다!

1. 모든 컴포넌트가 props를 사용하지 않고 state를 직접 꺼내쓸 수 있다. ( prop drilling을 막아줌 )

2. 상태관리가 용이하다.

   • 직접 데이터를 수정하는 것이 아님 → 리듀서를 통해 조작 → 외부에서 데이터를 조작하지 못하게 하면서 의도하지 않게 state가 변경되는 것을 방지

   store : 전역으로 관리하는 state를 담는 공간 action: store에 있는 state를 변경하기 위해 보내는 신호 reducer: state와 이 state를 어떻게 처리할지를 알려주는 action을 파라미터로 받아 처리

사용방법

설치

yarn add redux react-redux @types/react-redux ``

테스트 코드

index.js에서 Provider를 감싼다.

1. rootReducer 정의
   • 여러개의 리듀서를 하나로 합쳐줌

// reducers/index.ts

import { combineReducers } from 'redux';
import user from './user';

// 여러 reducer를 사용하는 경우 reducer를 하나로 묶어주는 메소드입니다.
// store에 저장되는 리듀서는 오직 1개
const rootReducer = combineReducers({
  user,
});

export default rootReducer;

export type RootState = ReturnType<typeof rootReducer>;

리듀서를 사용할 때는 , 연관이 있는 이름으로 폴더를 만들어서 기능별로 파일을 생성하여 사용한다.

combineReducers 사용하여 한꺼번에 합쳐준다.

2. 세부 reducer 정의

    //액션 , 이름 겹치지 않도록 파일이름 / --
    const CHANGENAME = 'user/CHANGE/NAME' as const; // 이름에 + 추가
    const DELETENAME = 'user/DELETE/NAME' as const; // 이름 끝 한글자 제거

    //액션 생성함수
    export const changeName = (name: string) => ({ type: CHANGENAME, name });
    export const deleteName = () => ({ type: DELETENAME });

    type UserAction = ReturnType<typeof changeName> | ReturnType<typeof deleteName>;

    export interface TUserType {
      name: string;
    }

    //초기값 셋팅 
    const initialState: TUserType = {
      name: '혜진',
    };

    const user = (currentState = initialState, action: UserAction) => {
      switch (action.type) {
        case CHANGENAME:
          return {
            ...currentState,
            name: currentState.name + action.name,
          };
        case DELETENAME:
          return {
            ...currentState,
            name:
              currentState.name &&
              currentState.name.slice(0, currentState.name.length - 1),
          };
        default:
          return currentState;
      }
    };

    export default user;

3. app컴포넌트 하위에서 모두 store을 사용할 수 있도록 상위에서 감싸줌

createStore객체를 사용 → 리액트 앱에서 사용할 리덕스 스토어를 생성

//index.js

import {createStore} from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  <React.StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
  </React.StrictMode>,
);

4. state 값 사용, 변경

   //state 값 사용
   const name = useSelector((state: RootState) => state.user.name);

//state 변경
const dispatch = useDispatch();
dispatch(changeName('+')) // 보통 onClick과같은 이벤트 함수에 콜백함수로 넣어줌.

*중첩된 컴포넌트에서 간단한 테스트 *

• 전체 > Component1 > Conponent2 > Component3 중첩된 구조

• Component3에 있는 버튼을 누를 경우 전체를 감싸고 있는 곳에 포함된 UserNam이 변경되어야 한다.

import { useDispatch, useSelector } from 'react-redux';
import { Button } from '../components/common/button';
import { RootState } from '../reducers';
import { changeName, deleteName } from '../reducers/user';

const ReduxTest = () => {
  const name = useSelector((state: RootState) => state.user.name);
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <h2>{`UserName : ${name}`}</h2>
      <Component1 />
    </div>
  );
};

export default ReduxTest;

const Component1 = () => {
  return (
    <div
      style={{
        backgroundColor: 'red',
        width: '500px',
        height: '500px',
        padding: '20px',
      }}
    >
      <h3>component 1</h3>
      <Component2></Component2>
    </div>
  );
};
const Component2 = () => {
  return (
    <div
      style={{
        backgroundColor: 'yellow',
        width: '90%',
        height: '80%',
        padding: '20px',
      }}
    >
      <h3>component 2</h3>
      <Component3></Component3>
    </div>
  );
};

const Component3 = () => {
  const dispatch = useDispatch();
  return (
    <div
      style={{
        backgroundColor: 'green',
        width: '90%',
        height: '80%',
        padding: '20px',
      }}
    >
      <h3>component 3</h3>
      <Button
        width="80px"
        height="30px"
        type="submit"
        css={{ alignSelf: 'center' }}
        onClick={() => dispatch(changeName('+'))}
      >
        추가
      </Button>
      <Button
        width="80px"
        height="30px"
        type="submit"
        css={{ alignSelf: 'center' }}
        onClick={() => dispatch(deleteName())}
      >
        삭제
      </Button>
    </div>
  );
};

• 기본 default 값은 혜진으로 설정
• 추가 누를 때마다 상위 컴포넌트의 name 영역에 +가 한개씩 추가
• 삭제를 누를 때마다 상위 컴포넌트의 name 영역에 +가 한개씩 삭제
  
  

상태관리 라이브러리들이 중 recoil을 사용해봤다.

redux를 사용하는 경우가 많아서 과제라던지, 추후에 프로젝트를 진행할 때 도움이 될 것 같아서 테스트용으로 사용해봤다.

스테이트를 변경하거나 추가할 때, actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 하는 단점을 리코일을 사용하고 나서 리덕스를 사용해보니 더욱 와닿았던 것 같다.

확실히 recoil보다 러닝커브가 높은편인 것 같다. flux패턴을 이해해야했고, 지금은 정말정말 작은 상태 하나인데도 작성해야하는 코드들이 많았다.

개념을 보았을 때 이해하기 어려웠던 부분이 있었는데, 직접 코드를 작성해보니 이해하기가 좀 더 수월했던것 같다!

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

• 위 오류를 만나게 되었는데, 자바스크립트에서 일반적으로 객체에 프로퍼티로 string을 넘기는 것이 문제가 되지 않는데 타입스크립트에서는 이 부분이 문제가 된다.

interface ButtonProps {
  width?: string;
  height?: string;
  varient?: 'default' | 'danger' | 'normal';
}
const colors = {
  default: 'rgb(36, 41, 47)',
  danger: 'rgb(207, 34, 46)',
  normal: 'rgb(9, 105, 218)',
};

export const NoneStyleButton = styled.button<ButtonProps>`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  color: ${(props) =>
    props.varient ? colors[props?.varient] : colors['default']};

`;

props.varient ? colors[props?.varient] : colors['default']}; 해당 부분에서 오류가 났다. 이유는 varient가 string인데 string으로는 colors 객체에 접근을 할 수 없기 때문에다.

해결방법

1번째 방법 : string literal 타입의 key로 접근한다. 2번째 방법 : 객체의 타입을 선언할 때 index signature을 사용하면 string으로 접근할 수 있다.

index signature

type Varient = 'default' | 'danger' | 'normal';
interface ButtonProps {
  width?: string;
  height?: string;
  varient?: Varient;
}
type colorType = {
  [key in Varient]: string; // index signature
};
const colors: colorType = {
  default: 'rgb(36, 41, 47)',
  danger: 'rgb(207, 34, 46)',
  normal: 'rgb(9, 105, 218)',
};

colors에 오는 프로퍼티에 좁은 범위로 제한을 주기 위해 Varient에 mapped type을 사용하였고, colors객체에 타입을 index signiture로 변경하였다.

부모와 자식간의 관계로 구성되어 있다. 리스트는 선형구조 ( 한줄로 있는 구조 ) 트리는 비선형 구조 ( 한 갈래에서 여러가지 가지로 뻗어나갈 수 있다 )

트리는 부모-자식 관계에 따라서 자식 노드만 가리킬 수 있다. 자식이 부모를 가리키거나 형제를 가리킬 수 없다 >> 이것은 그래프다.

용어

• 루트 - 트리의 최상위 노드 (꼭대기)
• 자식 - 루트로부터 하위로 연결된 노드
• 부모 - 현재 노드에 상위로 연결된 노드
• 형제 - 같은 부모를 가지는 노드
• 리프 - 자식이 없는 노드 (끝)
• 간선(edge) - 한 노드에서 다른 노드로 연결하는 선

트리의 사용 예시

• HTML DOM - HTML 요소인 문자들 사이의 관계는 부모 자식 관계
• JSON
• 프로로그래밍 구문 구조
• 네트워크 라우팅
• 인공지능
• 운영체제에서의 폴더구조 ( 폴더 안의 파일 )

이진트리

일반적인 트리는 자식이 몇개 있던 상관없지만 이진트리의 경우는 각 노드가 최대 두개의 자식을 가져야한다.

이진탐색트리 (BST)

• 이진 트리의 종류로, 최대 2개의 자식
• 데이터 순서에 따라 정렬되어 있다.
  • 특정 노드의 왼쪽은 그 노드보다 작은 값, 오른쪽 노드는 큰 값

왜 사용할까 ?

• 작은 것들은 왼쪽, 큰 것들은 오른쪽에 놓는 방식이 어떠한 값을 찾는데에 빠르게 동작한다.

• 정렬되지 않은 트리와 비교했을 때는 어떠한 값을 찾는다면 이진탐색트리가 더 유리하다.

• 일반트리에서는 모든 값들을 순회해야하지마 BST에서는 비교할 때마다 탐색해아하는 횟수나 노드의 숫자가 줄어든다 .

BST 구현

기본구조

class BinarySearchTree{
        constructor(){
            this.root = null;
        }
    }

    class Node{
        constructor(value){
            this.value = value;
            this.left = null;
            this.right= null;
        }
    }

    let tree= new BinarySearchTree();
    tree.root = new Node(10);
    tree.root.right = new Node(15);
    tree.root.left = new Node(7);

    tree.root.left.right = new Node(9);

insert 메서드

의사코드

• 넣어줄 생성할 노드를 만든다.
• 루트에서 시작한다
  • 루트가 없을 경우, 현재값이 루트가 된다.
  • 루트가 있을 경우, 값이 큰지 작은지 비교한다.
    • 값이 클 경우
      • 오른쪽에 자식노드가 있는지 체크한다.
        • 자식노드가 있다면 그곳과 비교를 반복한다.
        • 자식 노드가 없다면 오른쪽에 추가한다.
    • 값이 작은 경우
      • 왼쪽에 자식노드가 있는지 체크한다.
        • 자식 노드가 있다면 그곳과 비교를 반복
        • 자식 노드가 없다면 왼쪽에 추가.

코드

insert(value){
        let newNode = new Node(value);

        if(!this.root){ 
            this.root = newNode;
            return this 
        }

        let curNode = this.root;
        let count=0;
        while(curNode){
            if(value === curNode.value) return undefiend;
            if(value < curNode.value) {
                if(curNode.left === null) {
                    curNode.left = newNode;
                    return this;
                }
                curNode = curNode.left
            }
            else {
                if(curNode.right === null) {
                    curNode.right = newNode;
                    return this;
                }
                curNode = curNode.right
            }
        }
        return this;
    }

contains메서드

insert와 값을 비교하는 것은 똑같지만, 만약 현재 노드가 null일 경우는 값을 찾지 못했음을 의미하므로 중단한다.

코드

find(value){
        if(!this.root) return false;

        let curNode = this.root;
        while(curNode){

            if(curNode.value===value) return true;

            if(value<curNode.value) curNode= curNode.left;
            else curNode = curNode.right;

        }
        return false
    }

현재 노드 기준으로 검사하였다.

BST 시간복잡도

트리가 위의 그림에 비해서는 노드의 개수가 2배가 추가되었지만 이진탐색트리는 데이터가 이미 정렬이 되어있기 때문에 한단계만 더 확인하면 된다.

삽입 - O(log N)
탐색 - O(log N)

한쪽으로 치우친 트리의 경우 시간복잡도가 달라질 수 있다.

이럴 경우는 삽입이나 탐색을 할 때 노드의 숫자만큼 단계가 추가되기 때문에 시간복잡도가 O(lon N)에 해당하지 않는다.

만약에 이것을 꼭 트리로 사용해야 한다면, 다른 숫자를 루트로 놓고 이진탐색트리를 다시 작성하는 것이 좋다.

이 전에 컴포넌트 분리가 잘 안되었던 것 같아서 이번에는 재사용 가능한 컴포넌트들을 최대한 분리해보려고 한다.

그래서 이번에 원티드 프리온보딩에서 라벨, 인풋, 에러메시지를 하나로 묶어서 하나의 컴포넌트로 만들고 여기서 input 유효성 검사를 편리하게 하기 위해서 react-hook-form을 사용하였다.

문제

근데 디버깅에서 오류가 나진 않았지만 런타임에서 에러를 만나게 되었다. React.forwardRef에 대한 가이드가 있었다.

const LoginForm = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
    reset,
  } = useForm<FormValue>();

  const onSubmit: SubmitHandler<FormValue> = async (data) => {
    //await api 호출
    console.log(data);
    reset();
  };

  const emailRegister = register('id', {
    required: { value: true, message: '이메일을 입력해주세요.' },
    pattern: { value: Regex.email, message: '이메일 형식을 입력해주세요.' },
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} css={formStyle}>
      <AuthInput
        type="email"
        placeholder="이메일을 입력해주세요"
        errorMessage={errors?.id?.message}
        {...emailRegister}
      />
      <Button
        width="80px"
        height="30px"
        type="submit"
        css={{ alignSelf: 'center' }}
      >
        로그인
      </Button>
    </form>
  );
};

이 전에는 AuthInput이라는 것이 따로 컴포넌트로 분리되어있던 게 아니라, 해당 로그인 폼 안에서 input 에대한 것들이 모두 들어있었다. 그래서 이 전에는 ref를 내부 컴포넌트로 넘기지 않음으로 이러한 에러를 만나지 않았다.

찾아보니, ref prop은 HTML 엘리먼트 접근할 때 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용을 할 수 없다. 근데 react-hook-form에서 제공하는 register에는 ref가 포함이 되어있어서 이때 발생되는 문제였다.

React.forwardRef API를 사용하여 내부 컴포넌트에 refs를 명시적으로 전달할 수 있다.

 React.forwardRef((props, ref) => {
    return <input {...props} forwardedRef={ref} />;
  }

React.forwardRef는 props와 ref 파라미터를 받아 React 노드를 반환하는 렌더링 함수를 받습니다.

//input.tsx

interface inputProps {
  type: string;
  name: string;
  placeholder: string;
  errorMessage?: string;
}

export const AuthInput = React.forwardRef<HTMLInputElement, inputProps>(
  ({ type, name, placeholder, errorMessage, ...etc }, ref) => {
    return (
      <div css={inputWrapStyle}>
        <label htmlFor={name} css={labelStyle}>
          {name.toUpperCase()}
        </label>
        <input
          css={inputStyle}
          id={name}
          type={type}
          name={name}
          placeholder={placeholder}
          ref={ref}
          {...etc}
        />
        {errorMessage && <ErrorMessage content={errorMessage}></ErrorMessage>}
      </div>
    );
  },
);
const ErrorMessage = ({ content }: { content: string | undefined }) => {
  return <p css={messageStyle}>{content}</p>;
};

export const AuthInput = React.forwardRef<HTMLInputElement, inputProps>(
  ({ type, name, placeholder, errorMessage, ...etc }, ref) => {
    return (
       <div>
        <input
          css={inputStyle}
          id={name}
          type={type}
          name={name}
          placeholder={placeholder}
          ref={ref}
          {...etc}
        />
      </div>
    );
  },
);

{type,name,placeholder,errorMessage,...etc} 와 ref 가 React.forwardRef 콜백함수에 인자로 들어가있다.

정리

리액트에서는 DOM을 선택해 직접 접근하기 위해 ref를 사용하게 된다. 재사용하기 위해서 커스텀하게 input 컴포넌트를 만들었고 ref를 props로 넘겨줄 때 문제가 생겼던 부분이었다. React.forwardRef api를 활용해서 내부 컴포넌트에 ref를 명시할 수 있게 해주었다.

• Last In First Out ( 후입선출 )
• 가장 마지막에 있는 요소가 먼저 제거
• 자바스크립트에서 재귀를 다룰 때 콜스택도 마찬가지로 이 스택의 원리이다.
• 다른 언어는 내장된 경우가 있는데, 자바스크립트에서는 내장되어있지 않아서 배열을 사용하던가, 연결리스트 통하여 구현해야한다.

사용되는 예시

• 함수호출을 다루는 콜스택
• 포토샵 실행취소, 다시실행 ( undo / redo)
• 브라우저 방문기록

접근 - 배열

• 배열의 끝 지점의 삽입과 삭제를 다루는 push, pop 함수를 이용한다.

• 배열의 첫 지점에서 삽입과 삭제를 다루는 unshift, shift 함수를 이용할 수도 있다.

후입선출의 규칙만 지킨다면 어느방향으로 하던 상관은 없지만 unshift, shift 는 배열에서는 첫번째 인자를 삽입 삭제할 경우 모든 요소들이 다 움직여야하기 때문에 시간복잡도가 O(N)이라 비효율적이다.

push, pop의 경우는 O(1) 상수시간이기 때문에 이것을 사용하는게 더 낫다.

접근 - 연결 리스트 (클래스)

인덱스에 접근하는 것이 아니라 그냥 삽입했을 때 순서에 기반해서 정보를 다루기만 하면 되기 때문에 배열에 사용되는 많은 메소드들이 필요가 없다.

단일 연결리스트에서는 한쪽 방향으로만 연결되는 특성 때문에 맨 마지막에 요소를 삽입하거나 삭제할 때 앞에서부터 검색해야 함으로 push, pop보단 unshift,shift 로 처음요소를 삽입하고 제거하는것이 낫다.

후입선출의 규칙은 동일하다!

class Stack {
    constructor(){
        this.first = null;
        this.last = null;
        this.size=0;
    }

    push(val){
        //앞에 삽입 
        const addData = new Node(val);
        if(this.size ===0){
            this.first = addData;
            this.last = addData;
        }
        else{
            addData.next = this.first;
            this.first = addData;
        }
        return ++this.size;

    }
    pop(){
        //앞을 제거 

        if(this.size ===0 ) return null;

        let deleteData = this.first;
        if(this.first===this.last){
            this.last = null;
        }
        this.first = this.first.next;

        this.size--;
        return deleteData;

    }
}

class Node {
    constructor(val){
        this.val = val;
        this.next = null;
    }
}

큐 FIFO

• 먼저들어온 것이 먼저 나간다
• 삽입 enqueue, 삭제 dequeue

예시

• 줄 서는 경우
• 게임에서 접속하려고 대기 > 가장 오래 기다린 사람을 추적하는 큐 데이터 구조
• 컴퓨터 백그라운드
• 프린트

접근 - 배열

• 삽입 push 함수 / 삭제 shift함수
• 삽입 unshift / 삭제 pop 함수 ( 거꾸로 구현 )
• 삽입 O(1), 삭제 O(N)

접근 - 리스트

• 맨 뒤에 추가하고 맨 앞에 삭제
• 맨 앞에 추가하고 맨 뒤에 삭제 ( 거꾸로 )

class Queue {
    constructor(){
        this.first = null;
        this.last = null;
        this.size=0;
    }

    enqueue(val){
        const newNode = new Node(val);
        if(this.size ===0){
            this.first = newNode;
            this.last = newNode;
        }
        else{
            this.last.next = newNode;
            this.last = newNode;
        }
        return ++this.size;

    }
    dequeue(){

        if(this.size ===0 ) return null;

        let deleteData = this.first;
        if(this.first===this.last){
            this.last = null;
        }
        this.first = this.first.next;

        this.size--;
        return deleteData;

    }
}

class Node {
    constructor(val){
        this.val = val;
        this.next = null;
    }
}

스택 & 큐 빅오

스택과 큐에서는 탐색, 인덱스 위치를 사용해서 접근하는 것이 필요 없다. 삽입과 제거 후입선출, 선입선출을 잘 지키는 것이 중요하다.

스택

연결리스트 - 삽입 O(1) / 삭제 O(1) 배열 - 삽입 O(1) / 삭제 O(1) 복잡도는 상수시간이지만 스택에서는 삽입 삭제만 필요함으로 배열처럼 많은 메서드가 필요없다. 연결리스트의 경우는 코드를 많이 구현해야하기 때문에, 좋은 방법이지만 빠르게 작성을 해야할 경우 배열을 사용하는 것이 낫다.

큐

연결리스트 - 삽입 O(1) / 삭제 O(1) 배열 - 삽입 O(1) / 삭제 O(N) 혹은 반대

• 양방향으로 이어져있다.

• 단일 연결리스트보다 보완된 점은 ?
  만약 맨 마지막 요소를 제거한다고 하면 처음부터 tail을 만나기 전까지 검색을 한 후에 삭제할 수 있고, 거꾸로 reverse 해야 할 때도 앞에서부터 순차적으로 하나하나 방향을 바꿔줘야해서 번거롭다. 이를 이중 연결리스트를 사용하면 보완할 수 있다.

  
  

• 단점은? 단일 연결리스트보다 유연성은 있지만, 메모리를 더 많이 사용하는 단점이 있다. 단일연결리스트 처럼 다음 것만 저장하는 것이 아니라 이전 것도 저장해야 되기 때문에 메모리를 더 많이 사용한다.

코드

기본구조

```jsx
class Node {
    constructor(val){
        this.val = val;
        this.prev = null;
        this.next = null;
    }
}

class DoubleLinkedList{
    constructor(){
        this.length=0;
        this.head = null;
        this.tail = null;

    }
}
```

메서드

• push

  • 추가할 노드를 만든다.

  • 헤드가 널인지, 길이가 0인지 확인 ( 리스트가 비어있는지 체크 )

  • 리스트에 존재할경우

    • 테일을 찾아서 테일의 next 프로퍼티를 추가할 노드랑 설정한다.
    • 추가할 노드의 prev 프로퍼티를 테일로 설정
    • 테일 프로퍼티를 추가할 노드를 가리키도록 설정

    push(val){
          const newNode = new Node(val);
    
          //이중연결리스트가 비어있을 때 
          if(this.length===0){
              this.head = newNode;
              this.tail = newNode;
          }
          else{
              newNode.prev = this.tail;
              this.tail.next = newNode;
              this.tail = newNode;
          }
    
          this.length++;
    
          return this;
      }

• pop

  단일연결리스트와는 다르게 테일(끝) 앞에 있는 요소를 찾아서 next 프로퍼티를 null로 설정해줘야 연결이 끊긴다.

  • 리스트가 비어있을 때 pop 하려고 하면 undefined 반환 (내보낼 값이 없으니까)

  • 리스트가 비어있지 않을 경우

    • 현재 테일을 나중에 출력할 수 있도록 변수에 저장
    • 리스트가 1개라면, head와 tail을 null로 설정
    • 리스트가 2개 이상일 경우
      • 현재 테일을 테일 앞에있는 노드를 가리키도록 설정 (prev)
      • 새로운 테일이 가리키는 노드 next를 null로 설정
      • delete노드의 이전 노드를 null로 설정

    pop(){
          if(this.length===0) return undefined;
    
    

        let deleteNode = this.tail;

        if(this.length ===1){
            this.tail = null;
            this.head = null;
        }else{
            this.tail = deleteNode.prev
            this.tail.next =null;
            deleteNode.prev = null;

        }

        this.length--;
        return deleteNode;

    }
```

• shift(첫번째 제거)

  • 길이가 0인지 헤드가 없는지 둘중에 하나만 체크 / 해당한다며 undefined 반환

  • 길이가 1일경우

    • 테일과 헤드를 null로 설정해야한다.

  • 길이가 1초과일 경우

    • 제거할 노드를 저장해준다.
    • 헤드가 삭제할 헤드의 next를 가리킴
    • 연결을 끊어줌
      • 새로운 헤드의 prev는 null로 설정
      • 삭제할 노드의 next는 null로 설정

    shift(){ //맨 처음 제거
          if(this.length===0) return undefined;
          //if(!this.head) return undefined;
    
          const deleteNode = this.head;
          if(this.length ===1){
              this.tail = null;
              this.head = null;
          }
          else{
              this.head = deleteNode.next;
              this.head.prev = null;
              deleteNode.next=null;   
          }
    
          this.length--;
          return deleteNode;
      }

• unshift (첫번째 추가)

  • 새로운 노드를 만들 값을 인자로 받는다.

  • 리스트가 비어있는경우

    • head와 tail은 추가될 노드를 가리킨다.

  • 리스트가 비어있지 않은 경우

    • 헤드의 prev 프로퍼티가 새로운 노드를 가리킴
    • 추가할 노드의 next는 헤드를 가리킴
    • head는 추가할 노드를 가리킴

    unshift(val){ //맨 처음 추가
          const newNode = new Node(val);
          if(this.length===0){
              this.head = newNode;
              this.tail = newNode;
          }
          else{
              newNode.next = this.head;
              this.head.prev = newNode;
              this.head = newNode;
          }
          this.length++;
    
          return this;
      }

• get (position)

  • index가 음수이거나, length보다 크거나 같을 경우 null 반환

  • 찾을 인덱스의 위치에 따라서 앞에서 갈건지, 뒤에서 갈건지 선택

    • 전체 리스트의 길이의 반보다 position이 작거나 같다면
      • 카운트를 증가하며 앞에서 부터 순회, next (position 만큼)
    • 전체 리스트의 길이의 반보다 position이 크다면
      • 뒤에서부터 순회, prev ( length - cnt -1이 position보다 클 때까지만 )

    get(idx){
          if(idx <0 || idx>=this.length) return null;
    
          let curNode;
          let cnt=0;
          if(idx<=this.length/2){
              curNode = this.head ;
              while(cnt<idx){
                  curNode = curNode.next;
                  cnt++;
              }
          }
          else{
              curNode = this.tail;
    
              while(idx<this.length-cnt-1){
                  curNode = curNode.prev;
                  cnt++;
              }
          }
          return curNode;
      }

• set

  • get 을 이미 구현했기 때문에, get 을 활용해서 값을 바꿔줄 수 있다.

    set(idx,val){
          let foundNode = this.get(idx);
          if(foundNode) {
              foundNode.val = val
              return true          
          }
          return false;
      }

• insert

  • 인덱스가 유효한지 체크, 음수이거나 배열길이보다 큰경우

  • 인덱스가 0 이면 unshift 사용

  • index가 length이면 push사용

  • 위의 조건이 모두 아니라면 get 메서드 사용해서 해당위치에 접근

  • 넣을 위치의 앞에 있는 위치의 노드를 찾아냄 get(idx-1)

    insert(idx,val){ // 특정 위치에 넣기
    
          if(idx<0 || idx>this.length) return false;
          if(idx===0) return this.unshift(val);
          if(idx === this.length) return this.push(val);
    
          let newNode = new Node(val);
          let prevNode = this.get(idx-1);
          let nextNode = prevNode.next;
    
          if(prevNode){
    
              prevNode.next = newNode, newNode.prev = prevNode;
              newNode.next = nextNode, nextNode.prev = newNode;
              this.length++;
    
              return true;
          }
          return false;
      }

• remove

  • 인덱스가 유효한지 확인, 음수이거나 배열길이와 크거나 같은 경우

  • index가 0이면 shift() 사용

  • index가 length-1이면 pop()사용

  • 위의 조건이 아니라면, get()메서드를 사용해서 제거한다.

    • 제거할 노드를 변수에 담아준다.
    • 제거할 노드의 prev의 next가 제거할 노드의 next를 가리키게한다.
    • 제거할 노드의 next의 prev가 제거할 노드의 prev를 가리키게한다.
    • 제거할 노드의 next와 prev는 null로 한다.
    • 길이를 감소하고 제거된 노드를 반환한다.

    remove(idx){
          if(idx<0 || idx>=this.length) return undefined;
    
          if(idx===0) return this.shift(idx);
          if(idx===this.length-1) return this.pop();
    
          let deleteNode = this.get(idx);
    
          let prevNode = deleteNode.prev;
          let nextNode = deleteNode.next;
          prevNode.next = nextNode;
          nextNode.prev = beforeNode;
    
          // deleteNode.prev.next = deleteNode.next;
          // deleteNode.next.prev = deleteNode.prev;
    
          deleteNode.prev=null;
          deleteNode.next=null;
    
          this.length--;
    
          return deleteNode;
      }

이중연결리스트 빅오

• 단일연결리스트에서 맨 뒤에 제거하는 경우 처음부터 모두 순회해야함으로 O(N)
• 탐색은 O(N/2)로 만들수 있는 이유는 인덱스의 위치에 따라서 앞에서 순회할지 뒤에서 순회할지 분할해서 접근할 수 있기 때문이다. 최적화는 되었지만 빅오표기법에서는 간단하게 적음으로 O(N)으로 간주한다.

이중연결리스트 vs 단일연결리스트

• 이중연결리스트는 이전 노드를 가리키는 부분 빼고는 단일리스트와 똑같다.
• 이중연결 리스트는 데이터를 반대로 다뤄야 하는 경우 쉽다.
  • 예를들어, 브라우저에서 검색기록을 봐야하는 경우라면 실제로 이중연결리스트를 많이 사용한다.
• 탐색에서 시간을 절반이 걸리기 때문에 성능이 더 좋다.
• 하지만, 이중연결리스트가 추가로 만든 포인터 때문에 메모리를 더 소모하는 약점도 있다.

즉, 이중연결리스트는 일정한 상황에서는 훨씬 좋을 수 있는데, 메모리가 더 많이 사용되어지는 단점도 있다.

• 연결리스트는 아래와 같은 속성을 가지고 있음
  • head : 연결리스트의 시작노드를 가리킴
  • tail : 연결리스트의 마지막 노드를 가리킴
  • length : 총 길이
• 각각 노드들은 값을 가지고 있고, 다른 노드를 가리키거나 가리키지 않는 노드들의 구성으로 이루어져 있다. ( 다음 노드가 없을 경우 아무것도 없음을 의미하는 null)
• 데이터에 접근하기 위해 사용할 인덱스는 없기 때문에 5번째 요소에 접근할때 다이렉트로 불가능하고, 1번째→2번째→3번째 앞에서부터 순차적으로 접근하게된다.

list와 array차이

List

• 인덱스가 없음
• 노드와 다음을 가리키는 포인터로 연결된다.
• 무작위 접근이 불가 (index가 없기 때문)
• 삽입과 삭제가 쉽다.

Array

• 인덱스가 있음
• 삽입, 삭제는 소모되는 비용이 크다
• 특정 인덱스에서 빠르게 접근할 수 있다.

기본 구조

class Node {
    constructor(val){
        this.val = val;
        this.next = null;
    }
}

class SinglyLinkedList{
    constructor(){
        this.head = null;
        this.tail = null;
        this.length=0;
    }
}

큰 틀은 위와 같다.

• push 메소드

    push(val){
            const node = new Node(val);
            if(this.length ===0 ){ // if(!this.head)
                this.head = node;
                this.tail = node;
            }
            else{
                this.tail.next = node;
                this.tail = node;
  
            }
            this.length++;
  
  

    }
```

1.  val의 값을 가지는 노드를 생성한다.
2. 만약 this.length===0 이거나 헤드가 없을 경우는 빈 리스트임으로 시작과 끝이 새로 만들어진 노드를 가리킨다.
3. 만약 비어있는 리스트가 아닐 경우, 리스트의 마지막에 새로운 노드를 추가하고 next 연결,  테일을 맨 끝을 가리키도록 한다. 
4. 길이를 1개 증가시킨다.

• pop 메소드

   pop(){
           if(!this.head) return undefined;
           let current = this.head;
           let newTail = current;
  
           while(current.next){
               newTail = current;
               current= current.next;
           }
           this.tail = newTail;
           this.tail.next = null;
           this.length--;
  
           if(this.length === 0){
               this.head = null;
               this.tail = null;
           }
           return current.val;
       }

  역방향 포인터를 가지고 있지 않기 때문에 처음부터 리스트를 따라가야한다.

  1. 빈 리스트일 경우, return
  2. 끝지점에 도달할 때 까지 계속 따라가는 동시에 이전 노드가 어떤것인지를 저장해야한다.
  3. 마지막에서 두번째 노드의 next 를 null로 지정하고, tail이 마지막에서 두번째 노드를 가리키도록 한다.
  4. 길이를 하나 감소시키고, 방금 제거한 노드를 반환

• shift 메소드 (맨 앞 노드 제거)

  현재 헤드가 가리키고 있는 노드를 제거한 후 헤드가 가리키고 있던 리스트의 다음 노드를 가리키도록 한다.

    shift(){
            if(!this.head) return undefined;
            let currentHead = this.head;
  
            this.head = currentHead.next;
            this.length--;
            if(this.length===0) this.tail = null;
  
            return currentHead.val;
  
        }

  
  

• unshift 메소드 ( 맨 앞에 노드를 추가 )

    unshift(val){
            const newNode = new Node(val);
  
            newNode.next = this.head;
            this.head = newNode;
            this.length++;
            if(this.length===1) this.tail = newNode;
        }

  
  

• get 메소드 ( index 위치의 노드 반환)

    get(idx){
            if(idx<0 || idx>=this.length) return null;
            let cnt = 0;
            let current = this.head;
  
            while(cnt!==idx){
                current = current.next;
                cnt ++;
            }
            return current;
        }

  • 찾을 위치가 음수이거나 현재 리스트의 길이보다 클 경우 null 반환 처리

  • 카운트변수 만들어서 계속 다음노드로 이동

  • 카운트 변수가 idx와 같아지면 루프는 종료되고 해당 노드를 반환

    
    

• set 메소드( index 위치의 노드 값 변경)

    set(idx,val){
            let foundNode = this.get(idx);
            if(foundNode){
                foundNode.val = val;    
                return true;
            }
            return false;
        }

  • 이미 구현된 get 메서드를 통해서 index위치의 노드를 가져온다.
  • 그 노드의 값을 변경한다.
  • set 유무에 따른 true, false 반환

 <br>

• insert 메소드 ( index 위치에 추가 )

  • 내풀이

    push나 unshift 와 같은 것들을 활용하면 되었는데 생각을 못했다,,

      insert(idx,val){
              const newNode = new Node(val);
              let foundNode = this.get(idx-1);
    
              if(foundNode){
                  newNode.next = foundNode.next;
                  foundNode.next = newNode;
    
                  if(idx===this.length) this.tail = newNode;
    
                  this.length++;
                  return true;
              }
              else{ // 
                  newNode.next = this.head;
                  this.head = newNode;
                  this.length++;
                  return true;
              }
    
              return false;
    
          }

```jsx
insert(idx,val){
        if(idx<0 || idx>this.legnth) return false;
        if(idx === this.length ) return this.push(val); //맨마지막에 추가
        if(idx === 0) return this.unshift(val);

        let newNode = new Node(val);
        let prev = this.get(idx-1);
        let temp = prev.next;
        prev.next = newNode;
        newNode.next = temp ; 
        this.length++;
        return true;
    }
```

- 인덱스가 음수이거나, 길이보다 클 경우 false반환
    - 길이보다 클 경우는 이전에 있는 노드가 없기 때문에 연결이 안된다.
- 인덱스가 리스트의 길이랑 같으면 맨 마지막에 추가하는 push 메서드 이용
- 인덱스가 0 (처음)이면 맨 처음에 추가하는 unshift 메서드 이용
- 중간에 값을 추가할 경우, 이전 노드를 받아온다.
- 이전 노드가 가리키는 값을 temp 에 저장하고, 이전 노드가 새로운 노드를 가리키게하고, 새로운 노드는temp 를 가리킨다.
- 추가했기때문에 길이 1 증가
- 성공 시 true, 실패 시 false 반환

 <br>

• remove 메소드

    remove(idx){
            if(idx<0 || idx>=this.legnth) return undefined;
            if(idx === this.length ) return this.pop(); //맨마지막에 제거
            if(idx === 0) return this.shift(); // 맨 처음 제거 
  
            let prev = this.get(idx-1);
            let removeNode = prev.next;
            prev.next = removeNode.next;
            this.length--;
            return removeNode;
  
        }

  • 인덱스가 음수이거나, 길이보다 크거나 같을 경우 false반환

  • 인덱스가 리스트의 길이랑 같으면 맨 마지막에 삭제하는 pop 메서드 이용

  • 인덱스가 0 (처음)이면 맨 처음에 삭제하는 shift 메서드 이용

  • 중간 인덱스에 값을 삭제할 경우, 이전 노드를 받아온다.

  • 이전 노드가 가리키는것을 제거할 노드가 아닌 제거할 노드가 가리키는 것을 지정해주어 제거할 노드와의 연결을 끊는다.

  • 길이를 1개 감소시키고 삭제된 노드를 반환한다. 실패 시 undefined 반환

    
    

• reverse 메소드

  0부터 채워넣어야하는데 마지막 요소부터 거꾸로 접근이 안됨.

  주어진 연결 리스트의 노드순서가 역으로 연결되도록 해야한다.

  리스트를 따라가면서 순서를 계속 역으로 바꿔나감

    reverse(){
  
            let currentNode = this.head;
            [this.head,this.tail] = [this.tail,this.head];
  
            let beforeNode = null
            let nextNode;
  
            while(true){
                nextNode = currentNode.next;
  
                currentNode.next=beforeNode;
  
                beforeNode = currentNode;
                currentNode = nextNode;
  
                if(!currentNode) break;
            }
        }

  • haed와 tail을 바꾼다
  • 이전 노드(beforeNode)를 null로 초기화한다.
  • a → b → c 를 반대로 바꿔줘야한다
    • a<- b 로 바꾸려면 먼저 a 노드(currentNode)가 가리키는 b노드(nextNode)를 저장한다.
    • a노드(currentNode)가 이전노드(beforeNode)를 가리키게 한다.
    • 현재 위치한 (currentNode) 노드를 nextNode로 이동한다.
    • 노드가 null일 때까지 반복한다.

React portal을 이용하면 UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해줄 수 있다. 즉, DOM 의 계층구조 시스템에 종속되지 않으면서 컴포넌트를 렌더링 할 수 있게 된다.

portal 을 사용한 이유

프로젝트를 진행하면서 부모 컴포넌트의 스타일링 속성에 제약을 받아서 모달이 가려지는 현상으로 z-index값을 조정해줘야 하는 경우가 있었다. 또 최상위에서 전체 스타일에 width:80%를 스타일을 줬다고 가정한다면, 그 안에 modal 이 들어갈 경우 전체 스타일의 영향을 받을 수 밖에 없기 때문에 portal로 분리하도로 했다.

portal 구현하기

portal로 이동하여 modal이 렌더링 될 위치 넣어주기

export default class MyDocument extends Document {
 //코드 생략... 
  render() {
    return (

      <Html>
        <Head />
        <body>
          <Main />
          <div id="modal-root" />
          <NextScript />
        </body>
      </Html>
    );
  }
}

react에서는 index.html에 넣어주지만,next는 html 파일이 없으므로 _document.tsx파일에 <div id="modal-root" /> 를 추가해주었다.

모달을 띄울 때 modal-root 노드가 portal의 도착지점이 된다.

createPortal

// front/components/modal/ModalPortal.tsx

import React, { ReactElement, useEffect, useState } from "react";
import ReactDom, { createPortal } from "react-dom";

const Portal = ({ children }: { children: ReactElement }) => {
  const [mounted, setMounted] = useState<boolean>(false);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (typeof window === "undefined") return <></>;

  return mounted ? createPortal(children, document.getElementById("modal-root") as HTMLElement) : <></>;
};

export default Portal;

호출

const Login = () => {
  return (
    <LoginWrap>
      <LoginContainer>
        //일부코드 생략...
        <Portal>
          <FindPasswordModal />
        </Portal>
      </LoginContainer>
    </LoginWrap>
  );
};

Portal 의 children은 FindPasswordModal로 모달이 modal-root안에서 랜더링된다.

nextjs에서 사용할 때 주의사항

const [mounted, setMounted] = useState<boolean>(false);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

Next는 별도의 설정을 하지 않는다면 SSR과 CSR을 동시에 진행한다. SSR 과정에서 document에 접근하려고 하면 접근할 수 없어서 에러가 난다. 따라서 CSR을 마친 후, window객체가 있을때만 동작하게 작성해야 한다.

useEffect()를 통해서 mount되면 createPortal이 작동되도록 구현하였다.

if (typeof window === "undefined") return <></>; 이 코드를 추가하여도 해결된다.

결과

이 전에서는 __next 최상위 루트 안에 포함되어있었다면, modal-root로 빠져나와 그 안에 포함되어있는 것을 볼 수 있다.

오늘의 할일을 넣어주면

1. 오늘의 할일 리스트에 추가된다.
2. 달력에서 12월 8일에 일정이 있음으로 o이모티콘이 추가되어야한다. 이렇게 두가지가 이루어져야한다.

달력에서 데이터를 불러올 때의 쿼리키 ["plan","2022","12"]

오늘의 할일 데이터를 불러올 때 쿼리키 ["plan","2022","12","08"] 각각 지정했다.

할일을 생성할 때, 두 가지 데이터가 새로 불러와져야 함으로 생성할 때 useMutation 에서 쿼리무효화를 아래와 같이 키로 해주면 된다. ["plan","2022","12"] 해당키로 시작하는 것들은 모두 데이터가 무효화 처리되어 다시 패치된다.

위와 같이 하면 당연히 될 줄 알았는데, 달력에서는 동작을 하지 않는 문제가 생겼다.

mutation을 통해서 query 무효화를 했을 때, 같은 키를 사용하면 무효화가 된다고 했는데 되지 않는 문제가 생겼다.

단순히 console로 찍었을 때는 같은 데이터가 쿼리키에 들어간다고 생각했으나, reqct query devtools를 사용해보았더니 년,월,일 중에서 월의 데이터가 잘못들어가고 있었다.

Calendar 에서 사용했던 Data객체에서는 월이 112가 아니라, 011로 0부터 시작하기 때문에 숫자가 하나씩 앞당겨졌던 것이다.

뿐만아니라, 특정 동작에 따라 쿼리키가 무효화 되어서 어떤 쿼리키가 fetch 되는지도 알 수 있어서 데이터 패칭하는것을 관리하기 좋을것 같다는 생각이 들었다

추가로 쿼리키를 일일히 지정해주는 것은 너무 헷갈려서 한곳에서 관리를 해주는 것이 좋을 것 같다.

이렇게 할 경우, 일일히 페이지에서 html에 Seo컴포넌트를 추가하고 props로 title을 넣어줘야한다. 이에 대해서 묶어서 어떻게 해결할 수 있을까 ?

<2번째 시도>

SSR getServerSideProps함수 > pageProps에다가 넘겨준다. 적용해보니 SEO 컴포넌트에 일일히 props를 넘겨주는것과 크게 다르지 않게 느껴졌다.

// components/Seo.ts
import Head from "next/head";

export type SeoPageProps = {
  pageTitle: string;
  pageDesc: string;
};

export default function Seo({ pageTitle, pageDesc }: SeoPageProps) {
  return (
    <Head>
      <title>{pageTitle} | Hi Five</title>
      <meta property="og:title" content={pageTitle ? pageTitle : "우쥬"} key="ogtitle" />
      <meta property="og:description" content={pageDesc ? pageDesc : "교환일기 | 일정관리 "} key="ogdesc" />
    </Head>
  );
}

// pages/_app.tsx
export default function App({ Component, pageProps }: AppProps<SeoPageProps>) {
  const [isLightTheme, setIsLightTheme] = useState(true);
  const { pageTitle, pageDesc } = pageProps;
  console.log(pageTitle, pageDesc);

  return (
    <ThemeProvider theme={isLightTheme ? lightTheme : darkTheme}>
      <GlobalStyle />
      <Layout>
        <Seo pageTitle={pageTitle} pageDesc={pageDesc}></Seo>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  );
}

//pages/login.tsx

//...일부 생략 

export default function login() {
  return {
   <></> 
  }
}
export async function getServerSideProps() {
  return {
    props: {
      pageTitle: "로그인",
      pageDesc: "우쥬 로그인 페이지 입니다.",
    },
  };
}

<hoc 패턴>

hoc패턴 >컴포넌트에서 컴포넌트를 호출한다. 페이지 안에 있는 getServerSideProps를 호출 할 때 WithGetServerSideProps 내에 커스톰된 getServerSideProps가 호출된다. ssr에서 context 이용

context.resolvedUrl > 현재 url을 가져올 수 있어서 , 그 경로일 경우 어떤 title이 올 지 정해주게되면 일일히 props로 넘기지 않아도 url path에 따라서 titl을 지정할 수 있게 된다.

//hocs/withGetServerSideProps.ts
import { GetServerSideProps, GetServerSidePropsContext } from "next";

const PATH = {
  HOME: "/",
  LOGIN: "/login",
  JOIN: "/join",
};

const mapPathToTitle: { [key: string]: string } = {
  [PATH.HOME]: "홈",
  [PATH.LOGIN]: "로그인",
  [PATH.JOIN]: "회원가입",

};

const mapPathToDesc: { [key: string]: string } = {
  [PATH.HOME]: "홈 화면 입니다. ",
  [PATH.LOGIN]: "우쥬, 로그인 페이지 입니다. ",
  [PATH.JOIN]: "회원가입 페이지 입니다.",
};

const withGetServerSideProps = (getServerSideProps: GetServerSideProps) => {
  console.log("withGetServerSideProps");
  return async (context: GetServerSidePropsContext) => {
    const pagePath = context.resolvedUrl;
    return await getServerSideProps(context).then((res: { [key: string]: any }) => {
      console.log(res.props);
      return {
        ...res,
        props: {
          ...res.props,
          isError: false,
          pageTitle: mapPathToTitle[pagePath],
          pageDesc: mapPathToDesc[pagePath],
        },
      };
    });
  };
};

export default withGetServerSideProps;

실제로 페이지 내에서 사용할 때 아래와 같이 사용하였다. 페이지별로 데이터를 패치하거나 해야할 때는 아래코드 내에서 작업해주면 된다.

export const getServerSideProps = withGetServerSideProps(async (context: GetServerSidePropsContext) => {
  return {
    props: {},
  };
});

인증된 사용자가 아닐 경우, 특정페이지에 접근하지 못하도록 막고 login 페이지로 리다이렉트 시켜줌.

  useEffect(() => {
    if (!user && router.pathname !== "/" && router.pathname !== "/join") {
      console.log(router.pathname);
      router.push("/login");
    }
  }, [isLoginState]);

<문제>

Client에서 직접 router를 통해 redirect를 할 경우, 페이지가 깜빡임 (실제로 해당 페이지에 한번 접근해서 잠깐 보여졌다가 곧바로 redirect 되는 동작) 예를 들어, /mypage에 접근할 경우 해당페이지의 컴포넌트가 잠시 깜빡거리며 보였다가 login페이지로 이동되는 현상이 생김.

<해결>

미들웨어는 특정 요청과 응답사이에 놓아지는 모듈역할을 한다. Server 환경의 미들웨어를 이용해서 위 문제 없이 곧바로 redirect 할 수 있음

미들웨어는 서버자원이라 로컬스토리지, 세션스토리지에 접근 못하지만 쿠키에는 접근 가능하다. 로그인이 완료되면 쿠키에 토큰 값을 저장해주는 부분을 추가했다.

matcher에 해당하는 것만 미들웨어가 적용 시킴으로써 접근 제어할 페이지를 정할 수 있다. 미들웨어에서는 토큰값을 기반으로하여 matcher와 매치되는 페이지로 이동을 할 경우, login페이지로 redirect 한다.

이렇게되면 미들웨어에서 먼저 가로채어 처리함으로써 /mypage에 접근조차 하지 않게되어 깜빡임이 사라지게 된다.

import { PATH } from "@hocs/withGetServerSideProps";
import { NextRequest, NextResponse } from "next/server";

export default function commonMiddleware(req: NextRequest) {
  const token = req.cookies.get("userToken");

  if (!token) {
    return NextResponse.redirect(new URL("/login", req.nextUrl));
  }
}

export const config = {
  matcher: ["/diary", "/stamp", "/planner", "/mypage"],
};

아래 코드와 같이 모든 곳에서 headers를 넣어주고 있고, content type이 application/json인 경우는 "Content-Type"="application/json" 이렇게 일일히 넣어주고 있었다.

이번 프로젝트에서는 interceptor를 활용해서 요청에서 중복되는 부분을 한번에 처리했다. http 통신할때 기본 데이터는 Content-Type을 application/json로 지정하고, 이미지나 파일 데이터를 보낼때는 Content-Type를 multipart/form-data 로 바꿔줘야한다.

export const axiosInstance = axios.create({
  baseURL: BASE_URL,
  timeout: 3000,
});

axiosInstance.interceptors.request.use(
  //요청을 보내기 전에 수행할 일
  async config => {
    config.headers = config.headers ?? {};
    if (config.data instanceof FormData) {
      config.headers["Content-Type"] = "multipart/form-data";
    } else {
      config.headers["Content-Type"] = "application/json";
    }
    config.headers.Authorization = `Bearer ${sessionStorage.getItem("userToken")}`;
    return config;
  },
  error => {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  },
);

위와같이 interceptor를 활용해서 Content-Type을 동적으로 지정할 수 있게 만들어 옵션부분을 생락해도 됨으로써, 아래와 같이 중복된 코드가 사라져 깔끔하다.

export async function createReview(contents: FormData) {
  return await axiosInstance.post(`review/create`, contents);
}

// type/weather.ts 
export type RoundButtonType = "back" | "add" | "close";

//components/round_button.tsx
import { RoundButtonType } from "../type/weather";

export default function RoundButton(kind: RoundButtonType) {
  return <button></button>;
}

해당버튼을 사용하려는 페이지에서 컴포넌트를 아래와 같이 호출했다.

문제해결

1)

const test: RoundButtonType = "add";

위와같이 타입을 지정한 후 type에 test 변수를 전달하도록 테스트를 해봤지만 여전히 똑같이 에러가났다. 이부분이 문제가 아니라 props가 객체인데 타입지정을 잘못한 것이 문제였다.

//components/round_button.tsx
export default function RoundButton(kind: RoundButtonType) {
}

RoundButtonType은 interface나 객체 type로 지정해준게 아니라, union type으로 문자열에 값일 지정해줬다.

props에서는 객체로 전달되는데 이 부분이 문제였다.

props 안에있는 kind라는 key를 가진 값이 있다고 생각해보면,저렇게 지정해주면 안된다.

해결책 1) type에 지정한 RoundButtonType은 그대로 두고 매개변수를 객체화 해주는 방법 RoundButton(type: { kind: RoundButtonType })

export default function RoundButton(type: { kind: RoundButtonType }) {
  return (
    <button className="rounded-full border p-3 shadow-md shadow-gray-800">
      {changeImg(type.kind)}
    </button>
  );
}

해결책 2) 타입을 객체로 변경하고, 추가로 버튼에 다른 props들을 받을 수도 있기 때문에 key를 추가

// type/weather.ts 

//변경전
export type RoundButtonType = "back" | "add" | "close";

//변경후
export type RoundButtonType = "back" | "add" | "close";
export interface RoundButtonProps {
  kind: RoundButtonType;
  [key: string]: any;
}

//-------------------------------------------

// components/round_button.tsx 일부
export default function RoundButton({ kind, ...rest }: RoundButtonProps) {
  return (
    <button className="rounded-full border p-3 shadow-md shadow-gray-800">
      {changeImg(kind)}
    </button>
  );
}

any를 쓰는것이 안좋은것을 알고있지만 우선 지금은 프롭스로 어떤것이 올지 정해져있지 않아서 any로 지정해두었다.

이후 프로젝트를 진행할 때, prop-types 패키지를 적용해서 관리해보면 좋을것같다.

postman테스트 해보다가 분명 3009번 포트는 지금 진행하고있는 것밖에 없다고 생각했는데 아래와 같은 오류가 생겼다.

Error: listen EADDRINUSE: address already in use :::3009

종종 해당 포트를 사용하던 Nodejs 프로세서가 비정상적으로 종료된 경우에도 나타날 수 있다고 한다.

리눅스와 맥os에서는 터미널에서의 lsof 명령어를 통해 프로세스를 확인하고 종료할수 있다.

나는 3009번 포트를 사용하는 프로세스를 강제종료 시켰다.

1. lsof -i :3009

현재 3009번 포트를 사용하는 프로세스가 있다면 출력이나오면서, PID값을 확인할 수 있다.

2. 1번에서 받아온 PID를 복사해뒀다가, kill -9 PID값 명령어를 통해 강제 종료시킨다.

📌 enumerate

값 뿐만 아니라 해당 리스트에 해당하는 인덱스까지 알 수 있다.

fruits = ['사과','배','딸기'];
for idx,fruit in enumerate(fruits):
    print(f"{idx+1}번째 과일은 {fruit}");

📌 map

map(함수, 리스트/튜플) 함수의 return 값은 항상 존재해야한다.

map객체로 출력되기 때문에 list로 형변환이 필요하다.

리스트 원소에 대해서 각 함수를 적용한다. map자체를 출력하면 map객체로 출력되기 때문에 리스트로 형변환 하거나 for문을 사용해서 각 원소들을 출력해야한다.

prices = [500,300,1000,3400]

def print_price(price):
    return f"{price}"원
print(list(map(print_price,prices)))

for i in map(print_price,prices):
    print(i); 

#lambda 활용 
list(map(lambda x:f"{x}원",prices))

#10이하의 양의정수의 세제곱 구하기 
list(map(lambda x:x**3,range(1,11)))

# 코테에서 일괄적으로 int를 적용하기 위해서도 많이 사용했음 
input_list = list(map(int,input().split()));

📌 filter

filter(함수, 리스트/튜플) 함수의 return값은 True, False여야 한다.

map과 비슷하지만 함수가 true인 경우만 원소를 담아주게된다. map과 동일하게 list로 형번환하거나 for문으로 출력해야한다.

def is_even(x):
    return x%2==0
list(filter(is_even,range(10)))

list(filter(lambda x:x**x,range(10)))

# 100이하의 숫자 중 6의 배수를 리스트 형태로 출력 
# 조건 :lambda , filter 사용 
print(list(filter(lambda x:x%6==0,range(1,101))))
# [6, 12, 18, 24, 30, 36, 42, 48, 54, 60, 66, 72, 78, 84, 90, 96]

📌 zip

zip(iterable*)은 동일한 개수로 이루어진 자료형을 묶어 주는 역할을 하는 함수이다.

>>> list(zip([1, 2, 3], [4, 5, 6]))
[(1, 4), (2, 5), (3, 6)]
>>> list(zip("abc","def"))
[('a', 'd'), ('b', 'e'), ('c', 'f')]

>>> for x, y in zip(range(10), range(10)):  # 두개의 0~9까지 숫자모음
>>>     print(x, y)
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9

변경전 MenuList 같은 컴포넌트가 중복되는 것을 알 수 있다. 지금은 데이터가 몇개 되지 않지만 이것이 백개만 넘어가더라도 일일히 다 수정을 해야하는 번거로움도 있다.

return (
    <>
      <MenuList price="4100" menu="아메리카노" handleClick={handleClick} />
      <MenuList price="4600" menu="카페라떼" handleClick={handleClick} />
      <MenuList price="5100" menu="캐러멜 마키아토" handleClick={handleClick} />
      <button onClick={handleClickTotal}>총 가격 </button> : {payMoney}
      <p>남는 돈: {change} </p>
    </>
  );

변경 후 coffee라는 객체를 가진 배열이 있다고 가정하고, map함수를 활용하여 MenuList 컴포넌트를 coffee라는 객체에 따라 유동적으로 사용할 수 있도록 변경했다.

//data 
const coffee = [
  {
    menu: "아메리카노",
    price: 4100,
    count: 0,
  },
  {
    menu: "카페라떼",
    price: 4600,
    count: 0,
  },
  {
    menu: "캬라멜 마끼아또",
    price: 5100,
    count: 0,
  },
];

// 
return (
    <>
      {coffee &&
        coffee.map((item) => (
          <MenuList
            price={item.price}
            menu={item.menu}
            handleClick={handleClick}
          />
        ))}
      <button onClick={handleClickTotal}>총 가격 </button> : {payMoney}
      <p>남는 돈: {change} </p>
    </>
  );

전체코드

import React, { useState, useEffect } from "react";

function App() {
  return (
    <div className="App">
      <Menu />
    </div>
  );
}
//data
const coffee = [
  {
    menu: "아메리카노",
    price: 4100,
    count: 0,
  },
  {
    menu: "카페라떼",
    price: 4600,
    count: 0,
  },
  {
    menu: "캬라멜 마끼아또",
    price: 5100,
    count: 0,
  },
];

//  -----------------------------함수형 컴포넌트 분리
const Menu = () => {
  const MONEY = 50000; // 지정한 회비

  const [data, setData] = useState([]);
  const [payMoney, setPayMoney] = useState(0);
  const [change, setChange] = useState(0);

  const handleClickTotal = (e) => {
    //총 가격 계산
    const total = data.reduce((pre, cur) => {
      return pre + cur.price * cur.count;
    }, 0);

    //가격에 따라서 총 금액과 남는돈 set
    setPayMoney(total);
    setChange(MONEY - total);
  };

  //데이터 잘 보이는지 보려는 용도
  useEffect(() => {
    console.log("Menu useEffect", data);
  }, [data]);

  const handleClick = (pass) => {
    //console.log("pass data:", pass);

    const newData = [...data];
    const exist = newData.find((item) => pass.menu === item.menu);

    //같은 데이터가 존재하지 않는다면 넣어주고
    if (!exist) {
      newData.push(pass);
    }
    //같은 데이터가 존재한다면 count값만 갱신
    else {
      newData.forEach((item, index) => {
        if (item.menu === pass.menu) {
          newData[index].count = pass.count;
        }
      });
    }
    setData(newData);
  };

  return (
    <>
      {coffee &&
        coffee.map((item) => (
          <MenuList
            price={item.price}
            menu={item.menu}
            handleClick={handleClick}
          />
        ))}
      <button onClick={handleClickTotal}>총 가격 </button> : {payMoney}
      <p>남는 돈: {change} </p>
    </>
  );
};

const MenuList = ({ price, menu, handleClick }) => {
  const [count, setCount] = useState(0);

  //useEffect로 변경하여 부모컴포넌트에 데이터를 전달
  useEffect(() => {
    handleClick({ price, menu, count });
  }, [count]);

  //이것도 왜 2번호출되지 ?
  // useEffect(() => {
  //   console.log("useEffect : ");
  // }, []);

  const handleClickAdd = () => setCount(count + 1);

  const handleClickDelete = () =>
    setCount((current) => (current > 0 ? current - 1 : 0));

  return (
    <p>
      <span>{`${price}원 ${menu}: `}</span>
      <span>{`${count}`}</span>
      <button onClick={handleClickAdd}>추가</button>
      <button onClick={handleClickDelete}>감소</button>
    </p>
  );
};

export default App;

문제: 정해진 예산 5만원이 있고 어떠한 커피를 주문하는지에 따라서 해당 메뉴가 카운팅 되고, 총 가격 버튼을 누를 경우 총 얼마를 지불해야하는지, 거스름돈이 출력된다.

1. 연습겸 파일을 별도로 분리하지 않고 우선 App.js에 한꺼번에 작성. ( 추후에는 분리해서 import export로 사용할 예정 )

import React, { useState } from "react";

function App() {
  return (
    <div className="App">
      <Menu />
    </div>
  );
}

//  -----------------------------함수형 컴포넌트 분리
const Menu = () => {
  const [data, setData] = useState([]);

  const parentFunction = (pass) => {
    console.log(pass);
    const newData = [...data];
    newData.push(pass);
    setData(newData);
  };

  return (
    <>
      <MenuList
        price="4100"
        menu="아메리카노"
        parentFunction={parentFunction}
      />
      <MenuList price="4600" menu="카페라떼" parentFunction={parentFunction} />
      <MenuList
        price="5100"
        menu="캬라멜 마끼아또"
        parentFunction={parentFunction}
      />
      <button>총 가격 </button> :<p>남는 돈: </p>
    </>
  );
};

const MenuList = ({ price, menu, parentFunction }) => {
  const [count, setCount] = useState(0);
  const handleClickAdd = () => {
    setCount((current) => current + 1);

    console.log(count);
    parentFunction({ price, menu, count });
  };
  const handleClickDelete = () => {
    setCount((current) => (current > 0 ? current - 1 : 0));

    console.log(count);
  };
  return (
    <p>
      {`${price}원 ${menu}: ${count}`}
      <button onClick={handleClickAdd}>추가</button>
      <button onClick={handleClickDelete}>감소</button>
    </p>
  );
};

export default App;

1) 문제점 더해진 값에 따라서 버튼을 클릭할 때마다 화면에는 증가하는 값이 잘 출력이 된다. 하지만, count를 바로 찍어도 더해진 값이 출력되지 않는다. useState의 setCount는 비동기로 동작하기 때문에 그러한 것으로 보인다.

const handleClickAdd = () => {
    setCount((current) => current + 1); // setCount(count + 1);

    console.log(count);
    parentFunction({ price, menu, count });
  };

해당 값(count)이 변할때를 감지하는useEffect() 를 추가하여 해결

import React, { useState, useEffect } from "react";

function App() {
  return (
    <div className="App">
      <Menu />
    </div>
  );
}

//  -----------------------------함수형 컴포넌트 분리

const Menu = () => {
  const MONEY = 50000; // 지정한 회비

  const [data, setData] = useState([]);
  const [payMoney, setPayMoney] = useState(0);
  const [change, setChange] = useState(0);

  const handleClickTotal = (e) => {
    //총 가격 계산
    const total = data.reduce((pre, cur) => {
      return pre + cur.price * cur.count;
    }, 0);

    //가격에 따라서 총 금액과 남는돈 set
    setPayMoney(total);
    setChange(MONEY - total);
  };

  useEffect(() => {
    console.log("Menu useEffect", data);
  }, [data]);

  const handleClick = (pass) => {
    //console.log("pass data:", pass);

    const newData = [...data];
    const exist = newData.find((item) => pass.menu === item.menu);

    //같은 데이터가 존재하지 않는다면 넣어주고
    if (!exist) {
      newData.push(pass);
    }
    //같은 데이터가 존재한다면 count값만 갱신
    else {
      newData.forEach((item, index) => {
        if (item.menu === pass.menu) {
          newData[index].count = pass.count;
        }
      });
    }
    setData(newData);
  };

  return (
    <>
      <MenuList price="4100" menu="아메리카노" handleClick={handleClick} />
      <MenuList price="4600" menu="카페라떼" handleClick={handleClick} />
      <MenuList price="5100" menu="캬라멜 마끼아또" handleClick={handleClick} />
      <button onClick={handleClickTotal}>총 가격 </button> : {payMoney}
      <p>남는 돈: {change} </p>
    </>
  );
};

const MenuList = ({ price, menu, handleClick }) => {
  const [count, setCount] = useState(0);

  //useEffect로 변경하여 부모컴포넌트에 데이터를 전달
  useEffect(() => {
    handleClick({ price, menu, count });
  }, [count]);

  //이것도 왜 2번호출되지 ?
  // useEffect(() => {
  //   console.log("useEffect : ");
  // }, []);

  const handleClickAdd = () => setCount(count + 1);

  const handleClickDelete = () =>
    setCount((current) => (current > 0 ? current - 1 : 0));

  return (
    <p>
      <span>{`${price}원 ${menu}: `}</span>
      <span>{`${count}`}</span>
      <button onClick={handleClickAdd}>추가</button>
      <button onClick={handleClickDelete}>감소</button>
    </p>
  );
};

export default App;

• useEffect를 추가하여 count 값이 변화함에 따라서 부모 컴포넌트에 커피의 카운팅을 전달한다.
• useState로 총 지불해야할 금액과 남은 금액을 변수로 담아 출력한다. ㄴ 버튼을 누를 경우 총 가격을 계산 후 setPayMoney,setChange를 통해 값을 변경한다.

2) 문제점 / useEffect 의 동작

useEffect는 랜더링 될 때와 값이 변경될때 호출이되는 것으로 알고있는데, 처음 랜더링될때 이것이 2번 호출되는 것으로 보이며, <MenuList>의 마지막 요소가 data로 미리 들어가면서 한번더 useEffect가 호출되는 문제점을 볼 수 있었다.

콘솔로 찍어보지 않았을 때는 제대로 동작하는걸로 착각할 수 있다. 현재 코드는 뭔가 이상해보인다.