Dev. MK Dev. MK

리액트 hook

• 컴포넌트(4) 리액트 훅(react hook)사용 - useEffect

  React 리액트 2023. 9. 6. 15:27

  useEffect란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - useEffect 이후에(마운트 해제되는 때) clean-up (정리)를 실행할 수 있다. 기본형태 // 첫 번째 인자로는 effect 함수, 두 번째 인자로는 dependency array useEffect(() => { console.log('useEffect가 실행되면서 렌더링.') // effect 이후에 어떻게 정리(clean-up)할 것인지 표시 return () => { .... // useEffect 종료되면 실행. } }, []) // 빈 배열을 입력하는 경우 렌더링 될 때 마다 실행 App.js import Main from './component/Main'; import './App..

  Read More
• 컴포넌트(3) 리액트 훅(react hook)사용 - useState

  React 리액트 2023. 9. 5. 16:37

  리액트 훅 (react hook) 이란? - 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 [연동(hook into)]할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해준다. state란? - 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용하고 동적인 값을 상태(state)라고 부른다. useState란? - 리액트의 훅중 하나이며 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수다. 일반적으로 함수 내의 변수는 함수가 종료되면 사라지지만, useState 를 사용해 변수의 ..

  Read More