2차 프로젝트 코드 중에 가장 기억하고 싶은 코드를 따로 기록
몰라서 공부했던 개념을 다시 정리

useRef

useRef란?

자바스크리브에서 특정 DOM을 선택해야할 때는 DOM Selector를 사용한다.
리액트에서도 특정 요소의 크기를 가져오거나 포커스를 설정하는 등의 특정 DOM을 선택해야할 상황이 있다.
함수형 컴포넌트에서는 이때 사용하는 것이 useRef()이다.
Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.

ref는 변경 가능한 값을 담고 있는 상자로서, 객체이다. 이때 ref 객체 안의 값은 re-render와 상관없이 유지되는 값이다. 값이 변경되더라도 render를 발생시키지 않고 render 되더라도 값이 유지되는 특징을 가진다는 것이다.

참고:
https://xiubindev.tistory.com/98
https://velog.io/@juno7803/React-useRef-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

나의 코드예제

이번 프로젝트에서 성인,소아,유아 각각 인원수를 증가시켰을 때 이를 더해서 총 몇 명 이렇게 뜨도록 해주기위해서 useRef를 사용하였다.

PassengerCount.js 에서 성인,소아,유아 각각 초기값을 0 으로하는 useRef 객체를 생성해준다. 이를 Counter.js 로 넘겨주어서amount.current[item]++를 통해 값을 증가시켜주었다. 이때 item 역시 PassengerCount에서 넘겨받은 것인데 성인,소아,유아 를 의미한다. 이를 통해 각각의 value값을 증가시킬 수 있는 것이다.
그후 PassengerCount에서 current를 통해 값에 접근해서object.values로 value값을 가져와서 reduce를 통해 값이 1씩 증가될 때마다 값이 축적되도록 만들어주었다.

useReducer

useReducer란?

const [ state, dispatch ] = useReducer(reducer, initialArg, init);

(state, action) => newState 형태로 reducer을 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다. state는 우리가 앞으로 컴포넌트에서 사용할 수 있는 상태를 가리키게 되고, dispatch는 액션을 발생시키는 함수이다.

나의 코드예제

onClick 했을 때 증감의 함수에 dispatch를 놓아 INCREASE, DECREASE 하는 액션을 주도록 해주었고
INCREASE 할때 1씩 state가 증가하고 DECREASE 시에 state가 1씩 감소하도록 해주었다.