[React] useEffect

01 useEffect

• 생명주기 관리를 제공하지 않는 컴포넌트에 생명주기를 부여. 
• useEffect 를 사용하면 렌더링이 다시 될 때 마다 추가적인 구문을 실행할 수 있음.
• 첫 번째 인자는 콜백함수 
• 첫 번째 인자 호출 여부는 두 번째 인자에 달렸음. dependency
• 두 번째 인자 없으면 모든 렌더링 할 때 마다 호출.
• 두 번째 인자 빈 배열이면 최초 1회 렌더링 시에만 호출.
• 두 번째 인자 배열에 상탯값이 써있으면 쓰여 있는 상탯값에만 의존해서 호출.

 

 

 

02 예제

useEffect 사용 안해??

 

 

 

02-1  기본형

• 모든 렌더링 직후에 콜백 (함수에 함수를 전달) 을 호출!
• useEffect(() => { console.log("렌더링마다 호출되네") })

 

 

src

 

src/components

• src/components/Fila.js

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

function Fila(){
    const [ currentValue, setValue ] = useState("")
    const [ currentNumber, setNumber ] = useState(0)

    // 기본형 : 모든 렌더링 직후에 콜백 (함수에 함수를 전달) 을 호출!
    useEffect(() => { console.log("렌더링마다 호출되네") })

    return <>
    <h1>{currentNumber}</h1>
    <button onClick={() => setNumber(currentNumber - 1)}>-</button>
    <button onClick={() => setNumber(currentNumber + 1)}>+</button>
    <br />
    <input type="text" onChange={e => setValue(e.target.value)}/>
    <p>{currentValue}</p>
  </>
}

export default Fila

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Ball from './components/Ball';
// import Chrome from './components/Chrome'
// import DragonBall from './components/Dragonball'
// import Extra from './components/Extra'
import Fila from './components/Fila'

ReactDOM.render(
  <React.StrictMode>
    <Fila />
  </React.StrictMode>,
  document.getElementById('root')
);

 

Fila.js

index.js

 

렌더링 할때 마다 호출 됨!

 

 

 

 

02-2  의존성 추가 01

• 빈 배열을 추가해주면 최초 1회에만 콜백 호출.
• useEffect(() => { console.log("렌더링마다 됐네") }, [])

 

 

src

 

src/components

• src/components/Fila.js

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

function Fila(){
    const [ currentValue, setValue ] = useState("")
    const [ currentNumber, setNumber ] = useState(0)

    // 의존성 추가 1. 빈 배열을 추가해주면 최초 1회에만 콜백 호출!
    useEffect(() => { console.log("렌더링마다 됐네") }, [])

    return <>
    <h1>{currentNumber}</h1>
    <button onClick={() => setNumber(currentNumber - 1)}>-</button>
    <button onClick={() => setNumber(currentNumber + 1)}>+</button>
    <br />
    <input type="text" onChange={e => setValue(e.target.value)}/>
    <p>{currentValue}</p>
  </>
}

export default Fila

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Ball from './components/Ball';
// import Chrome from './components/Chrome'
// import DragonBall from './components/Dragonball'
// import Extra from './components/Extra'
import Fila from './components/Fila'

ReactDOM.render(
  <React.StrictMode>
    <Fila />
  </React.StrictMode>,
  document.getElementById('root')
);

 

Fila.js

index.js

 

최초 1회만 렌더링 됨!

 

 

 

 

02-3  의존성 추가 02

• 배열 안에 상태명을 써주면 그 상태가 변했을 때마다 콜백 호출!
• useEffect(() => { console.log("렌더링마다 됐네") }, [currentNumber])

 

 

src

 

src/components

• src/components/Fila.js

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

function Fila(){
    const [ currentValue, setValue ] = useState("")
    const [ currentNumber, setNumber ] = useState(0)

    // 의존성 추가 2. 배열 안에 상태명을 써주면 그 상태가 변했을 때마다 콜백 호출!
    useEffect(() => { console.log("렌더링마다 됐네") }, [currentNumber])

    return <>
    <h1>{currentNumber}</h1>
    <button onClick={() => setNumber(currentNumber - 1)}>-</button>
    <button onClick={() => setNumber(currentNumber + 1)}>+</button>
    <br />
    <input type="text" onChange={e => setValue(e.target.value)}/>
    <p>{currentValue}</p>
  </>
}

export default Fila

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Ball from './components/Ball';
// import Chrome from './components/Chrome'
// import DragonBall from './components/Dragonball'
// import Extra from './components/Extra'
import Fila from './components/Fila'

ReactDOM.render(
  <React.StrictMode>
    <Fila />
  </React.StrictMode>,
  document.getElementById('root')
);

 

Fila.js

index.js

 

currentNumber 일때만 호출!