리액트 기본개념 총정리 1편

JSX

javaScript + XML

• JavaScript에 HTML태그를 끼얹은 문법
• HTML태그 안에선 {}를 사용해서 JS 사용 가능
• 아래 title변수에 담은 h1태그는 리액트 엘리먼트라고 부

ex)
const count = 1;
const title = <h1>{count}번째 고양이</h1>

 

Babel

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

•  브라우저는 JSX 모름
•  Babel로 JSX => JS 통역

 

기본 리액트 코드 예시

빈 HTML공간에 React 때려박음

//html
<div id= 'app'></app>

//React
const target = document.querySelector('#app')
const myButton = <button>버튼</button>

ReactDOM.render(myButton.target)

 

컴포넌트(☆☆☆☆☆별이 5개!)

재사용 가능한 UI 조각

 

ex)

<Card emoji={dog} title='멍멍' />
<Card emoji={cat} title title="야옹" />

function Card(props){
	return(
    	<div>
        	{props.emoji}
            <h2>{props.title}</h2>
        </div>)
}

 

스타일링

리액트에 CSS 넣기

// CSS 클래스 : className
// 인라인 스타일: style={{스타일속성 : 스타일값}}
ex)

<div className="danger">위험</div>
<div style={{color:'red'}}>위험</div>

 

이벤트

• 기본적으로 JS 이벤트 목록이랑 같음
• 대신 onclick => onClick , onsubmit => onSubmit 같은 중간에 대문자로 쓰면됨

Ex)

function handleClick(event){
	console.log("클릭했습니다")
}

<button onClick={handleClick}>제출</button>

 

 

**vue를 했었기 때문에 기초적인 부분은 딱히 어려운 부분도없고 금방금방 넘어갔다

**남긴 이유는 글쎄... 나중에 진짜 호옥시까먹을까바???