[Nomad] 실전형 리액트 Hooks 10개 1

웹/React.js 2024. 1. 18. 22:58

노마드코더 강의 7일차.

심심해서 만들어보는 React JS 강의 수강 2번째

 1. ReactJS로 영화 웹 서비스 만들기 (완료)

 2. 실전형 리액트 Hooks 10개

     > 작업은 Code SandBox에서 진행! (온라인에서 코딩할 수 있는 템플릿 제공)

        - https://codesandbox.io/

 

CodeSandbox: Instant Cloud Development Environments

CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.

codesandbox.io

     > useState

        - useInput

        - useTabs

     > useEffect

        - useTitle

        -  usePageLeave

        -  useClick

        -  useFadeIn

        -  useFullscreen

        -  useHover

        -  useNetwork

        -  useNotification

        -  useScroll

        -  usePreventLeave

        -  useConfirm

        -  useAxios

     > 강의 제목은 hook 10개인데 10개 이상을 배우네(?)

     > 공식 사이트 : https://react.dev/reference/react/hooks

 

Built-in React Hooks – React

The library for web and native user interfaces

react.dev

시작에 앞서... 리액트 훅이란?
- 리액트 훅(React Hook)은 리액트 버전 16.8에 도입된 개념으로, 함수형 컴포넌트에서 상태 관리를 할 수 있도록 해주는 함수입니다. 
- 리액트 훅은 리액트 클래스형 컴포넌트에서 사용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 해줍니다. 
- 리액트 훅은 함수 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수입니다. 
- 리액트 훅은 기본적으로 UI의 상태 관련 동작 및 부수 작용(side effects)을 캡슐화하는 가장 간단한 방법입니다. 
- 리액트 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. 

 

온라인 환경 세팅 후 실제 hook 개발 진행!