04/10-1

Posted by:

|

On:

|

useEffect-Hook

useEffect를 사용하면 라이프사이클 메서드의 효과를 나타 낼 수 있다. DidMount와 DidUpdate를 함께 쓰는것과 동일하다.

useEffect(()=>{},[])모양

두번째 인자인 []의 경우 빈 값이면 컴포넌트 생성시에 실행

[] 안에 state 값이 들어갈 경우 특정 state값이 바뀌면 useEffect를 실행하도록 한다.

즉, 만약 특정 state의 set메서드를 넣게 된다면 그 특정 state의 값이 바뀔때마다 set메서드 가 실행된다.

awake-asyne 또한 쓸 수 있다.[JS에서 썼던 것]

대신 asyne을 써서 비동기 함수로 만들어야 하는데 useEffect에는 쓸 수 없기 때문에 밖으로 꺼내서 메소드로 만들어서 useEffect에 넣어야 한다.

그리고 그 값을 바로 들어오지 않기 때문에 또 다른 useEffect를 이용해 리스트가 받았으면 return에 조건부를 붙여서 실행시킬 값을 넣어줘야 한다.

비동기 이기 때문에 값이 바르게 가져왔는가 확인해줘야 한다[콘솔에 출력으로 확인. React는 화면에 에러가 나오기 때문에 React 에러로 확인하는 방법도 있다.]