태초에 클래스형 컴포넌트가 죽지 않고 살아있던 시절
이런 그림이 아주 성행했다
아마 리액트 유저중에 안본사람 없을듯?나도 부트캠프시절에 봄
스윽
봄
그래서 아직도 잘 몰라서 다시 씁니다 이제는 제대로 araboza
일단 라이프사이클, 즉 생명주기를 알려면 꼭 알아야하는것
Mount, Update, Unmount
dslr을 사보신적이 있나요?
카메라 렌즈를 갈아 끼울 때 마운트 한다 그럼
그래서 마운트는 올린다는 뜻 정도로 생각하면 좋습니다
산 아님
그게뭔데..그거 왜 알아야하는데..
놀랍게도 구글상의 수많은 라이프사이클 포스팅 중에 라이프사이클을 알아야 하는 목적을 가진 포스트가 하나 있다. 이거 맞나..
나는 라이프사이클을 알아야 하는 이유로는 라이프사이클이 곧 리액트의 시간표라서 라고 생각하기로 했다. 사람도 시간표대로 살아야 효율적으로 살잖아.. 리액트도 그런거야..
(레거시 된) 생명주기는 곧 준비-마운트(태어남)-업데이트(전직)-언마운트(죽음) 단계로 나뉜다. 그 순간순간을 잘 활용해서 이 시점에는 이동작이, 저 시점에는 저 동작이 일어나게끔 '시간표'를 그려놓으면 더 효율적으로 렌더를 탈수 있겠지?
클래스형 컴포넌트의 장점 중 하나는 생명주기 조절이 이지하다는 것이다..
생명주기를 조절하고싶으면, 그림에 나와있는 것을 그대~로 적어주면 됨 componentDidMount 아래의 것들이 하나의 메소드니까 그대로 적어서 코드를 쭉 짜면 되는데!
문제는 리액트가 클래스형 컴포넌트를 버렸다는 것.
우리는 함수형 컴포넌트와 친구해야한다는 것..
함수형 컴포넌트는 훅이랑 친구라는것...
곤란해....
이번포스팅에선 레거시된 저 그림의 용어들의 사용을 최대한 지양하고,(안쓰인다니까)
신형생명주기가 눈에 익을 수 있도록 훅만 죽도록 팰 예정
모든 것이 버전 업이 이루어짐에 따라 그렇듯 생명주기 또한 이전버전과 이후버전이 1:1로 매치는 안된다.
useEffect 하나가 마운트, 업데이트, 언마운트까지 다 해준다..
대단한녀석
useEffect(() => {
console.log('대박남 그냥');
});이렇게 의존성배열(useEffect의 두번째 인자로 들어가는 배열, deps라고도 함.)을 안넣고 실행키면 얘는 모든 생명주기마다 매번 첫번째 인자로 들어간 함수, 즉 콘솔로그가 실행이 된다.
이러면 렌더링 대박 나겠지요...
실제로도 그랬다. 위는 인풋에 숫자 6개 입력한 후의 콘솔창이다
대박이 났다 아주
이것을 방지하기 위해 리액트는 렌더링을 조절해줄 수 있게끔, 여러 사용법을 만들어 놓았다
useEffect(() => {
console.log('마운트 될 때만 실행됨');
}, []);
똑같이 숫자 6개를 입력했지만 깔끔하게 콘솔 하나만 찍히는 모습을 확인할 수 있다
오잉? 한번만 실행되면 안돼요 저 업데이트 해야돼요
=>의존성배열에 업데이트 원하는 값을 넣어주세요..
useEffect(() => {
console.log('인풋창에 입력할 때만 실행됨');
}, [bar]);
마운트 할 때 한번 실행된 다음,
인풋에 값이 들어올 때마다 실행이 됐다. 숫자 네개 입력해서 앞에 4 뜬거 보이쥬?
마지마그로
useEffect에 return하는 함수 붙일 수 있는것을 오늘부터 아셔야합니다
useEffect(() => {
return () => console.log('화면에서 사라질 때 보임');
}, []);이렇게 함수를 리턴하면 그 함수는 컴포넌트가 화면에서 사라질 때 실행되는 함수다.
근데 이자식은 나는 볼 방법을 모르겠다.
위와 같이, 콘솔창은 깨끗하다. 화면에서 사라질 때(언마운트 될 때) 실행이 된다는데..눈으로는 확인할 수 없었다.
하지만 언마운트 될 때 사라져야 하는 것들이 웹 상에는 분명히 있다..예를들어 이벤트리스너라던지 토큰도 그럴 수 있겠고
그런 동작을 수행할 때 사용하면 좋겠지용용용..
요약
화면에 등장하고/화면위에서 놀다가/사라지는 과정을 각각 마운트/업데이트/언마운트라고 하고
그 과정을 세세하게 컨트롤 하면 최적화하기 좋으니까 그에 맞춰 코드를 짜면 좋고
그럴 때 사용하는 것이 useEffect이다
끝
