TIL - React ) 관련 문법정리

리액트 관련 문법정리 JSX

Self-Closing Tags

HTML 은 두가지 태그가 있다. 시작태그와 끝태그
그런데 img / input 같은 태그들은 하나의 태그만 가짐
이런 태그들은 self-closing tag라고 한다.
self-closing tag를 사용할 때 HTML에서는 슬래쉬를 붙여도 되고 안붙여도 된다
근데 !JSX에서는 slash를 무조건 포함시켜야 한다.
self-closing tag일지라도…

<br / >
이렇게 !

JS를 쓰고싶을 땐 {} 중괄호쓰기!

JSX element의 tags들 사이에 모든 코드들은 JSX로 읽힐 것. 보통 JS code로 읽히지 않음
JSX는 JS처럼 number를 더하지 않는다. -> 그저 텍스트처럼 HTML같이 읽는다.
JSX 태그들 사이에 있지만 js로 읽게 하려면 { } 중괄호 써야 함 !

ex.

<h1> {2 +3} </h1>

이렇게 써줘야지 !
js처럼 계산이 됨!

그러면 5 이렇게 뜬다!

*밖에서 호출해준 변수를 변수안에 또 사용 가능
{ } 중괄호안에 넣고…
js 로 만들어준 변수

Ex.

const name = ‘hailey’;
const greeting = <p> Hello, {name} </p>

출력 : Hello, hailey 

변수로 attribute 설정하기

변수로 어떤 값을 js로 설정해놓고 jsx 에
해당 태그의 속성을 width = {변수이름} 이렇게 넣을 수 있다 !

Ex.

const sideLength = “200px”;
const panda = (
 <img
    src=”images/panda.jpg”
    alt=”panda”
    height={sideLength}
    width={sideLength} />
);

-> img의 height / width 라는 attribute 를 {} 변수로 설정

React 조건문

if ( 조건 ) {
변수 = (
태그~

)
}

js 에서 x ? y : z
→ x가 true이면 y
false 이면 z 이다.

const peopleLis = people.map(person => 
<li>{person}</li>

ReatDOM.render(
<ul>{peopleLis}</ul>,
document.getElementById(‘app’)
)

JSX 문법을 안쓰면 내용이 이렇게 길어진다.

  <JS>
		const h1 = <h1>Hello world</h1>

		const h1 = React.createElement(
		“h1”,
		null,
		“Hello, world”
		);

<JSX>
	const h1 = <h1>Hello world</h1>;