상태(state)란?

상태랑 프론트엔드에 동적으로 표현되는 데이터로 즉, 변하는 데이터다. 예로 쇼핑몰에 장바구니를 생각해보면 상품 수량, 주문할 상품 선택에 따라 변경되는 결제 금액 등이 상태다.

상태의 조건

자식 컴포넌트들 간의 다이렉트로 데이터 전달은 불가능하고 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 그렇기 때문에 자식 컴포넌트가 많아지면 상태 관리가 복잡해지고 props drilling 이슈가 생긴다.

props drilling

state를 다른 자식 컴포넌트에 전달할 때 props를 이용하여 값을 내려주는데 이때 해당 state값이 필요하지 않는 컴포넌트에도 전달을 하려 내려 받아야하는 것을 props drilling라고 한다.

해결 방법

이것을 해결하기 위해 상태 과리 도구(라이브러리)를 이용한다. 상태 관리 도구를 사용하면 전역 상태 저장소를 제공하여 어디서든 해당 저장소에 접근할 수 있기 때문에 props drilling도 해결이 가능하다.

상태 도구 라이브러리 종류

• Redux
• React Context
• Recoil
• MobX

최근에는 Recoil도 인기가 조금 생기기 시작한 것 같지만 여전히 제일 인기가 좋은 라이브러리는 Redux인 것 같다.

참조 자료

https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/

아이콘 가져오기

이번 프로젝트에서는 react-icon 라이브러리를 사용했다.

import { ImStarFull } from "react-icons/im";

별점 체크를 위한 설정

별 5개 만점으로 Boolean값을 이용하여 로직을 구현했다. useState를 사용하면 모든 기본값을 false로 주었다. 그리고 별점 2일 경우 [true, true, false, false, false]가 되도록한했다.

// 별점 기본값 설정
const [clicked, setClicked] = useState([false, false, false, false, false]);

별점 체크 최종 설정

별 5개가 화면에 보여지도록 하기 위해 더미 배열(array)을 만들어서 map을 이용하여 돌린다. 그러면 클릭한 별의 index값이 el에 찍히게 된다. 가령 별점을 3점으로 줬다면el = index = 3가 된다.

 // 더미 배열을 통해 항상 별이 총 5개가 나오도록 한다.
const array = [0, 1, 2, 3, 4]

{array.map((el) => (
            <ImStarFull
              key={el}
              onClick={() => handleStarClick(el)}
              className={clicked[el] && 'black'}
              size="35"
            />))}

그리고 클릭한 별의 el값(3)을 handleStarClick 함수로 보내서 클릭된 별 만큼 true로 바뀌도록 한다. for문을 이용하여 el만큼 돌면서 false를 true로 변경한다.

const handleStarClick = index => {
  let clickStates = [...clicked];
  for (let i = 0; i < 5; i++) {
    clickStates[i] = i <= index ? true : false;
  }
   setClicked(clickStates);
 };

별점 내보내기

마지막으로 filter를 이용하여 true값만 뽑아서 length를 이용해 개수를 확인 후 별점값을 보낸다.

let score = clicked.filter(Boolean).length;

CSS 설정

기본 별점 색은 회색이고 마우스를 올리거나 선택이되면 검정색으로 바뀌도록 아래와 같이 CSS를 설정했다.

const RatingBox = styled.div`
  margin: 0 auto;

  & svg {
    color: #C4C4C4;
    cursor: pointer;
  }
  :hover svg {
    color: black;
  }
  & svg:hover ~ svg {
    color: #C4C4C4;
  }
  .black {
    color: black;
  }
`

참고 자료

https://velog.io/@whoyoung90/TIL-35-WECODE-%EB%B3%84%EC%A0%90-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84

API는 Application Programming Interface의 약자로 클라이언트(프로그램)에서 자원을 사용할 수 있도록 서버가 제공하고자 하는 데이터나 기능을 제어할 수 있게 만드는 인터페이스이다.

• 컴퓨터와 인간을 연결하는 것은 UI(사용자 인터페이스)
• 컴퓨터나 소프트웨어를 서로 연결하는 것은 API

HTTP API란?

통신 규약 중 하나인 HTTP를 사용하여 프로그램끼리 의사소통을 하는 API다.

HTTP API가 아닌 API

미세먼지 측정기의 경우, 미세먼지 측정기와 스마트 창문이 IoT 애플리케이션과 통신할 수 있는 API가 있어야 하는데 이때는 HTTP통신이 아닌 저사양/저전력 환경에 적합한 MQTT, CoAP 프로토콜을 사용해야 한다.

MQTT과 CoAP 프로토콜

MQTT은 TCP기반의 경량화된 메시지 프로토콜이다. CoAP은 UDP기반의 저전력 비동기 통신 프로토콜이다.

참고자료

짐코딩 API란 무엇인가? https://bentist.tistory.com/37

배열 안 객체에 date값

const date = [
    {date: "2021-04-17"},
    {date: "2021-04-21"},
    {date: "2021-04-29"},
    {date: "2021-05-11"},
    {date: "2021-05-21"},
    {date: "2021-06-21"},
]

날짜 순으로 정렬

new Date()를 사용하여 문자열로 입력된 날짜를 날짜 형태로 변환한 후 sort 함수를 이용하여 정렬 반환하는 방식이다.

1. new Date()를 사용하면 아래와 같이 문자열이 날짜형태로 변환된다.
2. sort함수를 이용하여 정렬된 배열을 반환한다.

   const orderedDate = date.sort((a, b) => new Date(a.date) - new Date(b.date))

   참고자료

   https://dkmqflx.github.io/frontend/2021/04/21/javascript-sortbydate/ https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property

keypress

현재 MDN에 keypress를 검색하면 Deprecated라고 나온다. 더 이상 keypress 이벤트는 지원되지 않는다라는 의미다. Browser compatibility를 보면 아직 지원을 하는 브라우저들이 많지만 추후 최신 브라우저에서는 사용되지 않을 가능성이 높기 때문에 사용하지 않고 개발하는 것이 좋다.

그리고 그 대신에 사용가능한 이벤트를 위와 같이 추천해준다.

keydown

사용자가 키보드를 누르면 바로 이벤트가 발생한다.

event.isComposing

한국어처럼 한글자를 완성하는데 여러 번의 keydown이 발생하는 경우에는 중간에 이벤트가 실행되는 경우가 생긴다. 그럴때는 keyup으로 이벤트를 변경하거나 event.isComposing을 사용하면 해결된다.

input.addEventListener('keydoen', (e) => {
  if (e.isComposing) {
    return;
  }
  if (e.keyCode === 13) {
    onAdd();
  }
})

keyup

사용자가 누른 키보드에서 손을 떼면 이벤트가 발생한다.

참고자료

[MDN keypress event] [MDN keypress event]:https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event 드림코딩엘리 브라우저 101 강의

이벤트 위임이란?

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다.

이벤트 위임 코드 패턴의 장점

• 부모 요소에만 이벤트를 등록하기 때문에, 자식 요소에 추가, 삭제가 자유롭다.
• 메모리 공간의 사용량을 줄일 수 있다.
  

이벤트 위임 코드

아래의 코드처럼 querySelectorAll을 이용하여 모든 input의 요소를 가져와서 일일이 이벤트를 등록하는 것은 좋은 코드가 아니다. (forEach문으로 모든 input을 돌면서 일일이 이벤트를 추가하는 코드)

<h1>오늘의 할 일</h1>
<ul class="itemList">
    <li>
        <input type="checkbox" id="item1">
        <label for="item1">이벤트 버블링 학습</label>
    </li>
    <li>
        <input type="checkbox" id="item2">
        <label for="item2">이벤트 캡쳐 학습</label>
    </li>
</ul>

<script>
let inputs = document.querySelectorAll('input');
inputs.forEach(function(input) {
    input.addEventListener('click', function(event) {
        alert('clicked');
    });
});
</script>

let itemList = document.querySelector('.itemList');
itemList.addEventListener('click', function(event) {
    alert('clicked');
});

이벤트 위임은 이벤트 버블링을 이용한 방법이다.

참고자료

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

event.preventDefault()란?

html(브라우저)에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막아주는 메서드다. 즉, 현재 이벤트의 default 동작을 중단해주는 메서드다.

언제 사용하나?

1. <a>태그의 경우, href에 연결된 링크를 통해 해당 페이지로 이동하는 기능이 있는데, 해당 링크 페이지로 이동하고 싶지 않을 때 사용한다.
2. <submit>태그의 경우, 값을 전송하면서 해당 페이지를 새로고침하는 기능을 가지고 있는데, 이때 값의 유효성 검사 후 전송이 되도록 하고 싶을 때 사용한다.

   코드 예시

   <a href="https://github.com/Kyeom1997" id="link">김형겸의 깃허브</a>
   <script>
    document.querySelector('#link').addEventListener('click', function(e){
        e.preventDefault();
    });
    // a 태그 클릭 시 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
   </script>

   const onLoginSubmit = (e) => {
   e.preventDefault();
   loginForm.classList.add("hidden");
   const username = loginInput.value;
   localStorage.setItem(USERNAME_KEY, username);
   paintGreetings(username);
   }

   참고자료

   https://velog.io/@hang_kem_0531/JS-event.preventDefault-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

캡처링(Capturing)

window로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 즉, 이벤트가 하위 요소로 전파되는 단계다. 실제 코드에서 자주 쓰이지는 않지만 개념적으로만 알고있으면 될 것 같다.

버블링(Bubbling)

이벤트가 발생한 요소부터 window까지 이벤트를 전파한다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

버블링 현상 예

FORM > DIV > P 형태로 중첩된 구조가 있고, 요소 각각에 핸들러가 할당되어 있다.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

가장 안쪽의 <p>를 클릭하면 순서대로 다음과 현상이 나타난다.

1. <p>에 할당된 onclick 핸들러가 동작.
2. 바깥의 <div>에 할당된 핸들러가 동작.
3. 그 바깥의 <form>에 할당된 핸들러가 동작.

document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작한다.

거의 모든 이벤트는 버블링이 된다.

여기서 키워드는 '거의'이다. Focus 이벤트와 같은 버블링이 되지 않는 이벤트도 있다.

event.target

이벤트가 정확히 어디서 발생했는지 등에 대한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 target요소라고 불리고, event.target을 사용해 접근할 수 있다.

event.currentTarget과 event.target

• event.target은 실제 이벤트가 시작된 '타깃'요소이다. 버블링이 진행되어도 변하지 않는다.

• event.currentTarget은 현재 요소로 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

  <body>
  <div class="outer">
      <button>Click Me</button>
  </div>
  <script>
    const outer = document.querySelector('.outer');![]
    const button = document.querySelector('button');
  
    outer.addEventListener('click', event => {
      console.log(`outer: ${event.currentTarget}, ${event.target}`);
    });
    button.addEventListener('click', event => {
      console.log(`button1 ${event.currentTarget}, ${event.target}`);
    });
  </script>
  </body>

  위에 코드에서 button을 클릭하면 console에 아래와 같이 나온다. 여기서 event.target 즉, 이벤트가 시작된 타깃요소는 HTMLButtonElement가 되고, event.currentTarget는 .outer의 HTMLDivElement와 HTMLButtonElement가 나타나게 된다.

  버블링 중단

  기본적으로 알고 있는 방법이 이벤트 객체의 메서드인 event.stopPropagation()를 사용하는 방법이다.

event.stopPropagation()

위에 코드의 button에 event.stopPropagation()를 추가하게 되면 button에서만 핸들링이 일어나고 버블링이 일어나지 않는다.

button.addEventListener('click', event => {
      console.log(`button1 ${event.currentTarget}, ${event.target}`);
        event.stopPropagation()
    });

event.stopImmediatePropagation()

event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못 한다.

    button.addEventListener('click', event => {
      console.log(`button ${event.currentTarget}, ${event.target}`);
      event.stopPropagation()
    });
    button.addEventListener('click', event => {
      console.log(`button2 ${event.currentTarget}, ${event.target}`);
    });

위에 코드처럼 같은 button에 적용된 핸들러가 있을 경우, event.stopPropagation()만으로는 동작을 멈추지 못 한다. 이때 사용되는 것이 event.stopImmediatePropagation()다. 이 메서드를 사용하면 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막아준다.

하지만!! event.stopPropagation()와 event.stopImmediatePropagation()의 사용은 위험하다.

내가 마음대로 이벤트를 취소해버리면 다른 부분에서 이 이벤트를 통해 더 의미 있는 일을 할 수도 있고 다른 기능을 추가해놨을 수도 있기 때문이다. 큰규모의 프로젝트 등에서 이것으로 인한 오류가 발행 할 수도 있다. 따라서 조건문을 이용하여 버블링을 막아주는 방법을 사용하면 좋다.

조건문을 이용한 버블링 중단

    outer.addEventListener('click', event => {
      if (event.target !== event.currentTarget) {
        return;
      }
    });

위에 코드처럼 event.target와 event.currentTarget을 이용하여 조건문을 만들어주면 된다.

참고사이트 및 강의

모던 JavaScript 튜토리얼 [드림코딩엘리 프론트엔드 필수 브라우저 101 강의]:https://academy.dream-coding.com/courses/browser101 [드림코딩엘리 프론트엔드 필수 브라우저 101 강의]

Math.random()

Math.random()는 난수를 생성하는 메서드다. 난수는 정의된 범위내(기본 0~1사이)에서 값에 소숫점을 붙여서 무작위로 숫자를 추출한다. 보통 광고나 이미지 등을 랜덤으로 보여줘야 할 때 사용한다.

Math.random();

Math.random() 최대값 지정

난수의 범위 지정은 곱하기 * 기호로 최대값 설정이 가능하다. 최대값 설정은 Math.random()에 원하는 최대값을 곱해주면 된다.

Math.random() * 최대값
Math.random() * 10

Math.random() 최소값 지정

최소값을 지정할 경우, 아래와 같이 수식 수정이 필요하다.

( Math.random() * ( 최대값 - 최소값 )  ) + 최소값

최소값은 + 더하기 기호로 원하는 최소값을 더해주는데, 최대값과 달리 최소값은 더하기로 들어가기 때문에 최대값도 동시에 변하게 된다. 따라서 최소값을 지정할 때에는 최대값에도 피해가 가지 않도록 셋팅이 필요하다.

0 ~ 1 → 양변에 10을 곱하면, 0 ~ 10으로 최대값만 변함 0 ~ 1 → 양변에 1을 더하면, 1 ~ 2로 최소값과 최대값이 모두 변함

최소값만 지정시 문제점

해당 수식에 + 1을 더하면 난수의 생성 범위는 1 ~ 11이 된다.

( Math.random() * 10 ) + 1

소숫점 삭제

소숫점을 삭제하고 싶을 때는 Math.floor() 메소드를 사용한다.

Math.floor( ( Math.random() * 10 ) )

베열 랜덤 정렬

const shuffle = () => ( Math.random() - 0.5 );
const quizs = [0,1,2,3,4,5,6,7,8,9,10];
const shuffled = [...quizs].sort(shuffle);

console.log("quizs", quizs)
console.log("shuffled quizs", shuffled)

참고 사이트

https://codiving.kr/54 https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-math-random-%EB%B2%94%EC%9C%84-%EC%9E%90%EB%A6%BF%EC%88%98/ [MDN 공식사이트]:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random [MDN 공식사이트]

Custom Hooks란?

R개발자가 스스로 커스텀한 훅을 의미하며, 반복되는 로직을 함수로 뽑아내어 재사용이 가능하다.

언제 사용하나

여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다.

장점

1. 상태관리 로직의 재활용이 가능하다.
2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다.
3. 함수형으로 작성하기 때문에 명료하다.

적용

주의사항

1. 커스텀 hook 이름 앞에 use를 꼭 붙인다. 자동적으로 규칙이 맞는지 확인하지 못합니다. 특정 함수에 hook이 호출되는지 알 수 없다. 2. 각 input별로 같은 함수를 이용하지만 같은 state를 공유하는 것이 아니다. hook은 state적인 특성을 갖고있어서 공유하지 않고 완전히 독립적이다.

1. src 폴더 > hooks 폴더 생성 후, Custom Hook별로 파일을 추가한다.
2. 함수 이름 앞에 use를 붙인다. ex)useInput.js
3. 보통 프로젝트 내의 hooks 디렉토리에 커스텀 훅을 위치시킨다.
4. 커스텀 훅을 작성할 때는 useState와 같은 React 내장 훅을 사용하여 작성할 수 있다.
5. 보통의 함수와 마찬가지로 사용자가 직접 파라미터와 반환 값을 결정할 수 있다.
6. Rules of Hooks 규칙들을 준수하다.

Rules of Hooks

1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
2. 오직 React 함수 내에서 Hook을 호출해야 한다. Hook을 일반적인 JavaScript 함수에서 호출하면 안된다.

코드 예시

const useFetch = ( initialUrl:string ) => {
    const [url, setUrl] = useState(initialUrl);
    const [value, setValue] = useState('');

    const fetchData = () => axios.get(url).then(({data}) => setValue(data));

    useEffect(() => {
        fetchData();
    },[url]);

    return [value];
};

export default useFetch;

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  // change
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
}

export default useInputs;

사용해 본 Custom Hooks

• 4주 프로젝트 진행 시, 랜딩페이지 드래그에 따른 숫자 카운팅 Hook
• 그래그에 따른 FadeIn Hook

참고 사이트

• 코드스테이츠
• [React 공식사이트]:https://ko.reactjs.org/docs/hooks-custom.html [React 공식사이트]
• https://abangpa1ace.tistory.com/123