21일차 리액트 입문주차 (JSX)

강의 듣다보니 html문법?과 리액트 문법이 섞여 내 머릿속은 아수라장이 되었다..
강의를 계속 듣다보면 문제점이 앞에 들었던 강의 내용을 까맣게 잊어먹는다는거다ㅠㅠㅠㅠ
그래서 오늘도 정리해보는 리액트 입문 강의 내용!!

오늘의 study 목표!!!
리액트 입문 주차 강의 완강!!하고 싶었는데 아쉽게도.. 마지막 강의를 남겨두었다..

🍎 JSX(JavaScript + XML)

JavaScript를 확장한 문법
JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

const element = <h1>Hello, world!</h1>;

엘리먼트는 단순히 화면에 그려지는 HTML적 요소라고 생각하면 된다...

리액트에서 뷰 그리는 법!
JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.


그럼 JSX에서 쓰는 < div >~~< /div >는 DOM 요소일까?
정확히는 React 요소!!
리액트 돔을 구성하는 건 리액트 요소!
돔을 구성하는 건 돔 요소!

JSX
1. 태그는 꼭 닫아주기
2. 무조건 1개의 엘리먼트를 반환하기
3. JSX에서 javascript 값을 가져오려면? 중괄호를 쓴다!
값을 가져올 때 분만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 쓸 때도 이용할 수 있다.
4. 태그 내에서 클래스 명을 정해줄 땐 속성값을 class 대신 className으로 사용
5. 인라인으로 style 주기

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

중괄호를 두 번 쓰는 이유는 객체도 자바스크립트이기 때문.

스타일 객체를 변수로 만들고 사용할 수 있음.

function App(){
	const styles ={
    	color: 'orange',
        fontSize:'20px'
    };
    
    return (
    	<div className="App">
        	<p style={styles}>orange</p>
        </div>
    );
}