[React] useEffect

[React] useEffect

728x90

useEffect는 ComponentDidMount, ComponentWillUnMount,ComponentDidUpdate 를 합친 것이라고 생각해도 좋다.

화면에 랜더링될 때와 업데이트 그리고 화면에서 사라질 때 useEffect 안에 있는 함수를 실행시킬 수 있다.

useEffect(function, array) //인자로 받아온 function의 실행조건 //1. 컴포넌트 생성 후 처음 화면에 랜더링 //2. 컴포넌트에 새로운 props가 전달되며 랜더링 //3. 컴포넌트에 상태(state)가 바뀌면 랜더링 //두 번째 인자는 배열이다. //이 배열은 조건을 담고 있다. 여기서 조건은 boolean 형태의 표현식이 아닌, //어떤 값의 변경이 일어날 때를 의미. 따라서, 해당 배열엔 어떤 값의 목록이 들어간다. //이 배열을 종속성 배열이라고 부른다. //즉, 배열 내의 어떤 값이 변할 때에만, 함수가 실행된다. //만약, 빈 배열을 인자로 넣으면? 컴포넌트가 처음 생성될 떄만 effect 함수가 실행된다 //처음 단 한번, 외부 API를 통해 리소스를 받아오고 더 이상 API호출이 필요하지 않을 때에 사용할 수 있음.

useEffect기 하는 일은 무엇인가?

- 컴포넌트가 랜더링 이후에 어떤 일을 수행해야하는 지 말해준다.

- 인자로 넘긴 함수를 기억했다가 DOM업데이트를 수행한 이후에 불러낸다. 인자로 넘긴 함수를 'effect'라고 한다.

useEffect를 컴포넌트 안에서 불러내는 이유는?

- 컴포넌트 내부에 위치시킴으로써 effect를 통해 count state변수 또는 props에도 접근할 수 있게 된다.

반응형

from http://codingbucks.tistory.com/242 by ccl(A) rewrite - 2021-12-28 02:01:04