728x90 반응형 hook3 [REACT] HOOK - useEffect useEffect 사이드 이펙트를 수행하기 위한 훅 사이드 이펙트는 사전적으로 부작용이라는 뜻으로, 리액트에서 말하는 사이드 이펙트는 그냥 효과 혹은 영향을 뜻한다. 예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 랜더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 하는 작업들 useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate() 그리고 componentWillUnmount() 와 동일한 기능을 하나로 통합하여 제공한다. 그래서 useEffect() 훅만으로 생명 주기 .. 2022. 12. 23. [REACT] HOOK - useState useState 가장 대표적이고 많이 사용되는 HOOK state를 사용하기 위한 훅 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶다면 useState() 훅을 사용 함 형식 const [변수명, set함수명] = useState(초기값); EX import React, { useState } from 'react'; function Counter(props){ var count = 0; return( 총 {count}번 클릭했습니다. count++}>클릭 ) } export default Counter; Counter 컴포넌트는 버튼을 클릭하면 하나씩 증가 하지만 재랜더링이 일어나지 않아 새로운 카운트 값이 화면에 표시되지 않는다. 이런 경.. 2022. 12. 23. [REACT] HOOK HOOK이란 컴포넌트에는 클래스 컴포넌트와 함수 컴포넌트가 있다. 클래스 컴포넌트에는 state라는 랜더링에 필요한 데이터를 관리한다. 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하지만, 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다. 따라서 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 HOOK HOOK을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현 가능하다. HOOK은 갈고리라는 뜻으로 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미 한다. HOOK의 이름은 모두 use로 시작한다. HOOK의 종류 useState 가장 대표적이고 많.. 2022. 12. 23. 이전 1 다음 728x90 반응형
