리액트를 다루는 기술2 [리액트를 다루는 기술] 4장 이벤트 4.1 리액트의 이벤트 시스템 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 리액트의 이벤트 시스템은 HTML 이벤트와 인터페이스가 동하기 때문에 사용법이 비슷하다. 1. 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성한다. onclick -> onClick onkeyup -> onKeyUp 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 화살표 함수로 바로 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다. DOM 요소에만 이벤트를 설정할 수 있다. div, button 등의 DOM 요.. 2022. 3. 12. [리액트를 다루는 기술] 2장 JSX function App() { return ( Edit src/App.js and save to reload. Learn React ); } function 키워드를 사용하여 만든 컴포넌트를 함수형 컴포넌트라고 부른다. 프로젝트에서 컴포넌트를 *렌더링하면 함수에서 반환하고 있는 내용을 나타낸다. 함수에서 반환하는 내용은 HTML으로 작성한 것처럼 보이지만 JSX로 이루어진 코드이다. *렌더링: '보여 준다'는 것을 의미한다. 2.2 JSX란? 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다. JSX로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX 코드의 변환 function App() { return ( Hell.. 2022. 3. 7. 이전 1 다음