setState, useContext, useReducer-Week2

13412 ワード

Client Side
1)クライアントへのレスポンスのインストール
npx create-react-app client
2)ガイドバーの取り付け
npm i bootstrap
3) This will import bootstrap
//src > index.js
import 'bootstrap/dist/css/bootstrap.css';
3-1)コンポーネント>連絡先、レイアウト、およびページフォルダを作成します.

3-2) layouts > Header.js>raftは、基本テンプレート作成またはrccクラスとして表示されます.
3-3)classをclassNameに変換する場合は、classを選択しctrl+Dをクリックします.
4) It helps to change pages. Router.
npm i react-router-dom
5) Bring in the link component

import {Link} from 'react-router-dom';

 <a class="navbar-brand" href="#">{props.branding}</a>
 <Link class="navbar-brand" to="#">{props.branding}</Link>

6)アイコン
https://react-icons.github.io/react-icons/
npm i react-icons
Server Side
1) npm init
2) npm i express
3) Request
POST Request : add new data to the database C
GET Request: gets data from the data. R
PUT Request : Update U
Delete Request : DELETE D
4)ページ移動
//Bring in express
const express = require('express');
//initialise express
const app = express();

// Routes can be get, post, put, delete
app.get('/', (req,res) => {
// testing purposes
    console.log('/ - get'); 
    res.send('Home Page'); 
});

// create a port variable
const PORT = process.env.PORT || 5000; 
// process.env.PORT - > checking to see if there is a PORT environment variable set. 
// || logical OR. 

app.listen(PORT, 
    () => console.log(`Server is running on port : ${PORT}`)
)

実行:
PS C:\school\Thursday Class\Week2-3\server> node src/server.js
server is running o port : 5000
Week 2で作成したすべてのフォルダをコピーしてweek 3に貼り付けます
npm i
コマンドライン、packageを入力します.jsonのすべてのものは自動的にインストールできます
1.setStateの使用
To change the state we need to use setState function
Format is setState({ key:value })
Toggle the state

this.setState({ showContactInfo : !this.state.showContactInfo });

2. useContext
propsを渡すために使用され、階層が多すぎる場合に使用されます.以下に簡単な例を示します.
“REACK HOOK”に酔うuseContext+Context API Youtube符号化
ThemeContext.js
createContextを作成し、外部でThemeContextの名前で露出します.

import { createContext } from "react";

export const ThemeContext = createContext(null);

App.js
コンテキストパッケージが入っています.

import {useState} from 'react';
import './App.css';
import Page from './components/Page';
import { ThemeContext } from './context/ThemeContext';
function App() {
//isDark는 초기값으로 false를 가지고 있고, true, false로 정보를 갖는다.
const[isDark, setIsDark] = useState(false);
return (
<ThemeContext.Provider value={{ isDark, setIsDark }}>
<Page />
</ThemeContext.Provider>
);
}
export default App;

Page.js

import React  from 'react'; 
import Content from './Content';
import Footer from './Footer';
import Header from './Header';

const Page = () => {
    return(
        <div className="page">
            <Header  />
            <Content  />
            <Footer  />
        </div>
    )
}
export default Page;

Header.js
useContextを使用することで、Contextの使用を通知します.ユーザContext(使用するContext);
isDarkのデフォルトfalseが含まれます.

import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const Header = () => {
    const { isDark } = useContext(ThemeContext); 
    console.log(isDark); 

    return(
        <header
            className="header"
            style={{
                backgroundColor:isDark ? 'black' : 'lightgray',
                color:isDark ? 'white' : 'black',
            }}
        >
        <h1>Welcome 홍길동</h1>
        </header>
    )
}

export default Header;

Footer.js

import React, { useContext } from 'react'; 
import { ThemeContext } from '../context/ThemeContext';

const Footer = () => {
    const{ isDark, setIsDark } = useContext(ThemeContext); 

    const toggleTheme = () =>{
        setIsDark(!isDark);
    }; 
    return(
        <footer
            className="footer"
            style={{ background:isDark ? 'black' : 'lightgray' }}
        >
        <button className="button" onClick={toggleTheme}>
            Dark Mode
        </button>
            
        </footer>
    )
}

3. useReducer
1)reduce:stateの役割の更新-銀行
2)Dispatch:State更新要求-顧客
3)action:コンテンツのスケジューリング要件

import React, {useState, useReducer} from 'react';
/*
reducer : state를 업데이트해준다 (은행)
dispatch : state 업데이트를 위한 요구 (고객)
action : 요구의 내용

내가(Dispatch) 액션(Action)을 가지고 요구하면, 
은행(Reducer)이 그액션(Action)을 업데이트(State)시킨다.
Dispatch(Action)----------------> Reducer(State, Action)
*/

//money값이 state에 들어간다. 
const reducer = (state, action) => {
  console.log('reducer',state,action);
  switch(action.type){
    case 'deposit':
      return state + action.payload;
    case 'withdraw':
      return state - action.payload;
    default:
      return state; 
  }
}

function App() {
  const [number, setNumber] = useState(0); 
  //새로만들어질state, useReducer가 만들어준 dispatch함수
  //useReducer(reducer, money에 들어갈 초기값)
  //돈, 고객돈 = useReducer(은행,돈초기값)
  const [money, dispatch] = useReducer(reducer, 0); 

  return (
    <div>
      <h2>useReducer 은행에 오신것을 환영합니다.</h2>
      <p>잔고: {money}원</p>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
        step="1000"
      />
      <button onClick={()=>{ dispatch({ type:'deposit',payload:number }) }}> 예금 </button>
      <button onClick={()=>{ dispatch({ type:'withdraw',payload:number})}}> 출금 </button>
    </div>
  );
}

export default App;

Reference

この問題について(setState, useContext, useReducer-Week2), 我々は、より多くの情報をここで見つけました https://velog.io/@okayokay/setState-useContext-useReducer

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

タイプスクリプトタイプエラーの変更-as any

React コードで最も一般的な問題