#8.React(useEffect)
함수형 컴포넌트
-LifeCycle Methods가 없음. 그 대신 useEffect라는 Hook이 있음.
-useEffect는 Hook이므로 함수
사용법(Mount, Update될 때)
useEffect(()=>{
console.log(“안녕하세요”)
})
—> 페이지가 리랜더할때 마다 이게 실행됨.(이런 리랜더를 컨트롤할 수 있음. 그것은 바로 두번째 parameter에 있는 배열.)
useEffect(()=>{
console.log(“안녕하세요”)
} , [])
—> 이 컴포넌트가 로드될때 제일 처음 한번만 실행해라. (리랜더링되어도 한번만 실행하게 됨. 이 useEffect는 눈에 불을 키고 배열만 보는중인데 배열이 비어 있음.)
useEffect(()=>{
console.log(“안녕하세요”)
} , [color])
—>color라는 변수에 변화가 있을때만 첫번째 코드(함수)를 실행해라
useEffect(()=>{
console.log(“안녕하세요”)
} , [color, age, height])
—> 두번째 배열안 3개의 변수중 하나라도 변화가 있으면 첫번째 코드(함수)를 실행해라.
사용법(UnMount될 때)
useEffect(()=>{
console.log(“안녕하세요”)
return () => {
여기 들어가는 코드들은 이 컴포넌트가 해체될때 run하는 코드, 예를 들어
network, API connection을 지우고 싶으면 remove code작성
}} , [color])
클래스 컴포넌트
- LifeCycle Methods(컴포넌트의 변화)
- Mount, Update, UnMount (생성, 수정, 삭제)
- componentDidMount(), componentDidUpdate(), componentWillUnmount()
Author And Source
이 문제에 관하여(#8.React(useEffect)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@seongjae/8.ReactuseEffect
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(#8.React(useEffect)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seongjae/8.ReactuseEffect저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)