1. 시작하기
npm install yarn
yarn create react-app
Bash
복사
•
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>
}
}
JavaScript
복사
•
함수 컴토넌트
◦
원래는 정적인 컴포넌트 만들떄 쓰던것
◦
React Hook으로 클래스 컴포넌트에서 하던거 가능
◦
종류
▪
function
▪
memo(function)
▪
React Hook
function App() {
return <button> </button>
// 정적인 컴포넌트 만들떄 쓰던것
}
JavaScript
복사
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=""
•
엄밀히 말하면 html처럼 생긴 자바스크립트 코드
◦
나중에 바밸이 변환해주는거임
•
html 안에서 자바스크립트 : 중괄호로 묶으면 됨
<h1>Hello {name}</h1>
{ name && <h1>Hello {name}</h1>} //name 이 존재하면 출력
{['a', 'b'].map(item => (
<h1>{item}</h1>
)}
JavaScript
복사
•
여러개 노드 사용 불가 (무조건 한가지 태그로 감싸줘야함)
◦
div로 묶어서 해도 되지만
◦
<React.Fragment> 사용
◦
<> 이렇게만 해도 됨
2.5 클래스 컴포넌트
•
rcc 하면 자동으로 생김
•
app.js 에서 연결
•
폰트오쏨 쓰기
◦
yarn add @fortawesome/fontawesome-free
◦
index.js에 import '@fortawesome/fontawesome-free/js/all.js'; 추가
◦
아래 사이트 들어가서 쓰고싶은 아이콘 갖고오면 된다.
•
변수
◦
초기화 : state = { count : 0 }
◦
참조 : {this.state.count}
◦
대입 : this.setState({ count : this.state.count + 1 })
◦
state 오브젝트를 직접적으로 수정하지 말것!
•
부모에서 넘어온 변수
◦
초기화 : <LikeButton title={'Like'} onClick={this.handleClick} />
◦
참조 : this.props.onClick
•
이벤트
◦
브라우저에서 발생하는 이벤트는 리액트 이벤트가 감싸고 있다.
◦
자세한 내용은 공식 문서 확인
•
배열로 컴포넌트 여러개 만들기
◦
map 으로 컴포넌트를 여러개 출력한다.
◦
컴포넌트 별로 고유한 key를 넘겨줘야한다. 예) key={item.id}
◦
최적화를 위해 필요
◦
re-render 할떄 key가 없으면 어떤걸 render 할지 어려움
◦
Date.now() 로 고유한 id 만들수있다.
2.6 Form 만들기 (Refs 이용)
•
form 의 onSubmit은 submit이 되면 실행됨
•
event.preventDefault(); 로 refresh 되는거 방지
•
다른 노드에 접근하기
◦
inputRef = React.createRef(); refs 생성
◦
접근하고자하는 노드에 ref={this.inputRef} 속성 추가
◦
값 참조 : this.inputRef.current.value
2.7 성능
•
StrictMode 하면 render 에 오류가 없는지 두번씩 확인한다. (배포시에는 안함)
•
render 될때 Virtaul Dom 과 실제 Dom을 비교해서 변경된점만 실제 Dom에 적용한다.
•
PureComponent
◦
props 이나 state 가 변경되지 않으면 re-render를 하지 않음
◦
shallow comparsion 즉 레퍼런스만 비교하기때문에 오브젝트가 변경되지 않는이상 render가 일어나지 않는다.
◦
state에서 값을 변경하기 보다는 아예 새로운
2.8 LifeCycle
•
컴포넌트가 생성될떄 ComponentDidMount() 함수 구현시 자동 호출
◦
소켓 초기화 등등
•
컴포넌트가 제거될떄 ConponetWillUnmount() 함수 구현시 자동 호출
2.9 함수 컴포넌트
•
rsi 하면 자동으로 생김
function Habit(props) {
return ;
}
const Habit = props => {
return ;
}
JavaScript
복사
•
this 필요없음
•
클래스 컴포넌트와 동일
•
PureComponent 처럼 쓰는법
◦
props 가 변경되지 않으면 re-render 되지 않는다.
const Habbit = memo(props => {
return ;
})
JavaScript
복사
•
클래스가 아니기 떄문에 props 이나 state가 변경이 되면 전체 코드 블럭이 새로 호출된다.
◦
이렇게되면 하위 컴포넌트의 props의 함수 ref가 계속 변경되기떄문에 하위 컴포넌트들도 re-render 되버릴수있다.
◦
그래서 변수, ref, 함수 모두 리액트 훅으로 감싸서 써야한다.
◦
리액트 훅들도 물론 다시 호출되지만 리액트에서 이전 값을 알아서 기억한다.
2.10 React Hook
•
변수
◦
const [count, setCount] = useState(0)
•
Ref
◦
const spanRef = useRef()
•
함수
◦
const handleAdd = useCallback(() => {})
•
LifeCycle
◦
생성될떄, update 될때마다 호출됨 (props, state 변경시)
◦
두번째 인자로 특정 값이 변경될때만 호출하게끔 할수있음
◦
useEffect(() => {}, [변경시 호출된 변수])
◦
useEffect(() => {}, []) 처음에만 호출됨
배포하기
PossCSS
•
css를 간편하게 쓸수있게 해주는것
•
•
•
•
모듈화
◦
button.module.css
◦
import styles form './button.module.css'
◦
className={styles.button}
