JSX표현식이란?
리엑트에서 사용하는 자바스크립트 확장문법.
바벨이라는 확장프로그램이 JSX표현식을 기본문법으로 바꿔줌.
JSX표현식의 장점
- HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
- HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.
JSX표현식의 특징
class 표현
JSX 표현식에서는 HTML 처럼 class=”” 이 아니라 className 이라고 써야함. 알아서 렌더링 해줌.
const hello = <p className="helloWorld">Hello World</p>
self closing tag
JSX 표현식에서는 <br> <img> 이런 닫힘테그가 없는것들은 항상 <br /> <img /> 이런식으로 닫아줘야함.
const img = <img src="이미지.png" />,
<br />테그가 중첩된경우
()소괄호를 이용해 감싸주어야함.
const hi = (<div className="helloBox">
<p>안뇽~</p>
</div>)계산식 표현
계산식을 표현하고싶을때는 테그안에 중괄호를 넣어주면된다! <h1>{2 + 3}</h1>
이렇게 중괄호를 넣어주면 자바스크립트와 똑같이 변수랑 상수 및 함수를 호출할수있다.
const hello = <p>hello</p>
let printHello = <h1>{hello}</h1>조건문 표현
JSX 표현식에는 if…else 문이 일반적으로 쓰이지 않음.
기본적으로 삼항 연산자가 쓰임.
삼항식을 태그안에서 실행하고 싶으면 [] 대괄호로 묶어주어야함
const img = <img src={객체명.[조건 ? '참일경우 객체의 키값'
: '거짓일경우 객체의 키값']}>중괄호로 묶어서 조건에 맞을경우만 뒤에 내용이 표시되도록 할수도 있음. &&을 써서 if else 문을 표현가능
{ 상수 === true && <p>Hello World</p> }
상수값이 true일때만 헬로월드가 나옴.JSX 표현식으로 렌더링하기
기본 렌더링 방법 = ReactDOM.createRoot(JSX 표현식(JSX 표현식으로 선언한 함수명도 가능), document.getElementById(’표현식을 넣고싶은 부분의 아이디’));React 맵 표현식
함수내에서 .map 도 사용가능 .
let name = [익현,원익,정용];
let nameLi = name.map((person,i) => {
<li key={'name_' + i}>{person}</li>
}
ReactDOM.createRoot(
<ul>{nameLi}</ul>,
document.getElementById('넣고싶은 아이디')
);
출력:
<ul>
<li key="name_1">익현<li>
<li key="name_2">원익<li>
<li key="name_3">정용<li>
</ul>React.createElement 이용하기
const 상수명 = React.createElement() 를 사용하여 JSX표현식 없이 만들수있다.
표현식 = React.createElement(”태그명” , “null” , “넣고싶은내용”);
null의 의미 매개변수임. 아무것도 전달 안한다는 의미.
const name = React.createElement(
"h1",
null,
'Hello, world'
);주의 할점
- 똑같은 부분을 두번 렌더링하면 첫번째 것만 렌더링됨.
let name = [익현,원익,정용];
let nameLi = name.map((person,i) => {
<li key={'name_' + i}>{person}</li>
}
ReactDOM.createRoot(
<ul>{nameLi}</ul>,
document.getElementById('넣고싶은 아이디')
);
ReactDOM.createRoot(
<ul>{nameLi}</ul>,
document.getElementById('넣고싶은 아이디')
);
똑같은거를 두번 쓰면 위에있는것만 렌더링되고 두번째거는 안됨!!리액트 가져오기
<HTML> 과 똑같다고 생각하면됨
import React from ‘파일명’
import ReactDOM from ‘파일명-dom’
React 와 ReactDOM의 차이
React
React란, User 인터페이스를 만들기위한 자바스크립트 라이브러리!
React는 컴포넌트와 props, state, context 를 관리하며, 이들의 변경사항을 파악하고 변경사항을 ReactDOM에 전달함.
ReactDOM
ReactDOM이란, 브라우저의 DOM에서 React를 사용하기위한 라이브러리!!
ReactDOM은 웹 인터페이스로 웹과 직접적인 연관이 있으며 실제 HTML 요소를 화면에 불러오는 역할.
React로 부터 받은 변경사항과 실제 브라우저 DOM을 비교하여 차이점을 확인하고 실제 DOM을 조작함.
