React

JSX 문법

1.class 넣을땐 className
2.변수 넣을땐 중괄호 {변수명}
3.style 넣을땐 style={{스타일명 : '값', 스타일명 : '값'}}

app.js 파일안의 return()안에는
병렬로 태그 2개 이상 기입금지

자료 잠깐 저장할땐 state
state사용법
1.useState치고 엔터 위에 import{useState}가 생김
2.useState(보관할 자료)
3.let[a, b] = useState(보관한 자료)
{a} : state에 보관했던 자료 나옴
b : state변경을 도와주는 함수

state변경하는법
state변경함수(새로운state)

state를 왜 쓰는가?
->변수명 변경시 자동으로 html에 반영되게 만들고 싶을때 쓴다.
->자주 변경될 거같은 html부분은 state로 만들어 놓는다.

onClick사용법
onClick={함수이름}
onClick={function 함수이름(){}}
onClick={() => {}}

let [따봉, 따봉변경] = useState(0);
<span onClick={ ()=>{따봉변경(따봉+1)} }>👍</span>

state가 array/object면 독립적 카피본을 만들어서 수정해야한다.

컴포넌트 만드는법
1.밖에function 만들고
2.return()안에 html담기
3.<함수명></함수명> 쓰기

<함수명></함수명>,<함수명/> 둘다 가능

컴포넌트 만드는법2
1.const 함수명=()=>{}

컴포넌트로 만들면 좋을때
1.반복적인 html을 축약할때
2.큰페이지
3.자주변경되는것들