react

세가지 장점

• 선언형이다 // HTML/CSS/JS에 나눠서 작성하지 않고, JSX를 활용한 선언형 프로그래밍을 지향한다.
• 컴포넌트 기반이다
  하나의 기능구현을 위해 여러종류의 코드를 묶어둔 '컴포넌트'를 기반으로 개발
  독립적이고 재사용 가능하기 때문에
• 범용성

JSX 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함

<tag>
  <p>
  ...
  </p>
</tag>

• 엘리먼트 클라스는 className = "" 으로 표기 ( class = 는 js의 class로 인식)

• javascript 표현식 사용시 중괄호 이용 ( 중괄호가 없으면 텍스트로 인식 )

• 사용자 정의 컴포넌트는 대문자로 시작 hi(x) Hi(o)

• 조건부 렌더링은 삼항연산자 사용 state ? true : false

• 여러 개의 엘리먼트를 표시할때 map()함수를 이용( 반드시 key속성을 넣어야 함 )

const content = people.map((person) =>
	<div key={person.id}>
  		<h1>{person.name}</h1>
		<p>{person.age}</p>
	</div>	                          
)

JSX에서는 inner style을 추가할때

<div style={{backgroundColor: 'rgb(0,0,0)'}} +//형식으로 추가해준다