React

React
CRA
node.js - node -v 로 확인
npm(node package manager) - npm -v 로 확인

CRA

초기설정 명령어 => npc create-react-app 프로젝트명(폴더)

• node.modules => package 소스코드들
• package.json -> dependencies => package name, version 정보
• gitignore => node.modules 있음 (무겁다 -> git push할때 가볍기위해 ignore해준다.)
• 상위에 올릴대 dependencies 만 올린다.
• 상위에서 pull 하면 dependencies만 받는다. package랑 버전정보확인 --> npm install reat-router --save

폴더

• public -> index.html(프로젝트당 1개) -> < div id="root"></ div>
• src -> index.js(얘도 1개) -> ReactDOM.render(A, B) --> ReactDOM을 이용해서 보여주고 싶은 정보 (A)를 (B)에 접근해서 웹에 보여준다(rendering).
  • ReactDOM, React 등등 import, export 해야함.
  • A : ex)APP/ ( component) , B : 접근위치 ex) getElementById("root")

Component

• 개념 : UI 구성단위 (레이아웃) ex) nac, footer.. => 회사내 컨벤션이 있을경우 많음 --> 재활용성
• 종류 : 1. class형 2. functional

class형

• render
• return ( JSX(js의 확장문법) ) --> HTML문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX !!
  • React사용을 위해 jsx문법이 포함되어 있으면, js문법으로 변환시키는 컴파일 과정이 필요 --> 웹팩, 바벨
  • 감싸는 태그있어야함 <-> 아무것도 감쌀때 없을때 <> React Freagment 라고함 </>
  • className

state
컴포넌트의 상태 (state)

state - 객체 데이터타입

• 자식요소 1. 반영

• event 요소와 반영요소는 다르다.
  ex) onclik 이벤트

  props