react_기초정리

node-modules : 라이브러리 코드 보관함
public : static파일 모아놓는 곳
src : 코드 짜는 곳
package.json : 프로젝트정보

---

• style넣을 땐 style={{스타일명 : '값'}]
  -쓸 수 없음 ex) font-size => fontSize
• return() 안에는 병렬로 태그 2개 이상 기입금지

---

이벤트 다루는 법

onClick={클릭될 때 실행할 함수}
onclick={()=>{실행할내용}}

---

State

• state써야하는 이유
  :변동시 자동으로 html을 재렌더링 시킴

• State변경시키는 법
  [state, state변경함수]
  state변경함수를 이용해 state를 변경해야 함

---

// reference data type

Array, Object state 데이터 수정 방법

(변경함수 사용!)
변경함수(대체할 데이터)
state직접 수정 X
deep copy해야한다.
ex> let newArray = [...글제목];
Spread Operator
: [...df]

function 제목바꾸기() {
    let newArray = [...글제목];
    newArray[0] = "여자 코트 추천";
    글제목변경(newArray);
  }

HTML을 한 단어로 줄여서 쓸 수 있는 방법

리액트의 component 문법

1. 함수 만들고 이름짓고
2. 축약을 원하는 HTML넣고
3. 원하는 곳에서 <함수명/>

*주의점

1. 이름은 대문자
2. return()안에 있는 건 태그 하나로 묶어야 함
3. fragment <> </>로 써도 됨

어떤 걸 component로 만드는 것이 좋을까

1. 반복출현하는 HTML 덩어리들
2. 자주 변경되는 HTML UI들
3. 다른 페이지 만들 때도 컴포넌트 만듬

많이 만들었을 때의 단점

1. state 쓸 때 복잡해짐

---

/ esling-disable/
=> lint끄는 기능