JSX

javascript + XML

1. javaScript에 HTML태그를 끼얹은 문법

• HTML 태그 안에선 중괄호 ({})를 사용해서 JS를 쓸 수 있다.

  ex) const count = 1;

   const title = <h1>{count}번째 고양이</h1>

위 title변수에 담은 h1태그는 리액트 엘리먼트 라고 부른다.

---

BABEL

최신 문법을 브라우저가 이해할 수 있는 javascript로 통역

• 브라우저는 JSX를 이해하지 못한다.

• Babel이라는 통역사로 JSX-> JavaScript

---

리액트 코드 브라우저에 그리기

빈 HTML 공간에 React 넣기

html-

react

const target = document.querySelector('')

const myButton = 버튼

ReactDOM.render(myButton, target)

---

컴포넌트

여기저기 재사용 가능한 UI 코드 조각

function Card(props){

return (

 <div>

 {props.emoji}<h2>{props.title}</h2>

</div>

)

}

prop- 속성

---

스타일링 리액트에 css 넣기

1. css클래스: className

ex)

2. 인라인 스타일링: style={{스타일속성: 스타일값}}

ex) <div style={{color: 'red'}}>위험

---

이벤트

사용자 이벤트(클릭, 스크롤 등) 다루기

• 일반 자바스크립트 이벤트 목록과 동일하지만 중간을 대문자로 쓰면된다

ex) onclick -> onClick

ex) onsubmit -> onSubmit

function handleClick(event) {

console.log("클릭했습니다")

}

제출