[React] Hooks 실습 예제 , useEffect , useMemo

import React from 'react'
import { useState } from 'react';

function Ex03_Memo() {

    const[list, setList] = useState([1,2,3,4,5]);
    const[str, setStr] = useState("안녕");
    const getSumResult = ()=>{
        let sum=0;
        list.forEach((i)=>{
            sum += i;
        });
        return sum;
    }
  
    return (
    <div>Ex03_Memo
     {
             list.map((no,i)=><h5 key={i}>{no}</h5>)
             
                     
    }        
    <h3>{str}합계: {getSumResult ()}</h3>   
    <button onClick={()=>setList([10, ...list])}>추가</button>
    <button onClick={()=>setStr("총계")}>str 값 변경</button>
  </div>
  ) 
}

export default Ex03_Memo

import React from 'react'
import { useMemo } from 'react';

import { useState } from 'react';


function Ex03_Memo() {

    const[list, setList] = useState([1,2,3,4,5]);
    const[str, setStr] = useState("안녕");
    // const getSumResult = ()=>{
    //     let sum=0;
    //     list.forEach((i)=>{
    //         sum += i;
    //     });
    //     return sum;
    // }
    const memoResult = useMemo(()=>{
        console.log("test")
        let sum=0;
        list.forEach((i)=>{
            sum+=i;
        })
        return sum;
    }, [list]);
  
    return (
    <div>Ex03_Memo
     {
             list.map((no,i)=><h5 key={i}>{no}</h5>)
             
                     
    }        
    {/* <h3>{str}합계: {getSumResult ()}</h3>    */}
    <h3>{str}합계: {memoResult}</h3>
    <button onClick={()=>setList([10, ...list])}>추가</button>
    <button onClick={()=>setStr("총계")}>str 값 변경</button>
    </div>
)
}
export default Ex03_Memo

developer theme - green coffee