본문 바로가기

WEB32

[React] JSX ❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다. JSX란 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김 JSX를 사용하면,,, 편하게 렌더링 가능 HTML코드와 유사해서 보기 쉽고, 익숙 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음 예시) import React from 'react'; function App(){ return( 리액트 안녕! 잘 작동하니? ); } export default App; 위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다. 이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유? 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 조건부 연산자 JSX 내부의 자바스크립트 .. 2020. 12. 23.

[React] 이벤트 핸들링 EVENT = 특정 '사건' 버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건 HTML Activate Lasers HTML onclick이 소문자로 이루어져있음 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음 React Activate Lasers React onClick의 C가 HTML과 다르게 대문자로 나타냄 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달 Camel Case 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함 리액트의 함수 핸들링에서 사용됨 Event handler = Event Listener 이벤트를 처리하는 함수 어떤 사건이 발생하면, 사건을 처리하는 역할 이벤트 핸들링 공식 문서 쉬운 예시(onClick 사용) JS) onClick .. 2020. 11. 30.

이전 1 ··· 3 4 5 6 다음

티스토리툴바