1. 시작하기

npm install yarn
yarn create react-app

Getting Started - React

Getting Started | Create React App

• yarn eject 하면 기본적으로 깔려있는 툴들이 다 보인다.
  • 바벨
  • 웹팩
  • ESList : 코드 오류 검사
  • Jest : 테스팅 프레임워크
  • PostCSS : css 전처리기
• 현업에서는 create react app 잘 안씀

2. 만들기

2.1 클래스 컴포넌트 vs 함수 컴포넌트

• 클래스 컴포넌트

  • state 로 변수관리
  • render로 출력 관리
  • lifecycle 함수들 존재함
  • 종류
    • React.Component
    • React.PureComponent

  class LikeButton extedns Component {
  	state = {
  		numberOfLikes: 0,
  	};
  	render() {
  		return <button> </button>
  	}
  }
  

• 함수 컴토넌트

  • 원래는 정적인 컴포넌트 만들떄 쓰던것
  • React Hook으로 클래스 컴포넌트에서 하던거 가능
  • 종류
    • function
    • memo(function)
    • React Hook

  function App() {
  	return <button> </button>
  	// 정적인 컴포넌트 만들떄 쓰던것
  }
  

2.2 템플릿 프로젝트

• 구조
  • public : static 한 내용
    • manifest 삭제
    • robots.txt 삭제
    • logo 삭제
    • index.html 에서 apple~, mani~, 주석 삭제
  • src : 다이나믹한 내용
    • serviceWorker.js 삭제 (백그라운드 돌릴떄 쓰는거라는데..?)
    • test~ 파일 삭제
    • logo 삭제
    • App.js → app.js → app.jsx
      • import logo 삭제
    • index.js
      • serverWorker 관련 코드 삭제
    • components
• 규칙
  • 컴포넌트는 jsx 확장자로 구분한다.
  • 컴포넌트는 무조건 대문자

2.3 기본원리

• 작동원리
  • 기본 html에 root 딱 하나 있음
  • index.js 에서 root에 react-dom을 연결함
• App 컴포넌트를 <React.StrictMode> 로 감싸면 use strict 처럼 사용가능

2.4 JSX 정리

• 자바스크립트에서 바로바로 html을 쓸수있게 만들어둔것
• html 과 차이점
  • class="" → className=""
  • onclick="" → onClick=""