[TIL]231109_알고리즘 입문, useState

👩🏻‍💻 Today Learn

• 알고리즘 문제 2개풀기(프로그래머스 코딩테스트 입문) + 알고리즘 스터디
• React 숙련 강의듣기

🔐 알고리즘 문제풀이

오늘 풀어본 문제는 양꼬치와 피자나눠먹기
(피자를 왜 나눠먹지? ㅎ.ㅎ)

문제1) 양꼬치

문제

머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요.

풀이

function solution(n, k) {
    let answer = 0;
    
    if (n >= 10) {
    let a = Math.floor(n / 10)
    k -= a;
    }
    answer = (n * 12000) + (k * 2000);
    return answer;
}

// n 10인분 = k 1개
// n 1인분 = 12,000원
// k 1개 = 2,000원

제출한 후에 다른사람의 풀이를 봤는데 두줄안에 끝나는 것을 보니 신기했다...
지난번에 알게된 Math.floor()을 또 이용해보았다.

---

문제2) 피자나눠먹기

문제

머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요.

function solution(n) {
    let answer = 0;
    answer = Math.ceil(n / 7) 
    return answer;
}

// Math.ceil() 는 소수점 올림
// 1판 = 7조각, 1인 = 1조각

사람수보다 피자조각이 많더라도 1판 단위로 필요하기 때문에 소수점을 올리는 방식으로 접근해보았다.
처음에는 복잡하게 생각했는데 소수점을 올릴 수 있는Math.ceil() 를 이용하니 한줄로 간결하게 끝났다.

💡 알게된 내용

React의 다양한 Hook에 대해 배웠는데 우선 간략한 의미만 정리해보려고 한다.

React Hooks

useState

• useState 구성 요소에 상태 변수를 추가할 수 있는 가장 기본적인 React Hook이다.

// 기본적인 형태
const [state, setState] = useState(initialState);

함수형 업데이트

setState() 안에 수정할 값이 아닌 함수를 넣을 수 있다. 함수의 인자에 현재의 state를 가지고 올 수 있고, {}안에는 이 값을 변경하는 코드작성이 가능하다.

// 기존 사용했던 방식
setState(number + 1);
// 함수형 업데이트
setState(() => {});

setState((currentNumber) => {return currentNumber + 1 });

차이점은?

      <button
        onClick={() => {
          // 기존 업데이트 방법
          // 배치성으로 처리된다
          // 배치 업데이트

          // 세번 반복해도 숫자는 하나만 증가
          setNumber(number + 1);
          setNumber(number + 1);
          setNumber(number + 1);

          // 세번 반복하면 숫자가 3이 증가
          setNumber((currentNumber) => currentNumber + 1);
          setNumber((currentNumber) => currentNumber + 1);
          setNumber((currentNumber) => currentNumber + 1);
        }}
      >
        누르면 UP
      </button>

setNumber(number + 1);를 3번 호출해서 버튼 한번 클릭에 3씩 증가할것으로 보일 수 있지만 1씩 증가하게 된다.

이유는 일반 업데이트 방식은 동일한 state를 연속적으로 업데이트 할 경우 React는 setState를 각각 동기로 수행하지 않고 batch처리한다.

setState를 하나로 병합한 후 최종적으로 한번의 setState를 한다는 말!
반면에 함수형 업데이트 방식은 3번을 동시에 명령 내리면 명령들을 모아 순차적으로 각각 1번씩 실행시킨다.

useEffect

• useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
• component가 mount됐을 때(화면에 나타났을 때),component가 unmount됐을 때(화면에서 사라질 때), component가 update됐을 때(특정 props, state가 바뀔 때) 특정 작업을 처리할 수 있다.

// 기본적인 형태
useEffect(function(){실행하고 싶은 함수}, [의존성배열])
// 의존성 배열이 빈 배열이면 처음에 딱 한번만 실행되고 이후로는 실행되지 않음

---

다음에 정리할 React Hooks

• useRef
• useContext
• React.memo, useCallback, useMemo

---

✍🏻 회고

React에 입문하고 useState를 배우게 된 후 이제 겨우 이해하게 됐는데 더 다양한 Hook을 머리에 집어넣으려니 살짝 과부화가 오는것 같기도 하다.
그렇지만 이렇게 정리하면서 이해하다보니 조금 더 잘 흡수되는것 같고 내 스타일대로 적었으니 한번씩 헷갈릴때 다시 들춰보면 좋을 것 같다.

지금은 TIL방식으로 적어서 간결하게 정리해보았지만 추후에는 하나의 주제로 더 딥하게 파고들어봐야겠다.