728x90 300x250 SMALL 2024/1231 클래스 필드 문법과 화살표 함수의 차이 클래스 필드 문법에서 메서드를 정의할 때, 내부적으로 화살표 함수와 유사하게 동작하지만, 둘 사이에는 약간의 차이가 있다. 1. 정의 위치화살표 함수는 클래스 내부 메서드로 정의되더라도, 명시적으로 선언된 함수 이다.클래스 필드 문법은 메서드를 클래스의 속성으로 정의한다.예시 : 화살표 함수class MyComponent extends React.Component { constructor(props) { super(props); this.handleClick = () => { console.log(this.state.count); // 화살표 함수는 this가 자동 고정 }; }} 예시 : 클래스 필드 문법class MyComponent extends React.Compone.. 2024. 12. 23. 클래스 필드 문법이란? 클래스 필드 문법(Class Fields Syntax)ES6 이후 추가된 JavaScript의 문법으로, 클래스 안에서 속성이나 메서드를 정의할 때 사용하는 방식이다.기존 방식보다 간결하고 직관적으로 작성할 수 있다. 클래스 필드 문법 예시class MyComponent extends React.Component { // 클래스 필드 문법으로 속성 정의 state = { count: 0, }; // 클래스 필드 문법으로 메서드 정의 handleClick = () => { console.log(this.state.count); }; render() { return Click Me; }} 클래스 필드 문법의 특징1. 문법 간소화기존 방식에서는 constructor를 사용해 st.. 2024. 12. 22. 리액트에서 이벤트 처리하기 리액트에서 이벤트는 DOM 요소에 이벤트 핸들러를 등록해 처리한다.HTML에서 이벤트 속성에 문자열을 전달하는 방식과 달리, 리액트에서는 JSX에 이벤트 핸들러로 참조를 전달한다. function App() { const handleClick = () => { console.log("버튼이 클릭되었습니다!"); }; return 클릭;} 위 코드에서 onClick 속성은 소문자가 아닌 camelCase로 작성해야 하며, 함수는 문자열이 아닌 함수 참조를 전달해야 한다. 2024. 12. 21. 함수형 컴포넌트와 this 함수형 컴포넌트는 this를 사용하지 않으며, 상태 관리와 생명주기 관리에서 React Hooks를 사용한다.this를 사용할 필요가 없으니 코드가 간결하고 직관적이다. 1. 클래스 컴포넌트와 의 차이점클래스 컴포넌트에서는 this가 컴포넌트의 인스턴스를 가리키며, 상태(state)와 메서드를 관리하기 위해 사용된다.하지만 함수형 컴포넌트는 인스턴스를 만들지 않고 단순히 함수를 호출하는 방식으로 작동하기 때문에 this를 사용할 필요가 없다. 2. React HooksReact의 Hooks를 사용하면 함수형 컴포넌트에서도 상태와 생명주기 기능을 구현할 수 있다.이를 통해 this없이도 클래스 컴포넌트의 기능을 대체할 수 있다. 함수형 컴포넌트에서는 this를 사용하지 않고 useRef를 사용해 동일.. 2024. 12. 20. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형 LIST