Day 78 - react 문법(2)

useState

import React, { useState } from 'react'

export default function Ex01() {

    const [su,setSu]=useState(1111);
    const [obj,setObj]=useState({key1:'val1',su2:2222});

  return (
    <>
        <h2>state</h2>
        <div>su:{su}</div>
        <div>{obj.key1}:{obj.su2}</div>
        <button onClick={e=>{
            setSu(su+1);
            const obj2={...obj,su2:obj.su2+1};
            setObj(obj2);
        }}>click</button>
    </>
  )
}

useEffect

import React, { useEffect, useState } from 'react'

export default function Ex01() {

    const [su,setSu]=useState(1111);
    const [obj,setObj]=useState({key1:'val1',su2:2222});

    useEffect(()=>{
        console.log('effect taken on:',su);
        setTimeout(()=>setSu(su+1),1000);
    },[su]);

  return (
    <>
        <h2>state</h2>
        <div>su:{su}</div>
        <div>{obj.key1}:{obj.su2}</div>
        <button onClick={e=>{
            setSu(su+1);
        }}>click1</button>
        <button onClick={e=>{
            const obj2={...obj,su2:obj.su2+1};
            setObj(obj2);
        }}>click2</button>
    </>
  )
}

useRef

import React, { useRef, useState } from 'react'

function Ex02() {

    const [input1,setInput1]=useState('');
    const input2=useRef();

  return (
    <div>
        <input ref={input2} onChange={e=>{setInput1(e.target.value);}} value={input1}/>
        <button onClick={e=>{console.log(input2.current.value);}}>클릭</button>
    </div>
  )
}

export default Ex02

memo()

import React, { memo, useEffect } from 'react'

function Ex04({obj}) {
    useEffect(()=>{
        console.log('ex04 rendering...'); // 로딩할때만 Ex04의 렌더링이 이루어진다.
    })
  return (
    <div>su2:{obj.su2}</div>
  )
}

export default memo(Ex04); // 변화가 없을때는 렌더링을 하지 않는다.

import React, { useState } from 'react'
import Ex04 from './Ex04';

function Ex03() {

    const [su1,setSu1]=useState(1111);
    const [obj,setObj]=useState({su2:2222});

  return (
    <div>
        <div>su1:{su1}</div>
        <Ex04 obj={obj}/>
        <button onClick={e=>{
            setSu1(su1+1);
        }
        }>click1</button>
        <button onClick={e=>{
            setObj({...obj,su2:obj.su2+1});
        }
        }>click2</button>
    </div>
  )
}

export default Ex03

useCallback

import React, { memo, useEffect } from 'react'

function Ex06({todos,addTodo}) {

    useEffect(()=>{
        console.log('ex06 rendering...');
    });

    return (
      <>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </>
    );
}

export default memo(Ex06);

import React, { useCallback, useState } from 'react'
import Ex06 from './Ex06';

function Ex05() {
    const [count, setCount] = useState(0);
    const [todos, setTodos] = useState([]);
  
    const increment = () => {
      setCount((c) => c + 1);
    };
    const addTodo = useCallback(() => {
      setTodos((t) => [...t, "New Todo"]);
    },[todos]);
  
    return (
      <>
        <Ex06 todos={todos} addTodo={addTodo} />
        <hr />
        <div>
          Count: {count}
          <button onClick={increment}>+</button>
        </div>
      </>
    );
}

export default Ex05

useMemo

custom Hooks

import React from 'react'

export default ()=>{
  return (
    <div>Ex07</div>
  )
}


const Ex07=()=>{
  return (
    <div>Ex07</div>
  )
}

export default Ex07

useReducer

import React, { useReducer, useState } from 'react'

let init={su:10};

const PLUS='plus',MINUS='minus',PLUSPLUS='plusplus';

const suReducer=(state,action)=>{
    console.log(state,action);

    switch(action.type){
        case PLUS:
            return {...state,su:state.su+1};
        case MINUS:
            return {...state,su:state.su-1};
        case PLUSPLUS:
            return {...state,su:state.su+action.value};
        default:
            return state;
    }
};

function Ex08() {

    // const [su,setSu]=useState(0);
    const [obj,dispatch]=useReducer(suReducer,init);

  return (
    <div>
        <h2>su:{obj.su}</h2>
        <button onClick={e=>dispatch({type:'plus'})}>plus</button>
        <button onClick={e=>dispatch({type:'plusplus',value:10})}>plus+10</button>
        <button onClick={e=>dispatch({type:'minus'})}>minus</button>
    </div>
  )
}

export default Ex08

useContext