복습
JSX
✅ JavaScript를 확장한 XML 형식의 표현 방법, 기술을 분리하지 않고 섞어서 쓰는 컴포넌트!
- JSX
- html, JavaScript
- JavaScript를 확장한 XML 형식의 표현 방법 - html vs JSX(엄밀히 말하면 자바스크립트)
- class / className
- onclick / onClick
둘의 차이?JSX는 일반적인 HTML 태그와 유사하지만, React의 컴포넌트와 관련된 추가적인 기능을 지원
- 프론트 또한 관심사의 분리가 있음 -> 프레임워크 존재
- 태그가 비어있다면 XML처럼
/>를 이용해 바로 닫아주기 - JSX에 사용자 입력을 삽입하는 것은 안전 = > React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지
강의 내용
React 부분 랜더링 처리
부분랜더링 하려면? (여러 기준처리 가능해야함)
- 문자열 대소문자에 따라 처리 : String.prototype.charAt()
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charAt
const Message = ({text}) => {
if(text.charAt(0)===text.charAt(0).toUpperCase()){ //둘 다 대문자 -> h1
return <h1>{text}</h1>
}else{
return <h3>{text}</h3>
}
}
const element = (
<>
<Message text="Text"/>
<Message text="text"/>
</>
)- 홀수, 짝수 여부에 따라 처리 :
const Number = ({num}) => {
{
return num % 2 === 0 ? (
<h1>짝수 {num} </h1>
):(
<h3>홀수 {num} </h3>
)}
}- 선택여부에 따라 처리
- `
const Number = ({item, selected}) => {
{
return selected ? (
<h1>{item} </h1>
):(
<h3>{item} </h3>
)}
}
const element = (
<>
{
[1,2,3,4,5].map(item => (
<Number item={item} selected={ item === 3} />
))
}
</>
)React useState()
데이터 처리해보기
- 무엇이 보이나? '키 : 값'의 형식
const [items, setItems] = React.useState([
{ id: 1, title: "자바의정석", publish: "에이콘", count: 0 },
{ id: 2, title: "리액트정석", publish: "에이콘", count: 0 },
{ id: 3, title: "오라클정석", publish: "에이콘", count: 0 },
]);-
로그보기
-
깊이에 따라 다르게 사용 console.log / console.dir(바로 유형 보임)
-
좋아요 처리하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.querySelector("#root")
const Like = () =>{
const [title, setTitle] = React.useState("자바의 정석")
const [like, setLike] = React.useState(0);
const [disLike, setDisLike] = React.useState(0);
const increase = () => {
setLike(like + 1);
}
const decrease = () => {
setLike(like - 1);
}
return(
<>
<h3>{title}</h3>
<span>좋아요❤️ : {like}</span>
<span onClick={increase}> ( 👍🏻 </span>
<span onClick={decrease}> / 👎🏻 )</span>
</>
)
}
ReactDOM.createRoot(rootElement).render(<Like />);
</script>
</body>
</html>
