JSX 문법

이소연's avatar
Aug 05, 2024
JSX 문법
Contents
component
-react문법
notion image
notion image
notion image
read only로 바뀐다고? write를 못하는 것으로 바뀐다고?
const는 그래서 초기화가 꼭 필요하다?
상수라는 것은 메모리가 read only가 되는 것. 읽기 전용 되는 메모리 주소가 된다.
 
기존
notion image
notion image
notion image
notion image
notion image
notion image
이렇게하면
너무 귀찮잖아
 
 
삭제는 필터링하여 삭제함.
notion image
notion image
삭제로 검색도 가능
 
 
notion image
notion image
notion image
notion image
notion image
…해서 바꾸고 싶은 것들만 적으면 됨
notion image
notion image
notion image
notion image
이거는 공부할 필요 x
 
 
리턴이 없어서 안됨.
notion image
expression
⇒ 리턴이 있어야 한다.
 
사망연산자? 표현식이 아니다?
import './App.css'; let num = 10; let list = [1,2,3,4]; function App() { return ( <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>{num}</div> {list.map((i) => ( <h1>{i}</h1> ))} </div> ); } export default App;
 
jsx문법 정리하기
notion image
import './App.css'; class Hello{ } function App() { return( <div> <h1>안녕</h1> <div className="box">박스</div> </div> ); } export default App;
notion image
notion image
컬렉션을 뿌리려면 map
컬렉션 추가 : 전개연산자를 사용
컬렉션 수정 : map 수정을 씀
응용) 전개연산자를 통해 키 값을 변경할 수 있다.
 
컴퍼넌트, 헤더를 만들어보쟈
파스칼_파일 : jsx문법
notion image
 

component

app.js
import './App.css'; import Header from './components/Header'; function App() { return( <div> <Header/> <h1>안녕</h1> <div className="box">박스</div> </div> ); } export default App;
app.css
h1 { color:red; } .box { border: 1px solid black; }
 
미디엄? 새로운 it 트랜드
잘 아는 블로거 팔로잉
notion image
notion image
notion image
notion image
notion image
 
 
실행
notion image
이걸로 갖다 써
notion image
Share article

Coding's note