zoaseo
To Infinity And Beyond
zoaseo
전체 방문자
오늘
어제
  • 분류 전체보기 (763)
    • 개발이 좋아서 (381)
      • SAP가 좋아서 (3)
      • Java가 좋아서 (42)
      • Spring이 좋아서 (50)
      • JPA가 좋아서 (0)
      • QueryDSL이 좋아서 (26)
      • Docker가 좋아서 (7)
      • Redis가 좋아서 (7)
      • AWS가 좋아서 (5)
      • CI/CD가 좋아서 (6)
      • Troubleshooting이 좋아서 (4)
      • Kotlin이 좋아서 (7)
      • SQL이 좋아서 (6)
      • HTTP가 좋아서 (21)
      • JavaScript가 좋아서 (30)
      • TypeScript가 좋아서 (6)
      • Vue가 좋아서 (21)
      • Flutter가 좋아서 (61)
      • React가 좋아서 (20)
      • Redux(React)가 좋아서 (2)
      • Angular가 좋아서 (22)
      • HTML이 좋아서 (9)
      • CSS가 좋아서 (15)
      • PHP가 좋아서 (9)
      • Illustrator가 좋아서 (2)
    • 노력이 좋아서 (169)
    • 결과물이 좋아서 (14)
    • 코딩연습이 좋아서 (168)
      • 이론이 좋아서 (62)
      • SQL이 좋아서 (90)
    • 유용한 사이트가 좋아서 (28)
    • Github (2)

인기 글

티스토리

hELLO · Designed By 정상우.
zoaseo
노력이 좋아서

<step65>'react_useEffect'

노력이 좋아서

<step65>'react_useEffect'

2022. 6. 22. 15:39

1) 

App2.js

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

const App2 = () => {
    const [ count, setCount ] = useState(1);
    const [ input, setInput ] = useState("");
    // componentDidMount && componentDidUpdate
    useEffect(()=>{
        console.log('렌더링될 때마다 useEffect호출');
    })
    // useEffect에 두번째 인자로 []을 넘겨주면 마운트될 때만 호출됨
    // componentDidMount
    useEffect(()=>{
        console.log('처음 마운트될 때만 useEffect호출');
    },[])
    useEffect(()=>{
        console.log('배열요소안의 값이 업데이트되면 useEffect호출');
    },[count])
    const handleCount = () => {
        setCount(count+1);
    }
    const onChange = (e) => {
        setInput(e.target.value);
    }
    return (
        <div>
            <button onClick={handleCount}>수정하기</button>
            <span>count: {count}</span>
            <input onChange={onChange} value={input} />
        </div>
    );
};

export default App2;

2) 

App3.js

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

const App3 = () => {
    const [ showTimer, setShowTimer ] = useState(false);
    return (
        <div>
            { showTimer && <Timer/> }
            <button onClick={()=>{ setShowTimer(!showTimer) }}>클릭하세요</button>
        </div>
    );
};

export default App3;

 

Timer.js

import React, { useEffect } from 'react';

const Timer = () => {
    //Mount할 때 호출 componentDidMount
    //UnMount할 때 호출 componentWillUnMount
    //Update할 때 호출 componentDidUpdate
    useEffect(()=>{
        const timer = setInterval(()=>{
            console.log('타이머 돌아가는중....');
        },1000)
        return ()=>{
            clearInterval(timer);
        }
    },[])
    return (
        <div>
            타이머를 실행합니다.
        </div>
    );
};

export default Timer;

3) 

App4.js

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

const App4 = () => {
    //클래스 컴포넌트 보이기
    const [ funcShow, setFuncShow ] = useState(true);
    return (
        <div>
            <h1>hello world</h1>
            <input type='button' value='클래스 컴포넌트 보이기/안보이기' onClick={()=>setFuncShow(!funcShow)}/>
            { funcShow && <ClassComp initNumber={2}/> }
        </div>
    );
};
//class컴포넌트 만들기
class ClassComp extends Component {
    //state생성
    //props값을 state값으로 지정
    state = {
        number: this.props.initNumber,
        date: new Date().toLocaleTimeString(),
    }
    //렌더가 끝난 다음 실행 사이클 메소드
    componentDidMount() {
        console.log('class형 컴포넌트 => componentDidMount');
    }
    //컴포넌트 Unmount되기 직전 실행사이클 메소드
    componentWillUnmount() {
        console.log('class형 컴포넌트 => componentWillUnmount');
    }
    render(){
        console.log('class형 컴포넌트 => render');
        return(
            <div className='container'>
                <h2>클래스 컴포넌트</h2>
                <p>Number : <span>{this.state.number}</span></p>
                <p>Date : <span>{this.state.date}</span></p>
            </div>
        )
    }
}
export default App4;

'노력이 좋아서' 카테고리의 다른 글

<step66>'react_styledcomponents'  (0) 2022.06.23
<step66>'react_scss'  (0) 2022.06.23
<step65>'react_todolist실습'  (0) 2022.06.22
<step64>'react_배열'  (0) 2022.06.21
<step64>'react_event, ref'  (0) 2022.06.21

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.