728x90 반응형 리액트 훅3 [React] 리액트 훅 - 커스텀 훅(Custom Hook) 📌 사용자 정의 훅(커스텀 훅)React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재 사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 내장 훅(useState, useEffect 등)을 이용하여 구현된다. JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 .. 2024. 9. 2. [React] 리액트 훅 - useEffect(조건부 실행, 자원 정리) 📌 useEffect 훅리액트 컴포넌트가 렌더링된 후에 비동기적으로 특정 작업을 처리하는 리액트 훅입니다.컴포넌트가 mount, update, unmount '될 때' 실행된다.useEffect 훅은 컴포넌트의 렌더링과 동시에 실행되지 않고, 렌더링이 완료된 후에 작업을 수행합니다.🤔 생명주기(Lifecycle)생명주기는 컴포넌트가 다음과 같은 단계들을 거치는 것을 의미Mounting (마운트) : 컴포넌트가 처음으로 DOM 화면에 추가되는 시점Updating (업데이트) : 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링 되는 시점Unmounting (언마운트) : 컴포넌트가 DOM 화면에서 제거되는 시점 🤔 클래스형 컴포넌트의 생명주기 메서드클래스형 컴포넌트에서는 다음과 .. 2024. 8. 30. [React] 리액트 이벤트 처리 - 핸들러, 컴포넌트 상태(useState), 단방향 바인딩 📌 이벤트 핸들링 / 이벤트 핸들러이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이벤트 핸들러 : 이벤트를 처리하는 함수 (onClick, onSubmit 등과 같은 이벤트 프로퍼티에 함수 형태로 전달)📌 이벤트 핸들러 (단방향 데이터 흐름)컴포넌트에서 특정 DOM 요소에 이벤트가 동작하도록 하려면, 해당 DOM 요소에 이벤트 핸들러를 설정해야 합니다. HTML 엘리먼트의 이벤트는 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다.예를 들어, 클릭 이벤트는 onClick으로 설정합니다. 리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐릅니다. 이벤트 핸들러도 동일한 원칙에 따라 작동하며, 부모 컴포넌트는 자식 컴포넌트에 이벤트 핸들러 함수를 전달하.. 2024. 8. 26. 이전 1 다음 728x90 반응형
