React - 추가기능

송용준·2025년 4월 3일

기능

memo
외부에서 정의한 컴퍼넌트 사용 및 외부 라이브러리 사용

import { PlusAgeButton } from "../components/button";
import { useState, memo, useEffect } from 'react';
import { Nav } from 'react-bootstrap'    // 리엑트 부트스트랩 라이브러리
import { useLike } from "../hooks/useLike.js";

function Func(){
    let [count, setCount] = useState(0)
    let [alert11, setAlert] = useState(true)
    let [탭, 탭변경] = useState(0)
    let [likeCount,likeCountFunc] = useLike()   // 외부에 정의해놓은 useLike.js 파일 임포트하고 내부함수 써먹기

    useEffect(()=>{
        let a = setTimeout(()=>{ setAlert(false) }, 2000)
        return ()=>{    // 이거 먼저 실행
            clearTimeout(a)
        }
    }, [])

    return (
        <div>
            <>
            {// 팝업 알림창
                alert11 == true 
                ?<div className="alert alert-warning">
                    2초이내 구매시 할인
                </div>
                : null
            }

            {/* 22살까지만 나이먹기 */}
            <PlusAgeButton/>
            
            <br></br>

            {/* 재랜더링 테스트 */}
            <Child/>
            <button onClick={ () => {setCount(count+1)} }>+1</button>
            </>

            {/* 탭변경 */}
            <Nav variant="tabs"  defaultActiveKey="link0">
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>
    
            <TabContent 탭={탭}></TabContent>   

            <h4>{likeCount}</h4>
            <button onClick={()=>{likeCountFunc()}}>❤️</button>
        </div>
    )
}

//필요한 경우에만 재랜더링 - memo
let Child = memo( function(){ // 부모(App)가 랜더링 되도 자식이 랜더링 되지 않음 - 부모가 count 관리하고 있음 
    // memo가 없으면 count 증가시 버튼 Refresh
    console.log('memo 쓰니 재랜더링 안돼지? memo가 없었으면 +1 눌렀을떄 "재랜더링 테스트 - 자식임" 이거 계속 나와야함')
    return <div>재랜더링 테스트 - 자식임</div>
})

// let Child = ()=>{
//   console.log('기본적으로 count가 증가하며 재랜더링이 되고 말아')
// }

function TabContent({탭}){
    let[fade, setFade] = useState('')
    useEffect(()=>{
        setTimeout(() => {setFade('end')}, 100)
        return ()=>{    
            setFade('')
        }    
    }, [탭])

    return (
        <div className={'start '+fade}> {/* App.css에 정의한 클래스 */}
            { [<div>0번째내용</div>, <div>1번째내용</div>, <div>2번째내용</div>][탭] } 
        </div>
    )    
}

export default Func;

//나이먹기 버튼
export function PlusAgeButton(){

    let [count, setCount] = useState(0);
    let [age, setAge] = useState(20);

    useEffect(()=>{
        if(count<3 && count!=0){
        setAge(age+1)
        }  
    }, [count])    

    return(
        <div>
            <div>안녕하세요 전 {age} - 내 나이는 22에서 멈춤..  <br/>'count는 증가해도 나이는 22살까지만 표시'</div>
            <button onClick={()=>{
                setCount(count+1)
                console.log('1살+ '+count)
            }}>누르면한살+</button>
        </div>
    )
}

memo

부모 컴퍼넌트가 리렌더링 되도 자식 컴퍼넌트가 리렌더링 되지 않게 할수 있음 즉 최적화 가능
+1 버튼을 눌렀을때 memo가 없다면 console.log('memo 쓰니 재랜더링 안돼지? memo가 없었으면 +1 눌렀을떄 "재랜더링 테스트 - 자식임" 이거 계속 나와야함') 이 값이 콘솔창에 계속 나와야 되는데 한번만 나오고 그다음부턴 안나옴