2. Shop(3)
useEffect
- function 컴포넌트에서 사용가능
- 사용전에 useState와 마찬가지로 import 해와야한다
- return 나오기전에 function 컴포넌트 안에 넣어 사용
- useEffect함수는
콜백함수를 받고 여러개를 사용할 수 있으며 적은 순서대로순차적으로 실행된다 - 콜백함수 안에 적은건 컴포넌트가
로드되거나 재렌더링될때 항상 실행된다 - 재렌더링될때는 실행시키지 않으려면 콜백함수 뒤에
대괄호[]를 넣고, 특정state의 변경이 일어나 재렌더링됐을때만 실행하고 싶으면특정state의 이름을 대괄호안에 넣어준다 - 콜백함수 안엔
return을 넣을수 있고 여기넣은 함수는 컴포넌트가 사라질 때 실행된다
// 예시
useEffect(() => {
// 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을때)
// 컴포넌트가 재렌더링 되고난 후에 (전문용어로 update 되고난 후에)
// 실행할 함수
return () => { /* 컴포넌트가 사라질때 실행할 함수 */ }
},[특정state]); // 대괄호안에 특정state를 적으면 특정state가 변경될때만 실행된다Lifecycle Hook
- class로 만든 컴포넌트에서 사용가능
componentDidMount- 컴포넌트가 Mount 되고나서 실행할 코드
componentWillUnmount- 컴포넌트가 Unmount 되기전에 실행할 코드
Ajax
- 서버에
새로고침없이요청을 할 수 있게 도와줌 - jQuery 설치해서 $.ajax()쓰거나
- axios 설치해서 axios.get()쓰거나
- 쌩자바스크립트 fetch() 쓰거나
GET요청
- 특정 페이지 / 자료읽기
POST요청
- 서버로 중요 정보 전달
axios
- 셋 중 axios사용 터미널에
yarn add axios라이브러리 설치하기 - import 해오기
import axios from 'axios' - axios를 사용하면
JSON을 Object로알아서 바꿔준다 axios.get('GET요청할URL').then(() => { 요청성공시 실행할 코드 }) /.catch(() => { 요청실패시 실행할 코드 })
배포
- 배포하기 전
npm run build또는yarn build를 해주면 build 폴더가 생성된다 - build 폴더 안에 있는 내용을 모두 서버에 올리면 된다
useContext
- 하위컴포넌트들이 props 없이도 부모의 값을 사용가능
- 컴포넌트안에 여러개의 컴포넌트가 있을때 props를 연속사용해야하는 불편함을 감소시켜준다
context 사용법
- let 변수이름 =
React.createContext()로 범위생성 - 같은 값을 공유할 HTML들을 범위(
<변수이름.Provider value={공유하고싶은 데이터}>)로 감싸기 useComtext(변수이름)로 공유된 값 사용- 다른파일에서 사용하기 위해선 범위를 export하고 다른파일에선 import해준다
// 예시
let 재고context = React.createContext(); // 범위생성
function App() {
let [재고, 재고변경] = useState([2, 10, 11]);
return (
<HTML 많은곳 />
<재고context.Provider value={재고}> // 값을 공유할 태그들 감싸기
<component들 />
</ 재고context.Provider> // 값을 공유할 태그들 감싸기
)
}// 예시2
import React, {useState, useContext} from 'react';
// useContext 사용하기 위해 import해오기
function component들() {
let 재고 = useContext(재고context); // 공유된 값 사용하기
return (
<HTML 많은곳 />
<div>{ 재고 }</div>
)
}
Redux
- 모든 컴포넌트파일들이 같은 값을 공유할 수 있는
저장공간 생성가능+state데이터 관리기능 - npm 또는 yarn을 이용하여
yarn add redux react-redux두개 라이브러리 설치
redux 셋팅
- index.js 안에서 import 해오기
import {Provider} from 'react-redux' <Provider>로<App />감싸기- 감싸진 애들은 props 없어도 state 공유가능
- index.js 안에서 import 해오기
import {createStore} from 'redux' - state 저장 : let 변수명 =
createStore(() => { return 저장할 state }) - state 사용 :
<Provider state이름={변수명}>
// 예시
import { Provider } from 'react-redux'
import { createStore } from 'redux'
let store = createStore(() => {
return [{id : 0, name : '멋진신발', quan : 2}]
})
ReactDom.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App/>
</Provider>
</BrowserRouter>
</React.StrictMode>
);state 사용
- state사용을 원하는 컴포넌트.js파일 밑에
state를 props화 시켜줄function 함수명(state) 만들기 import {connect} from 'react-redux'import 해오기- export default
connect(함수명)(Component명) - state를 props화 시켜준것을 사용하기 위해 component의 파라미터 값으로
props를 추가해서{props.state이름}사용하면 된다
// 예시
import { connect } from 'react-redux
// Component
function Cart(props) {
return (
<HTML 많은곳/>
<div>{ props.state[0].name }</div>
)
}
function state를props화(state){
return{
state : state // ex. state[0].name : 멋진신발
// 작명가능 : state
}
}
export default connect(state를props화)(Cart)state 수정
reducer/dispatch사용- index.js안에서 reducer함수를 만들고 그 안에다 state초기값과, state 데이터의 수정방법을 미리 정의해놓고 사용해야한다
- 정의된 수정방법을 실행하려면 dispatch() 함수를 이용한다
- dispatch할 때 데이터를 실어보낼 수 있다
// 예시
// (index.js) 정의
let 초기값 = [
{ id: 0, name: '멋진신발', quan: 2 },
{ id: 1, name: '이쁜신발', quan: 3 },
];
function reducer(state = 초기값, 액션) {
if (액션.type === '수량증가') {
let copy = [...state];
copy[액션.i].quan++;
return copy;
} else {
return state;
}
}
let store = createStore(reducer);
// (component.js) 실행
<button onClick={() => {
props.dispatch({ type: '수량증가', i: i });
}}>reducer가 여러개일때
- reducer가 여러개이면
combineReducers를 이용하여 createStore(combineReducers({ reducer, reducer2 })) 사용할 수 있다 - createStore와 마찬가지로 combineReducers도 import해와야 한다
- state를 props화 할 때 state.reducer, state.reducer2로 나눠서 불러오면 된다
코린이