day 2

react<npm트랜드이다>
component(복붙?)
리액트에서는
let,const -> State
return안에서는 프래그먼트 <> </>로 감싸야함

노드모듈즈는 깃에 안올림
노드모듈즈 없으면 yarn dev 실행이 안됨
고로, package.json 있는 위치에서 yarn install 입력해서 노드모듈즈를 다운받음

git clone 주소 하면 해당주소내용 복사됨

http://localhost:3000/ -> 3000이름은 포트 포트는 1개의 컴퓨터에서 중복될수없다
포트 종료 = 컨트롤+c
포트 변경(3002로)
yarn dev -p 3002

홈페이지 개방시 프론트 백 데이터베이스 서버가 24시간 켜있어야함

ip 주소 0.0.0.0 은 누구든지 접속 가능함
로컬 호스트(내컴) = 127.0.0.1

구글 개발자모드에서 요소(Element) 로 구조 확인가능
바로 수정도 가능(저장은 불가)

@ 왜 리액트인가?
"컴포넌트" 기반의 작업이 가능함(기능을 부품화해서 재사용) UI의재사용(안에 텍스트말규~)

• 복붙과 다른점 = color : blue 에서 레드로 바꾸게되면 전부다 하나하나 바꿔야함
  리액트에서는 해당 부품의 내용만 바꾸면 전체가 바뀜
  커뮤니티가 많이 활성화되어있음

(함수형 컴포넌트)
function BoardsNewPage(){

}export default BoardsNewPage ->처음에는 클래스형이었는데 요즘은 함수형으로 많이 쓰고있음(클래스형에 지원하던기능 지원안되게됨) 그래도 클래스형 알아야함 과거프로젝트들을 볼줄알아야해서 use 로시작되는애들 = react-hooks 이 생기면서 함수형 컴포넌트가 발전함 ex) useState,useEffect

@ useState 란?
hooks 중하나로 State 만들어 주는애
State ( 리액트에서 let, const 대신 쓰게될애) = 컴포넌트 전용 변수

const[state,setState] = useState("철수")
변수명, 변수바꾸기 변수만들기 초기값

    const[fruits,seFruits] = useState(0)
           변수명, 변수바꾸기     변수만들기  초기값

바꾸기
const[fruits,seFruits(5)] = useState(0)
변수명, 변수바꾸기 변수만들기 초기값
->이제 fruits 는 5가됨

const[count,setCount] = useState(0)

State 만 이해하면 도큐멘트.겟엘리먼트바이아이디() 안써도됨

예)

function zzz(){
setCount(count+1)
}
return(
  <div>
     <div>{count}</div>
     <button onClick={zzz}>카운트 증가!!</button>
  </div>
  )

훨씬 간단해짐 심지어 숫자로 변환도 안해줘도 됨 ㅎ

컴퓨터는 funtion 안의 {}에서 해당값을 찾고 거기없으면 자기를감싼 윗단계 {}에서 찾음 = 스코프, 스코프체인