TIL_29_221208

29 일 차 회고

으쌰으쌰 🔥

모두의 애기를 들어보면 다 똑같은 생각을 하고 있었다.
머리에 들어오는게 없다. 시간 너무 잘간다. ⏰
다들 똑같이 초조 해 하고 각자 스터디를 하고 있는걸 보면서 나도 그만 걱정하고
뭐라도 열심히 해야겠단 생각을 많이 하게 되었다. 불안하지만 그래도 해내야지.🔥
하루에 2번씩 완강하고 뭐든 반복이 답이다. 반복반복 무한 반복 ~ 🥹🥹🥹

React useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
• 렌더링 될 때 실행된다.

사이드 이펙트를 관리 할때 useEffect 를 실행한다.

• 사이드이펙트 : 컴포넌트가 화면에 그려졌을 때 , 사라질 때 eventListener구독 or 해제, API요청을 하는 작업

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

const App () => {
	const [valse,setValue] = useState('');
  	useEffect(()=>{
   		console.log('useEffect') // input 을 입력하면 계속 실행된다.
    });
  return(
    <div>
		<input type="text" 
           value ={value} 
          onChange={(event)=>{
            setVelue(event.target.value)
          }}
       />  
    </div>
  )
}

export default App;

의존성 배열

• 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.

useEffect(()=>{
	콜백함수(화면에 그려질때(렌더링) 실행되는 함수)
},[]) // 의존성 배열이 변했을때에만 useEffect를 실행한다.

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

const App () => {
	const [valse,setValue] = useState('');
  	useEffect(()=>{
   		console.log('useEffect') //  value 실행했을때만 실행
    }, [value]); //의존성배열
  return(
    <div>
		<input type="text" 
           value ={value} 
          onChange={(event)=>{
            setVelue(event.target.value)
          }}
       />  
    </div>
  )
}

export default App;