JSX

gyomni·2022년 2월 24일
0

Week I Learned

목록 보기
10/20
post-thumbnail

JSX

  • 리엑트에서 컴포넌트 생김새를 정의할 때 사용하는 문법.
  • 얼핏 보면 html처럼 생겼지만, 사실은 javascript이다.

-> babel이라는 도구를 사용해서 xml형태의 코드가 javascript로 변환된다.

규칙

1. 태그는 열었으면 꼭 닫혀 있어야함.
-> Self closing tag : <input/>

2. 두개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야함.
-> 감싸기 애매한 상황 (의미 없는 태그로 인해 스타일 꼬임 등등..) : 프래그먼트(<> </>) 사용.
(브라우저 상에서는 태그 안보임)

<>
	<Hello />
	<div>bye</div>
</>

3. JSX내부에서 javascript 값 사용 방법.
-> { }로 감싸기.

4. react, jsx에서 styleclassName을 설정 방법.

  • Style
    -> 객체를 만들어서 사용
    -> background-color과 같은 - 사용 대신, backgroundColor처럼 카멜표기법으로 표기
function App(){
			const name ='react';
const style = {
				backgroundColor : 'black',
				color: aqua,
			     };
			};
			return(
			<>
			     <Hello/>
			     <div style = {style}>{name}</div>
			</>
			)
  • className
    -> html에서는 class=" "으로 하지만, reactjs에선 className=" "으로 사용.
profile
Front-end developer 👩‍💻✍

0개의 댓글