react 2023-04-09

나의 리엑트 첫 날
아자 아자 화이팅
잘할 수 있다

JSX문법1. class 넣을 땐 className
JSX문법2. 변수 넣을 땐(=바인딩할 땐) {중괄호}
JSX문법3. html에 style 넣을 땐 style={ } 안에 { } 자료형으로
(단, 대쉬 기호 쓸 수 없음. 대쉬 기호 대신 모든 단어를 붙여야 함. & camel case 예시: font-size(x) fontSize(o))

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

자료 저장할 땐 변수를 써도 되는데 왜 state가 생긴걸까?
-> 변동 사항이 생기면 자동으로 html에 재렌더링해줌.

state 다루는 법칙: state는 등호로 변경할 수 없다

오늘 배운 것
1. 클릭 시 뭔가를 실행하고 싶으면 onClick = {함수} 이렇게 이벤트 핸들러를 달아서 사용한다.
2. state를 변경하려면 state변경함수를 사용한다.
state 변경함수는 ()안에 입력한 걸로 기존 state를 갈아치워준다.

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

state가 array/object면 shallow copy를 만들어서 수정해야 함.

let [글제목, 글제목변경] = useState(['여자 코트 추천', '김포 우동 맛집', 'React 독학']);

<button onClick={() =>{
        let copy = [...글제목]; //글제목 복사해서
        copy[0] = '남자 코트 추천'; //복사한 array 1번을 남자 코트 추천으로 바꾸고
        글제목변경(copy);//괄호 안에는 새로운 state
        }}>👸</button>

현재 공부하는 강의: 코딩애플 https://codingapple.com/