Hooks 사용해보기 실습 (useState, useEffect Hook 사용, Custom hook 만들기) [처음 만난 리액트 #23]
7강. Hooks
useState, useEffect Hook을 사용해보고, Custom hook 만들어보기 실습 💻
useCounter() Custom Hook 만들기
1. VS Code로 create-react-app을 이용해 만든 프로젝트 my-app 열기
2. chapter_07이라는 이름의 폴더 생성
3. 만든 폴더에 useCounter.jsx라는 이름의 파일을 만들고 useCounter라는 이름의 리액트 훅을 만듦
useCounter 훅은 초기 counter 값을 파라미터로 받아서 count 라는 이름의 state를 생성하여 값을 제공하고, count 증가 및 감소를 편리하게 할 수 있도록 함수를 제공
-> useCounter 훅을 사용하면 어떤 함수 컴포넌트에서든지 count 기능을 쉽게 사용할 수 있음
Accommodate 컴포넌트 만들기
useCounter 훅을 사용하는 Accommodate라는 함수 컴포넌트
이 컴포넌트를 사람을 수용하는 시설에서 사용한다고 가정
1. Accommodate.jsx라는 이름의 파일을 새로 만들고 Accommodate라는 이름의 리액트 함수 컴포넌트를 만든다
Accommodate 컴포넌트는 useCounter 훅을 사용하여 count를 관리
최대 카운트 개수는 MAX_CAPACITY라는 이름의 상수로 정의되어 있고, 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능
● useEffect 훅의 작동 방식을 확인하기 위해 일부러 두 개의 useEffect 훅을 사용
● 하나는 의존성 배열이 없는 형태, 하나는 의존성 배열이 있는 형태
- 의존성 배열이 없는 useEffect 훅은 컴포넌트가 마운트 된 직후에 호출되며, 이후 컴포넌트가 업데이트될 때 마다 호출됨
- 의존성 배열이 있는 useEffect 훅은 컴포넌트가 마운트 된 직후에 호출되며, 이후 count 값이 바뀔 때 마다 호출되는데,
이때 용량이 가득 찼는지 아닌지의 상태를 isFull이라는 state에 저장
2. 만든 Accommodate 컴포넌트를 화면에 렌더링하기 위해 index.js 수정
방금 새로 만든 Accomodate 컴포넌트를 import 해서 React.Dom.render 함수에 넣어주는 코드
3. 리액트 애플리케이션 실행
VS Code의 상단 메뉴에서 Terminal > New Terminal 을 눌러 새로운 터미널 실행
npm start 명령어 입력
웹브라우저에 새 창이 열리면서 localhost 3000번 포트로 접속
로그를 보기 위해 크롬 개발자도구 > Console 탭 확인
처음에 출력된 로그를 보면, 우리가 사용한 두 개의 useEffect() 훅이 호출된 것을 볼 수 있습니다.
입장 버튼을 눌러보면 마찬가지로 두 개의 useEffect() 훅이 호출되는데, count 값은 1 증가한 것을 볼 수 있습니다
● 의존성 배열이 없는 useEffect 훅이 호출된 이유
: 컴포넌트가 업데이트 되었기 때문
● 의존성 배열이 있는 useEffect 훅이 호출된 이유
: count 값이 변경되었기 때문
정원이 가득 찰 때까지 입장 버튼을 계속 눌러보면,
isFull의 값이 true가 되기 때문에 입장 버튼이 비활성화되어 더 이상 누를 수 없게 되고 빨간 글씨로 경고 문구가 출력
로그를 보면 count 값이 10이 된 이후에는 더 이상 변하지 않기 때문에 count를 의존성 배열에 갖고 있는 useEffect 훅은 호출되지 않는 것을 볼 수 있습니다.
퇴장 버튼을 눌러 수용 인원을 줄여보면,
두 개의 useEffect 훅이 호출되고 count 값이 줄어듭니다.
수용 인원이 0이 될 때 까지 퇴장 버튼을 눌러주면
useCounter 훅에서 Math.max 함수를 사용하여 count 값이 0 이하로 내려갈 수 없도록 만들어 놓았기 때문에 값이 0이 되면 더 이상 useEffect() 훅도 호출되지 않습니다.