리액트 JSX(2)
-
[React] 이벤트 핸들링/ 함수를 바인딩(전달)하는 올바른 방법 feat. 이벤트 객체, 함수 커링
이벤트 핸들링 리액트에서 이벤트 핸들링은 React 컴포넌트에서 UI 요소에서 발생하는 이벤트(예: 클릭, 마우스 오버, 키 입력 등)를 처리하는 것을 의미한다. 이벤트에 함수를 바인딩한다는 것은 UI 요소에 onEvent 속성으로 함수(이벤트 핸들러)를 전달하는 것을 말한다. const a = () => { console.log("a 함수가 호출됨"); }; const App = () => { return ( 1번 2번 a()}>3번 ); }; 각각의 버튼은 어떻게 작동할까? 비슷해보이지만 다른 결과를 가져올 수 있는데 그 차이점을 알아보자. 이벤트에 함수 바인딩하기 1. 1번 이 경우 함수의 호출 결과가 적용이 되고 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 console.log가 실행이 ..
2023.02.12 -
[React] 리액트 개요, node.js와 npm, 렌더링Rendering, JSX
React 시작하기 개요 목적 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다. virtual DOM 사용하여 js 객체를 구성, 실제 DOM의 가벼운 사본 느낌 업데이트 처리 간결성 프레임워크 X 라이브러리 O → 뷰 이외의 기능은 다른 라이브러리 사용 ex) react-router Node.js, npm 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 리액트는 웹브라우저에서 실행되어 직접 연관은 없으나, 프로젝트 개발에 필요한 주요도구가 Node.js를 사용 ECMAScript 6를 호환시켜 주는 바벨(babel) 모듈화된 코드를 한 파일로 합치고(번들..
2022.06.02