WIL 6주차

[리액트]

 

JSX문법

1. class 대신 className

2. 변수 넣을 땐 {중괄호}, 데이터바인딩은 {중괄호}

3. style 넣을 땐 style={{스타일명 : '값'}} +카멜케이스 (ex.  font-size => fontSize)

 

---

return() 안에는 병렬로 태그 2개 이상 기입금지

자료 잠깐 저장할 땐 변수, state 써도 됨

 

state 만드는 법

1. import{useState}

2. useState(보관할 자료)

3. let[작명, 작명]

 

왜 state 써야할까? -> 변동시 자동으로 html에 반영되게 만들고 싶으면 state를 써야한다.

일반 변수는 갑자기 변경되면 html에 자동으로 반영안됨

state는 갑자기 변경되면 state쓰던 html은 자동 재렌더링됨

---

onClick(eventHandler) 쓰는 법

onClick={}안엔 함수이름을 넣어야함 / 함수만드는 문법 바로 넣어도 상관없음

 

state 변경하는법(등호로 변경금지)

state변경용함수 -> ex) setTitle()

state변경함수(새로운state)

---

useState([배열]) => 배열에 있는 정보 일부만 바꿔서 사용하기

(참고) array/object 다룰 때 원본은 보존하는게 좋음

 

[state 변경함수 특징] : 기존state === 신규state의 경우 변경안해줌

[array/object 특징] 

array/object 담은 변수엔 화살표만 저장됨

변수1 & 변수2 화살표가 같으면 변수1 == 변수2 비교해도 true 나옴

array/object 는 reference data type이라서 그럼