리액트 간단 기초 정리

**리액트 관련 정리
컴포넌트 구조 -> 파일 간 분리 용이
반드시 preventDefault를 명시적으로 호출
JSX -> 자바스크립트+html?
껍데기 html 뷰는 동적으로 생성

스타일링 
- 스타일도 객체로만 들어감
- 기존 css
- SCSS npm i node-sass
- Styled-components npm i styled-components 
ex) const div = styled.div`~~~`; // 백틱사용

리덕스
: 계층별 props 전달 x store 생성으로 데이터 사용
action에 반응하여 상태 변경 가능
action(보통 액션 이름 지정할때 대문자+언더바,,)
reducer(액션타입 따라 함수로직) 
store(리듀서 넣어서 호출) 
dispatch(action으로 상태 업데이트) 
subscribe(스토어 구독)
https://velopert.com/3480

useDispatch : action 발생
useSelector : state 조회

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
기본 hook - useState
- useEffect
- useContext
... 그외
useReducer
useCallback...

복잡한 컴포넌트, store의 state 값 증가 -> slice 통한 리듀서 분리 npm install @reduxjs/toolkit

클래스형은 랜더링 라이프사이클 지정편리
프젝이 커질수록 렌더링 복잡