자주사용하는 몇가지 개념을 복습해보려고 한다.

⭐️ JavaScript

➊ 구조 분해 할당 Destructuring

✅ 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. -MDN-

// 🤔 배열의 경우
const arr = ['apple', 'mango', 'banana', 'ornage']

// 구조 분해 할당
let [red, yellow, ...etc] = arr // 선언하는 배열의 각각의 인자는 변수가되고, 각 변수에는 순서대로 arr의 인자가 할당된다.
// ...rest 문법을 이용하여 배열의 나머지를 모두 하나의 변수에 담는것도 가능하다. 

console.log(red) // > apple
console.log(yellow) // > mango
console.log(etc) // > ['banana', 'ornage']
// 📌 배열의 구조분해할당시 순서에따라 변수가 정해지기때문에 순서에 유의해야한다.

// 🤔 객체의 경우
const obj = { apple:'red', mango:'yellow', orange:'amber', grape:'violet'}

console.log(apple) // > Uncaught ReferenceError: asdf is not defined // 변수선언을 한적이 없기때문.

//구조 분해 할당
const {apple, mango} =obj // 해당하는 키-값 쌍을 그대로 키를 변수로 선언하고 키에해당하는 값을 할당한다.

console.log(apple) // > red
console.log(mango) // > yellow

//반대로 변수가 있다면, 객체에 변수명만 넣게 되면 변수명이 키값으로 객체의 키-값 쌍이 된다.
const grape = 'podo'

const obj2 = {apple, mango, grape}

console.log(obj2) // > {apple: 'red', mango: 'yellow', grape: 'podo'}

//객체 구조 분해할당시 변수명을 봐꾸는 방법
const {apple:a, mango:m} = obj2
console.log(a) // > red
console.log(m) // > yellow
// 📌 객체의 키값을 바로 변수로 활용할수 있어 편하다. 특히 함수의 인자로 객체의 변수를 사용할때 유용하다.

➋ 고차함수 Reduce

✅ 보통 누산기라고 불리는 Reduce를 이용해서 문자열의 중복되는 값을 제거하는 방법을 알아보자.

// 🤔 reduce를 사용해서 모든 자리수의 문자를 비교를 진행해서 중복되는것들을 하나씩 제거한다.
const word = 'abafcddfedfcf' // > abcdef 값을 얻는게 목표다.

const sortedWord = word.split('').sort() // split을통해 문자열을 배열로 변경시킨 후 sort를 통해 순서대로 정렬한다.
// 정렬을 안하면 순서대로 값을 비교해서 중복값을 찾을 수 없다.
console.log(sortedWord) // > ['a', 'a', 'b', 'c', 'c', 'd', 'd', 'd', 'e', 'f', 'f', 'f', 'f']


const result = sortedWord.reduce((acc, cur) => {
    if (acc[acc.length - 1] === cur) { 
      //acc는 문자열로 반환이 되는데 마지막글자를 다음글자와 비교하면서 중복되지않으면 추가해 나가는 방식이다.
      return acc;
      // acc의 마지막 글자가 다음글자(cur)과 같다면 acc를 그대로 리턴시킨다 --> cur을 스킵한다.
    } else {
      return acc.concat(cur);
      //acc의 마지막 글자가 다음글자(cur)과 다르다면 acc에 문자열을 추가한 후 반환한다 --> 새로운 acc 반환.
    }
  });

// 📌 reduce를 계산에만 사용할 필요가 없다. 모든 배열의 인자를 하나씩 비교한는 방식으로 위의 문제를 쉽게 해결 할 수 있다.
// 처음에는 이중 반복문을 이용하는 방법을 생각했는데 reduce를 이용해서 훨씬 간단하게 중복을 제거할 수 있었다.

⭐️ React Hook

이것만은 기억하자!!! 다시한번 상기하자

➊ Hook의 규칙

✴️ 최상위(at the Top Level)에서만 Hook을 호출해야 합니다
✴️ 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요
✴️ React 함수 컴포넌트에서 Hook을 호출하세요.
✴️ Custom Hook에서 Hook을 호출하세요.

➋ useState

✴️ [value, setValue] = useState(초기값), React에서는 특정 변수의 값이 변할때 재할당을 하지않고, useState를 사용한다.
✅ value라는 변수의 값을 변경할때는 setValue를 이용한다.
✅ setValue가 실행될때 마다 re-rendering 된다.

➌ useEffect

✴️ useEffect(function,[종속성1, 2, ...])에서 종속성을 이용하는 이유는 불필요한 작업을 줄이기 위함.
✅ 두번째 인자가 없을경우 랜더링 될따마다 실행된다.
✅ 두번째 인자가 빈배열일 경우 최조 한번 실행된다.
✅ 두번째 인자인 배열에 인자가 있을 경우 해당 인자의 값이 변경될때마다 실행된다.