useEffect와 의존성배열, useRef, 컴포넌트 생명주기

 7/26

지난주까지 배웠던 부분들이 서비스를 만드는데에 있어서 핵심 코어부분이라고 할 수 있다.
프론트엔드의 컴포넌트 라이프사이클, 백엔드와 데이터베이스, 이미지 저장소, 검색 시스템 등이 예가 된다.
이유는, 전체를 알아야 백엔드 개발자 및 기타 기획자, 프로젝트매니저 등과 커뮤니케이션에 무리가 없기 때문이다.

class 컴포넌트의 render, componentDidMount, componentDidUpdate, componentWillUnmount 등과 마찬가지로 함수형 컴포넌트에는 useEffect가 있다.
class컴포넌트는 함수형 컴포넌트로 전환이 가능했고, 이 때의 핵심은 useEffect와 dependency array(의존성 배열) 이다.
또한, componentDidMount 시점에서, ref를 활용해서 인풋 태그에 focus()를 맞추는 작업, 스크롤 위치를 변경하는 작업 등을 할 수 있다.
그리고, componentWillUnmount 시점에서, 채팅 서비스 등에서의 활성화 비활성화 신호를 백엔드 api를 통해 줄 수 있다.

이렇게 유용한 useEffect를 사용하는데 있어서 주의사항 2가지가 있다.
useEffect에서 state를 변경하게 되면, 추가적인 렌더링이 발생할 수 있으므로 성능에 좋지 않은 영향을 끼칠 수 있다.
(반드시 쓰면 안되는 것은 아니다.)
useEffect에서 변경한 state가 dependency array에 걸려있는 경우, 무한 루프가 발생할 수 있으므로 조심해서 사용한다.

 

프로그래머스

맨 왼쪽,오른쪽, 몇번째에 있는 것을 없앤다

3이 사라짐

답

map = 배열이 나타남, forEach는 안나옴

 

전에 했던 페이지네이션

컴포넌트의 재사용성을 높임

현재 페이지가 클릭한 페이지와 같으면 파란색으로 적용시킴

현재 페이지가 클릭한 페이지와 같으면 진하게 표시

기본 초기값을 넘겨줘야 함

커서 깜빡깜빡 할수있게 할수 있는 곳

[] = 의존성 배열 = 디펜더 씨 어레이

누르면 변경되는 것

변경이 됬을때 어떤 작업을 하고 싶다면?

useEffect에 작성

useEffect에 작성

카운트가 변경되면 ussEffect가 다시 실행

 

주의!!

한번 더 실행이 됨

주의!!

count가 들어가면 계속 올라감

 

위 사진에 있는거와 연결

 

깜빡깜빡

함수형 컴포넌트가 많음

클래스형 컴포넌트에서 함수형 컴포넌트로 넘어가는 회사도 있음

 

 

객체

this = 나 자신

 

누르면 계속 찍히고 있음

컴포넌트가 사라질 때 실행되는 명령

나가기 누르면 잘가요~

리액트에서 제공하는 기능

 

클래스형

위 사진은 클래스 컴포넌트를 사용하여 만든 것이다

함수형으로 바꾸면?

함수형, 하나로 처리 가능

 

같은 부분

주의!!

async 적는 방법이 다름