함수형컴포넌트2 [ React ] 클래스 컴포넌트와 함수형 컴포넌트의 이벤트 핸들러 비교 이번에는 바인딩이 필요한 클래스 컴포넌트의 이벤트 핸들러를 다루는 방식, 바인딩 없이 클래스 필드 문법을 사용해 클래스 컴포넌트를 사용하는 방식, 현재 널리 쓰이는 함수형 컴포넌트의 이벤트 핸들러를 다루는 방식에 대해서 알아보자. 클래스 컴포넌트의 이벤트 핸들러 클래스 컴포넌트는 이벤트 핸들러를 정의하고 사용할 때, 반드시 bind() 메서드를 사용해야 한다. bind()메서드를 사용해서 이벤트 핸들러와 컴포넌트 인스턴스를 바인딩 해줘야 하는 이유는 클래스 컴포넌트 내부에서 함수가 호출될 때 함수 내부의 this는 컴포넌트 자체를 가리키지 않기 때문이다. 컴포넌트 인스턴스가 아니라 엘리먼트를 가리키게 될 수 있다는 것이다. import React from 'react'; export default cla.. 2023. 8. 28. [ React ] 리액트 함수형 컴포넌트의 훅 Hook에 대해서 ( useState, useEffect, useContext, useMemo, useCallback, useRef ) 훅Hook이라고? 훅Hook은 우리가 만화영화에서 보던 후크선장의 그 훅Hook이 맞다. 갈고리를 사용해 함수형 컴포넌트에서 상태와 생명주기 기능을 특정한 시점에서 코드를 연결하거나 걸어두는 것처럼 사용해서 쉽게 상태 관리와 라이프사이클 기능을 사용할 수 있도록 도와준다. (예를 들어, useState 같은 경우 컴포넌트의 상태를 관리를 위한 훅인데 상태를 hook하고 끌어올려 컴포넌트에 사용할 수 있게 해준다.) 훅Hook이 왜 필요할까? 클래스 컴포넌트와의 비교 - 클래스 컴포넌트는 생명주기 메서드가 분산되어 있고, 상태관리, 생명주기 관련 로직이 복잡하게 얽혀있을 수 있다. 훅은 상태와 관련된 로직을 더 작은 단위로 분리해 관리하고 컴포넌트 구조를 간결하게 해준다. - 클래스 컴포넌트에서는 상태 로.. 2023. 8. 10. 이전 1 다음
