728x90 300x250 SMALL Front-end312 함수형 컴포넌트와 this 함수형 컴포넌트는 this를 사용하지 않으며, 상태 관리와 생명주기 관리에서 React Hooks를 사용한다.this를 사용할 필요가 없으니 코드가 간결하고 직관적이다. 1. 클래스 컴포넌트와 의 차이점클래스 컴포넌트에서는 this가 컴포넌트의 인스턴스를 가리키며, 상태(state)와 메서드를 관리하기 위해 사용된다.하지만 함수형 컴포넌트는 인스턴스를 만들지 않고 단순히 함수를 호출하는 방식으로 작동하기 때문에 this를 사용할 필요가 없다. 2. React HooksReact의 Hooks를 사용하면 함수형 컴포넌트에서도 상태와 생명주기 기능을 구현할 수 있다.이를 통해 this없이도 클래스 컴포넌트의 기능을 대체할 수 있다. 함수형 컴포넌트에서는 this를 사용하지 않고 useRef를 사용해 동일.. 2024. 12. 20. 리액트 에서의 this 리액트 클래스 컴포넌트에서 THIS를 사용하기 위해 바인딩을 해야 하는 이유 단계적으로 살펴 보자 1. JavaScript에서 this는 호출 방식에 따라 결정 된다.자바스크립트에서 함수 내의 this는 함수 호출 방식에 따라 다르다.일반 함수 호출 : this는 undefined(strict mode)또는 전역 객체(window 또는 global) 참조메서드 호출 : 호출된 객체를 참조이벤트 핸들러 : 기본적으로 이벤트를 트리거한 DOM 요소를 참조리액트의 클래스 컴포넌트에서 메서드가 이벤트 핸들러로 전달될 때 메서드와 클래스 인스턴스 간의 연결이 끊어질 수 있다. 따라서 this가 undefined가 되어 오류가 발생할 수 있다. 2. 리액트 클래스 컴포넌트에서의 문제class MyCompo.. 2024. 12. 19. DOM 이벤트와 리액트 이벤트의 차이 1. DOM 이벤트HTML과 순수 JavaScript를 사용한 DOM 이벤트 Click Me (DOM) DOM에서는 이벤트를 처리할 함수를 문자열로 전달 2. React 이벤트 예제React에서 SyntheticEvent를 사용하는 방식 Click Me (React) 리액트에서는 이벤트 이름을 카멜 표기법을 사용하며 함수 그대로 전달 3. 주요 차이점특징DOM 이벤트React 이벤트바인딩 방식addEventListener로 DOM요소에 직접 이벤트 추가JSX 문법에서 onClick, onChange등으로 이벤트 추가이벤트 이름소문자(onclick, onchange)카멜 케이스(onClick, onChange)이벤트 관리이벤트가 전역적으로 등록, 수동으로 제거해야 함React가 이벤트를 내부적으로 .. 2024. 12. 16. JSX문법과 일반 함수 return 차이 JSX문법에서의 return과 일반 함수에서의 return은 약간 차이가 있다. JSX 문법에서의 return : JSX는 React 컴포넌트가 화면에 렌더링할 내용을 반환한다. 이 때 괄호 안에 JSX 요소를 반환하는 것은 유효한 문법이다.일반 함수에서의 return : 일반 함수에서는 데이터를 반환할 때 반드시 명시적인 값(배열, 객체, 문자열 등)을 반환해야 하며, 괄호로 묶는다고 해서 여러 값을 자동으로 패키징 하지 않는다. 일반 JavaScript 함수 예시const useCounter = () => { const count = 0; const increaseCount = () => console.log("Increase"); const decreaseCount = () => c.. 2024. 12. 15. 이전 1 ··· 8 9 10 11 12 13 14 ··· 78 다음 728x90 반응형 LIST