React 기초

 

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

class 만드는 대신 hook 이라는 함수로 대체

 

https://ko.legacy.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

• 리엑트는 라이브러리
• jQuery랑 node랑 동일한 라이브러리

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

 

세팅

<!-- ... 다른 HTML ... -->

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

// 설치 및 실행
npx create-react-app my-app
cd my-app
npm start

함수형 컴포넌트 자동완성 : rafc, rafce, rfc, rfce

rafc  : 화살표함수 컴포넌트
rafce : 화살표함수 컴포넌트, export 별도
rfc   : 함수 컴포넌트
rfce  : 함수 컴포넌트, export 별도

react 이벤트 핸들러 사용법 
1. 파라미터가 없다면 그냥 호출
2. 파라미터가 있다면 화살표함수를 만들어서 호출

<button onClick={ countHandle }>num click</button>
<span className='count'>{ count }</span>

<button onClick={ ()=>{ setCount(count+1) } }>click</button>
<button onClick={ ()=>{ paramHandle(8) } }>click</button>

• html ()
• js {}
• class ⇒ className
• LABEL for ⇒ forHTML
• 함수 : 함수, 첫글자 대문자인 함수 (컴포넌트, 새로만든 태그, container)
• 의미없는 div 를 대체하기 위해 <> </> 비어있는 태그

const Section = () => {
  return (
    <>
      <Content /> 
      <Content /> 
      <Content /> 
    </>
  )
}
// 빈어있는 태그 : fragment
// 자식 컴포넌트를 그룹짖기 위한 용도

데이터 사용법

변수 사용법

• state : js 변수는 UI 갱신하지 못함, 값이 바뀌면 UI갱신
• props : 부모컴포넌트에서 자식컴포넌트 넘겨지는 데이터 js destructur
• context : 최상위 컴포넌트 지정한 값 ⇒ 어느 하위 컴포넌트에서 사용 가능

UI 사용법

• hook : 함수(method), 특정용도를 만들어둔 함수