1. Problem
React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거야.
우리는 State얘기도 했고, props얘기도 했으니까
이제는 마지막 걸 배워볼 거야.
우리가 이번 섹션에서 배울 게 왜 필요한지 이해하기 위해서는,
먼저
문제를 하나 정의해보자.
좋아, 문제를 정의하기 위해서 ReactJS가 어떻게 작동했는지 상기시켜보자구
괜찮지?
저번에 했던 것처럼 counter를 만들어줄게.
useState를 써줄거고.
그걸 react.js에서 import 하면 되지
보다시피 우리가 create react app을 사용하기 떄문에
여기다가 react라고 적어줄 필요는 없어.
우리가 react 점 뭐라고 쓰지 않고 그냥 useState만 import해줄 수 있어.
우린 useState가 반환값으로 array를 줄 거라는 걸 알아
그 array는 여기있는 value와, 두번째로 써준 modifier function이 되겠지
이번에는 state의 초기값으로 0을 줘볼게.
그러면 시작할 때 count의 값이 0가 될거야.
그리고 이게 counter를 modify하는 function이 되겠지.
자 이번에는 onClick function을 만들어보자.
이렇게 setValue를 써주면,이전 counter에 1이 더해져서 return 될거야.
좋아, 이번에는 'click me'라고 써있는 버튼을 만들자.
onClick을 해주고, 방금 만든 function을 보내줄게.
보다시피 우리가 create react app과 vs code를 사용하고 있기 때문에
여기 우리의 component에 붙여줄 수 있는 모든 event들을 볼 수 있어.
정말 멋지지? 완벽해.
이제, welcome 대신에 counter를 보여줄게.
좋아
이제 다 됐어.
그래서 이건 우리한테 낯설지 않을 거야.
이미 뭔지 알고 있으니까.
예전에 해봤었잖아.
그치? 우리가 여기서 하는건 state를 사용하는 것 뿐이야.
value를 받아오고, value를 수정하기 위해 function을 받아오고.
이전 state를 받아다가 +1값을 return하는 function을 만들었고,
그 값을 h1을 통해 보여줬어.
그리고 우리가 state를 modify할 수 있도록 하는 버튼이 있지.
그러니까 여기에서 무서워 할 건 하나도 없어.
자 이번에는 component가 render될 때 console.log를 찍어보도록 할게.
좋았어.
자 여기 보이듯이, 새로고침을 하면? 짠!
component가 처음으로 render될 때 console에 render가 찍히네.
이번에는 component의 state가 변화하고, 보다시피 다시 render가 됐어.
이건 정말 일반적이야.
이게 바로 우리가 계속 하던 것들이니까.
우리는 계속 state를 change해 왔고, 그럴 때 마다 이 모든 것이 다시 실행되는 것에 익숙했어.
counter에 0이 아니라 새로운 값이 들어가는 것만 빼고는 똑같이 function이 다시 실행되는 거지
1, 2, 3 이 들어가지
우린 이미 알고 있잖아.
이미 해봤으니까, 이게 반복적이라는 걸 알아.
이제, 우리가 해결해야 하는 문제가 코앞에 왔어.
가끔은, 계속 다시 render될 때 마다 반복실행되어도 괜찮은 코드가 있을 수 있어.
가끔은 그래도 괜찮지.
하지만 가끔은 그렇게 하지 않고,
component가 처음 render될 때만 코드가 실행되길 원할 수 있어.
그렇지?
좋아
아직 우리는 그렇게 할 수 없어.
지금은, 내 state가 변할 때마다 매번 이 console.log는 실행될거야
그걸 원하지 않을 때도 있겠지.
가끔은 첫번째로 render할 때만 코드를 실행하고 싶을 수도 있겠지.
그리고 나중에는 그렇게 하지 않을 수도 있어.
그래서 첫번쨰 render에만 코드가 실행되고, 다른 state변화에는 실행되지 않도록 하는거야.
좋아, 이런 일이 언제 일어나냐면
예를들어, 네가 API를 통해 데이터를 가져올 떄
첫번째 component render에서 API를 call하고,
이후에 state가 변화할 때, 그 API에서 데이터를 또다시 가져오고 싶진 않겠지?
그치? 예시로 한번 써보자.
만약에 여기에서 API를 call했다고 생각해보자.
새로고침을 하면 우리 component가 처음으로 render될 거고, 짠.
API가 call될거야.
여기까지 괜찮아.
좋아좋아.
데이터를 받았고, 이제 그걸 사용자에게 보여줄 수 있어.
아름다워.
하지만 다시 state가 변화하면, API를 또 불러올 거고, 이건 굳이 필요하지 않아.
만약 state가 계속 변화하면
우리는 API를 계속 call해야 하겠지.
이건 진짜 진짜 별로야.
이게 바로 우리가 해결하고 싶던 문제네.
우리는 어떻게 특정 코드들이 첫번째 component render에서만 실행되게 하는지 배우고 싶어.
처음 한번만.
나중에 state가 변화해도, 그 코드는 다시 실행되지 않는거야.
그치?
이게 바로 우리가 해결하려던 문제였어.
다시 한번, 중요하니까 꼭 기억해.
state가 변화할 때 너의 모든 component는 다시 실행되고,
모든 code들도 다시 실행될거야.
그치? console.log도, 이 부분도 다 다시 실행될거야.
그리고 우리는 물론 업데이트 된 value를 보게되겠지.
우리가 업데이트 된 value를 볼 수 있는 이유는?
이 모든게 다시 실행되기 때문이지.
그렇지?
좋아, 마지막으로 정리. 네가 state를 변경할 때 모든 code들은 다시 실행돼, 항상.
가끔은 이게 괜찮지만,
가끔은 너의 component 내부의 몇몇 코드는
처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 수 있겠지.
2. useEffect
저번 시간에 설명했던 문제에 대한 해답을 찾아볼거야.
지난시간에 설명했던 문제는 바로,
가끔은 우리가 특정 코드의 실행을 제한하고 싶다는 거였어
component가 맨 처음 render될 때만 말이야.
그러고 다시는 실행되지 않도록 하는거지
그치, 우리는 코드를 딱 한번만 실행하고, 다시는 실행하지 않을 거야.
알다시피 여기 이 코드는
state가 변경될 때 마다 계속 실행될 거야.
하지만 네가 API를 호출하거나, 어떤 중요한 일을 할 때에는
이걸 계속 반복하지 않고 딱 한번만 하면 되겠지.
이 문제를 해결해보자.
당연히 reactJS 팀이 우리를 위해 개발해 둔 게 있어.
그건 바로 useEffect라고 불리는 function이야.
useEffect는 두 개의 argument를 가지는 function이야.
첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드가 될 거야.
두 번째 argument는 정말 마법같은 친구인데, 일단은 나를 믿고
나중에 다시 이야기 해보도록 하자.
좋았어.
일단 내가, 이전 영상에서 말했던 문제를 해결하는 방법을 보여줄거야.
그 다음에, 또 어떤 문제가 발생하는지 보고, 그 때 이 마법같은 argument에 대해 얘기해 보자.
그러니까 지금은 일단 나를 믿어봐. 마법 같은 거야.
일단은 useEffect가 어떻게 작동하는지 봐봐.
알겠지?
이 부분에는 언제나 실행 될 코드가 있어.
그러니까 'I run all the time'이라고 적어볼게.
(위와같이 작성)
좋아, 이번에는 useEffect를 사용할건데,
useEffect에는 component가 처음 render할 때 실행되고
다시는 실행되지 않을 funciton을 넣어줄 거야.
일단 여기에 iRunOnlyOnce라는 function을 만들자.
그리고 이 function은 i run only once라고 console.log해줄거야.
좋았어.
자,이제 이렇게 useEffect에게 우리의 function을 주고
그리고 useEffect에게 두 번째 argument로써 빈 array를 하나 줄 건데
걱정하지마.
이건 그냥 마법이고,
나중에 이 마법 뒤에 뭐가 숨어 있는지 확인할거야.
좋아, 일단 지금은
useEffect가 어떻게 우리의 문제를 해결하는 지 보여주고 싶어.
좋아, 여기에 와서 새로고침을 하면, I run all the time이 찍히고 있네.
그치, 여기에 써 줬으니까.
그러니까 I run all the time. 완벽해
그 다음엔? I run only once.
자 보다시피, useEffect가 우리의 function을 호출했어.
바로 component의 첫 번째 render 시점에 말이지.
그치? 완벽해.
이번에는 state를 변화시킨 다음에 console에 뭐가 찍히나 볼게.
자, 봐봐.
방금 본 것 처럼, 이 코드는 state가 변할 때 마다 매번 실행되는 반면,
이 코드는 한번만 실행 됐어.
이걸 봐봐.
오케이, 이건 우리에게 정말 좋은 소식이야
이렇게 하는 대신에 조금 더 단순화 해 볼게.
여기에 익명의 function을 만들어 볼게
그리고 여기에 console.log로 CALL THE API라고 쓸게
이제 새로고침하면?
자 됐다.
여기 보니까 뭔가가 실행되네
여기에서 한번 CALL THE API를 하고, 계속 refresh해도 그건 반복되지 않고 있어.
이게 바로 우리가 고치고 싶던 문제였고, 요 녀석이 해결해 줄 수 있겠지
바로 그 이유로 우리가 useEffect를 사용하게 될 거야.
그치? 가끔은 API를 딱 한번만 호출하고 다시는 하지 않고 싶을 테니까.
좋아, useEffect function은 쉽게 말해서 우리 코드가 딱 한번만 실행될 수 있도록 보호해줘.
그거야,
딱 한번만.
이게 우리가 useEffect를 사용하는 이유지.
알겠지?
그래서, 여기있는 function이랑 나중에 배울 마법을 가지고 useEffect를 사용할 때는
state가 변화하든, 무슨 일이 일어나든 코드가 단 한번만 실행 될 거라고 확신할 수 있어.
어떤 일이 일어나도 이 코드는 딱 한번만!
자 이제 우리는 reactJS가 우리에게 언제 코드를 실행할지 안할지 결정할 tool을 제공한다는 걸 알아.
만약 이게 없다면, 정말 정말 불편할 거야.
왜나면, 계속 말하듯이 state를 refresh할 때 마다
항상이 아닌 한번만 코드를 실행해야 할 수도 있으니까.
좋아, 이제 그럼 다음 영상에서 만나자.
3. useState Deps
다른 문제를 한번 찾아 볼 거야.
좋아, 여기에 오는 마법이 무엇인지 배우면서
그 문제를 해결해 볼 거야.
좋았어.
이제 내가 하고싶은 건, counter랑 다른건 제자리에 두고
search bar를 한 번 만들어 볼게.
일단 text type인 input을 하나 넣고,
placeholder에는
Search here라고 적어주자.
이제는 연습을 해 볼거야.
저번에 했던 state와 input 콤비네이션을 연습해보자.
좋아, 그러려면 또 다른 state를 만들어줘야해.
useState를 만들고 기본 text로는 빈 값을 줄게
그리고 이거는 keyword라고 이름 붙여보자.
여기에 쓰고.. 두번째 아이템은 keyword를 설정할 setKeyword function으로 할거야.
기억해, 꼭 이렇게 이름을 지을 필요는 없어.
네가 원하는 대로 이름을 만들어도 돼.
첫 번째 아이템이 value고,
두 번째 아이템이 그 value를 modify하는 function인 것만 안다면
그걸로 충분해.
알았지?
좋아.
이번에는 onChange라는 새로운 function을 만들거야.
좋아, 이 function은 우리의 input에 event listener로 들어갈 거야.
우리는 onChange가 발생하면 여기서 그 event를 받을거고
이 event가 text를 가지고 있겠지.
그래서 setKeyword를 다음과 같이 만들거야.
event.target.value
이건 해본 적 있으니까 그만하고 설명할게.
이제는 이 input에 value를 줘서 state와 연결될 수 있게 하자.
좋아, 아주 간단해.
여기 있는 거 모두 이전에 해본거야.
우리가 한 건 그냥 input을 만들고 event listener를 연결했고,
이 function이 작동할 때 argument로 event를 받을거야.
그리고 event를 발생시킨 input에서 value를 받아서,
그 value를 여기 있는 'keyword' state에 넣어줬지.
그리고 그 keyword를 가져와서, input의 value로 사용하면
우리가 원할 때 이 input를 조작할 수 있겠어.
좋아, 완벽해.
그러면 여기로 넘어와서, 새로고침 해보자.
검색을 한번 해보자.
다시한번 보다시피, 우리가 타이핑할 때 마다 state를 modify하고 있어
왜냐하면 여기에서 Keyword를 set 해주었기 때문이야.
그래서 이게 계속 작동되는거야.
그치? useEffect를 써야 하는 또 다른 이유를 찾았네.
만약에 누군가 글자를 타이핑할 때 마다 API를 새로 호출한다고 생각해봐. 완전 별로지.
다행히도 우리는 useEffect가 있으니까 API를 한번 만 호출할 수 있어.
그런데 이번에 하고 싶은 건, 검색이야.
내가 이 검색창에 무언가를 썼을 때, 검색API를 이용하는거지.
그런데, 그렇다고 이 state를 클릭할때 마저 검색API를 호출하고싶지는 않아.
음 조금 더 자세히 설명 해 볼게.
여기에 와서, 내가 search bar에 입력한 keyword와 함께
search for, keyword라고 console.log를 찍어줄게.
알았지? 그래서 여기에
marvel이라고 검색해볼래.
좋아, 이제 무슨 일이 일어났는지 봐봐.
이게 계속해서 실행되었네
이게 계속 실행되고, 그 다음에 SEARCH FOR가 실행됐어.
좋아, 여기에서 난 marvel이라고 검색하고 싶었으니까 목표는 이뤘어.
그런데, 여기에서 계속 버튼을 클릭했더니, marvel도 계속 검색되네?
이건 아닌 것 같은데.
다시 한 번, 봐봐.
계속 marvel을 검색하고 있어.
이건 좋은 생각이 아니지.
그치? 나는 search keyword에 변화가 있을 때 만! marvel영화를 검색하고 싶은거잖아.
나는 counter가 변화할 때에도 marvel 영화를 검색하고 싶지는 않아.
그런데 지금은 counter 변화시에도 검색이 되고있잖아? 이걸 원하지는 않는다구.
keyword가 변화할 때만 marvel을 검색하도록 할 거야.
user가 입력하는 것들은 바로 여기 들어있을거고
다시 한번, 이게 계속 반복되는 이유는 우리가 state를 변화시킬 떄마다
이 줄과, 이 줄 모두 다 실행되기 때문이야.
그치? 이게 문제네.
이제 나는 내 코드의 특정한 부분만이 변화했을 때,
원하는 코드들을 실행할 수 있는 방법을 배우고 싶어.
즉, movie state가 변화할 때만 user가 원하는 영화를 검색하고 싶다는 거지.
지금은,
counter가 변화할 때도 영화를 검색하고 있는데, 이걸 원하지는 않아.
그치?
여기에서 우리가 useEffect의 마법을 배울거야.
여기에 한번 더 useEffect를 써줄게.
좋아, 이제 하고 싶은 것은
여기에
(console.log 작성)
keyword를 검색할거야.
완벽해.
그런데 내가 이렇게 하면, 딱 한번만 실행되고 말겠지?
좀 전에 말 했듯이, 내가 원하는 건 keyword가 변화할 때만 코드를 실행하는 거였어
counter가 변화할 때는 제외하고.
여기가 바로 마법이 벌어지는 지점이야.
자, 네가 keyword가 변화할 때 코드를 실행하고 싶다면, 이 자리에 'keyword'라고 써줘.
여기서 하는 건, 이 'keyword'가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 거야.
자 이번엔, counter가 변화할 때에는
이 코드가 실행되지 않을거야.
이 코드는 keyword가 변화할 때 만 실행될거야.
이게 바로 우리가 여기에 빈 array를 써 주었을 때 코드가 단 한번만 실행되는 이유야.
여기에서는 react가 지켜볼 게 아무것도 없으니까 처음 한번만 실행되겠지
여기에서는 keyword가 변화할 때 마다 코드가 항상 실행 될거고,
이건 우리가 react.js에게 '이 keyword를 지켜봐.'라고 말해줬기 때문이야.
그게 변화할 때 코드를 실행하라는 말이지.
어떻게 작동하는지 확인해보자.
여기에 와서
좋았어.
예상대로, 처음에는 모든 게 실행되고
완벽하지.
이번에는 이 버튼을 클릭해 볼게.
보다시피 이번에는, 계속 실행되고자 했던 코드만 실행되고,
movies API는 호출되지 않는 걸 볼 수 있어!
그런데 만약에 영화를 검색한다면?
보다시피 이제는 영화를 검색하고 있어!
봤지? 이제 useEffect의 마법이야.
그런데 이 검색창은 아직 완벽하게 동작한다고는 할 수 없는데,
그건 component가 시작될 때도 검색이 되고 있기 때문이야.
여기에서는 이렇게 해보자.
keyword가 빈 값이 아니라면, 그 때 keyword를 검색하자.
여기에 keyword.length가 5보다 길 때 라는 조건도 추가해주자.
됐어.
자, 이제 보면, 항상 실행되는 코드와, movies API가 모두 한번 씩 실행됐어.
좋아.
이번엔 여기로 와서,
(버튼을 누르면) 다른것들은 아무것도 실행이 안되고 있어.
완벽해.
이번에는 검색을 해볼거야. m을 누르면...
아무 일도 안일어났어.
a...아무 일도 안일어났고
아
무
일
도
오 됐다!
이제 marvel에 대해 검색이 됐어!
다시 한번 이유는, 이 코드가 keyword가 변화할 떄마다 실행되는데,
우리가 체크할 조건을 한 가지 더 넣어줬기 때문이지!
keyword의 길이가 얼마인가?
keyword의 길이가 5보다 길 때 검색을 하겠다.
됐지? 이게 다야.
이제 useEffect에서 알아야 할 건 다 배웠어.
마지막 한 개가 남긴 했는데, 아직 꼭 필요한 건 아니라서
나중에 얘기해볼게.
근데 지금은, 이걸로 끝이야.
이제는 언제 코드가 실행될지 결정하는 방법을 배웠어, 예를 들면
component가 생성되는 첫 시작점이라던가,
아니면 무언가가 update될 때도 코드를 실행할 수 있지.
그리고 우리는 특정한 keyword가 update될 때만 코드를 실행할 수도 있어!
이걸 연습하려면, 우리는 모든걸 하나 씩 나눠볼 수 있어.
이번에는 여기에 와서 I run only once(나는 한번만 실행돼요) 라고 써보자.
좋아, 이번에는 여기에다 console.log으로
I run when 'keyword' changes.(나는 키워드가 변화할 때 실행돼요)
좋아, 이번에는 useEffect 또 하나를 만들건데
여기에는 I run when 'counter' changes.(나는 카운터가 변화할 때 실행돼요)라고 쓰자.
keyword와 counter 둘 다 우리 state안에 있는 거 알지?
이제 여기로 와서
새로고침
Inspect 해보자.
오케이. console로 와서.
좋아. I run only once. 완벽해.
I run when 'keyword' changes.
처음이니까 실행됐고
I run when 'counter' changes. 완벽해
이제 버튼을 클릭해보자.
좋았어.
I run when 'counter' changes. 완벽해!
자 이번에는? I run when 'keyword' changes.
다 됐다 여러분~!
보다시피 정말 강력한 tool이야.
이제 무언가 변화할 때 특정 코드를 실행할 수 있어.
여기에서는 counter가 변화하지?
그러니까 이 코드가 실행되고,
여기에는 keyword를 변화하고, 이 코드를 실행해.
됐지?
다시 한번, 이제 useEffect는 그렇게 마법같지 않아.
여길 보면, 이 코드는? 한 번만 실행되겠지.
왜냐면 react.js가 아무것도 지켜보지 않으니까.
이 코드는 keyword가 변화할 때 실행되고.
이 코드는 counter가 변화할 때 실행될거야.
useEffect는 우리에게 선택권을 줬어.
오케이, counter가 변화할 땐? 이걸 하고 싶어!
keyword가 변화할 땐? 다른 걸 하고싶어!
그리고 원한다면? 두 개를 합칠 수도 있지
이렇게, useEffect
그다음 console.log
('I run when keyword and counter change.' 입력)
그리고 여기에다 keyword와 counter를 같이 적어줄거야.
이거 말고도 원하는 걸 뭐든지 지켜보도록 적어줄 수 있어.
다시 여기로 와서, 새로고침!
모든게 완벽하게 실행됐고,
이제 여기에,
I run when counter changes. 랑
I run when keyword and counter changes.
여기서도? 똑같아.
I run when keyword changes.랑
I run when keyword and counter changes.
4. Cleanup
Cleanup function이라는 걸 배워볼거야
이건 그렇게 많이 쓰는 건 아니지만
선생님으로서 이것도 알려줄게
좋았어
자 이제 우리는 state라는 것을 만들거야
여기에 useState라고 써주고, 기본값으로는 false가 들어가
좋아, 이 state는 showing과 setShowing을 불러올거야
자 이번에는 hide나 show를 하기 위한
버튼도 만들어줄거야
이제 다음과 같이 조건절을 만들자
우리가 showing을 한다면, Hide라는 글자를 보여주고
showing을 하지 않으면, Show라는 글자를 보여줘!
됐지? 이번에는 onClick function도 만들어보자
이건 setShowing을 통해 이전 value를 받아온 다음에, 그 value의 반댓값을 return할거야
좋아, 이건 전에 해봤지?
이제 여기에 onClick을 써주자
완벽해.
이제 우리는 무언가를 보여주거나(showing) 숨길거야(hiding)
무언가가 뭐가 될지는 아직 몰라
여기 보이듯이 show, hide
잘 작동된다.
좋아 여러분
행복해! 다 잘되는군.
이제는 무엇을 보여주고 숨길 지 한번 보자
좋아.
우리가 보여주거나 숨길 것은 다른 component일거야
그렇지?
여기에 우리는 새로운 component를 만들어줄거야,
이것도 어짜피 또 하나의 function이지
이름은 Hello로 하자.
오케이.
이 component에서는 hello라고 써있는 title을 return시킬거야
끝. 엄청 간단해.
이번에는 우리의 app.js에 가서 한번 확인해보자!
자바스크립트를 쓸 거니까 중괄호를 열어주고
자바스크립트 쓸 때 중괄호 쓰는거 기억해야해!
이제 확인해보자. 만약 showing이 true라면
우리는 hello component를 render, 즉 보여줄거야
다시 한번 기억해둬, component는 단지 jsx를 부르는 function일 뿐이야!
그렇지,
component는 단지 jsx를 return하는 function인거야 .어렵지 않아.
사용할 때는 이렇게 하면 돼.
소문자가 아니고 대문자를 사용해야하지
알았지?
좋아.
자, 이제 여기가 showing이면, Hello를 보여줄거고
showing이 아니면 아무것도 안 보여줄거야.
정말 간단하지.
잘 되는지 확인해보자.
새로고침 하고
좋았어, show 와 hide !
오케이.
모두 여기에서 편안해야해.
이상한 거 하나도 없지?
좋아, 이제 많이 해봐서 어색한 거 하나도 없어!
여기서 하는건 그냥 state가 바뀔 때, 즉 showing이 변경 될 때
이것도 같이 바뀌어. 모든 component가 함께 바뀌지.
좋아, 어색한 건 하나도 없어!
완벽해
자, 이번에는 내 hello Component에 useEffect를 만들고 싶어.
그래서 여기에 useEffect를 써주고, function을 하나 만들어 줄거야.
이 function은 처음 한번만 불러올거야.
알다시피, dependencies가 없다는 건 함수를 한번만 불러온다는 거지
그치?
이제 여기에 I'm here라고 console.log해주자.
좋았어
한번 보자.
hide하면 아무것 도 안나오고
show를 하면
I'm here가 나오네
hide하면 아무것도
show하면 I'm here.
hide하면 아무것도
show하면 I'm here.
보다시피 잘 되는 이유는, 우리가 hello component를 hide할 때는
우리가 말 그대로 그 component를 screen에서 지워주고 있었어.
그래서 다시 보여줄 때는, 이것(console.log)도 다시 작동하겠지!
우리가 showing과 hiding하고 있으니까!
우리는 component를 없애버리거나(destroy), 생성(create)하고 있어.
이 줄은 component가 처음 생성될 때만 실행되지.
여기에서 새로운 건 아무것도 안했어.
그치 아무것도.
이건 그냥 useEffect의 복습이었어.
좋아.
지금까지, 잘 따라오고있지?
전부 잘 이해가 될거야
그치?
우리가 component를 show할 때,
그건 이 function이 작동된다는 말이고,
이건 즉 이 줄이 실행된 다는 뜻이지.
이게 다야.
우리가 component를 hide하면? 바이바이 되는거야
그런데 여기서 또 하나 보여주고 싶은건, react.js가 할 수 있는 건데
component가 destroy될 때도 코드를 실행할 수 있는거야.
이게 완전 섹시하지..
여기서 한번 다시 볼게.
우리의 body를 보자.
body를 보면, div가 있지
보다시피, 버튼 하나만 있고, 이걸 클릭할 때 component를 만들어.
그리고 다시 클릭할 때, 우리는 이걸 destroy해.
숨기는 게 아니라 아예 없애버리는 거야.
이거 봐봐, 코드 안에 아예 남아 있지 않고
스크린에서도 없어지지
여기에서 뭔가를 만들고,
여기에서는 없애고 있어.
우리가 create할 때는, 다 알다시피 useEffect를 사용해.
자 이번에는 우리가 destroy할 때도 function을 하나 작동시켜보고 싶어.
좋아, 여기 console.log를 일단 created로 바꿔주자.
이렇게 웃는 표정도 넣어줬어~
좋아, 이번엔 created
좋았어.
이번에는, console.log에 destroyed라고도 찍어보고 싶어.
우리가 이 component를 destroy할 때 말이야.
그러기 위해서 우리가 할 것은 function을 return해주는 건데
이 function은 useEffect에서 오게 돼.
이게 보기에도 듣기에도 복잡하다는 거 알아.
그치?
일단 내가 먼저 써보고 설명한 다음에,
모양을 바꿔보면 더 이해가 잘 될거야.
좋아..
우리가 할 것은 단지 component가 destory될 때 실행 될 function을 하나 만드는 거야.
위에 created라고 썼으니까 여기엔 destroyed라고 써보자.
슬픈표정.. 됐어.
나도 알아,
이게 진짜 헷갈린다는 거
이해해.
곧 바꿀거야.
일단은 이게 작동한다는 걸 먼저 보자.
새로고침 하고
좋았어
component가 존재하지 않는게 보이지?
component를 show하면? 환벽해
이번에는 component를 destroy해보자. 짠!
보이지? destroy하면서 function을 작동했어.
이게 바로 Cleanup function이라고 부르는 거야.
그냥 function인데, 너의 component가 destroy될 떄 뭔가 할 수 있도록 해주는 거지
예를 들어, 누군가는 component가 없어질 때 어떤 분석 결과를 보내고 싶어할 수도 있어.
그러면 그 사람들은 분석 API를 보낼 수 있겠지.
아니면, component가 사라지거나 없어질 때
event listener를 지우거나, 혹은 console.log에 뭔가 보여줄 수도 있겠지.
뭐든지 다 할 수 있어.
중요한 건, 이걸로 component가 언제 create됐는지, 언제 destroy됐는지 알 수 있다는거야.
그치?
이게 복잡하게 보이는 건 알지만,
이걸 잘게 쪼개서 생각해 보면 그렇게 어려운 것 만은 아니야.
기억해, useEffect는 function이지?
그러니까 여기에 만들어보자.
이 function은 effectFn이라고 불러볼거야.
아니면, 좀 더 function처럼 보이게 만들어 볼까?
function effectFn
좋아, effectFn은 생성될 때(create) 실행될 거야.
좋았어.
자 이제, 여기에 넣어주자.
잘 되는지 확인해 볼게.
야호~ created. 완벽해
보다시피 잘 작동됐어.
그리고 얘기했듯이, component가 파괴될 때 function을 실행하고 싶으면,
우리의 effectFn이 새로운 function을 return해야 해.
그러니까 또 다른 function을 만들어보자.
destroyedFn
그리고 다음처럼 console.log를 찍어주자
bye :(
아니야, 그냥 이 function을 hiFn으로, 위에껀 byFn으로 바꾸자.
완벽해.
됐지?
자, 이 component가 생성될 때, hiFn이 실행될거고, 그러면 이 코드가 실행될거야.
근데 이 component가 언제 파괴될 지도 알고싶으면,
hiFn이 byFn을 return 해주어야 할 거야.
그러니까 이렇게 byFn을 return해주자.
그치? 잘 보면 이게 조금 길어보이긴 하지만 결국 똑같은 거야.
다시한번 보면, useEffect는 function을 받고,
이 function은 dependency가 변화할 때 호출돼.
우리의 경우에는 dependency가 비어있으니까,
component가 처음 생성될 때 function이 호출된 후에 다시는 호출되지 않게되지.
이제, component가 파괴될 때도 function을 실행하고싶으면,
우리의 hiFn이 byFn을 return해야하지.
React.js가 hiFn을 실행할 거고,
component가 파괴될 때는 react.js는 hiFn이 return한 function을 실행할거야.
즉, byFn이지.
자 이제 여기로 와서 show를 누르면 created 그리고 bye bye
created, bye bye
이번 영상에서 할 건 이게 전부야!
보다시피 useEffect는 정말 유용하지?
useEffect는 우리에게 선택권을 제공해.
언제 code를 실행할지 말이야.
우리는 시작할 때만 code를 실행하게 할 수 있다는 걸 배웠고,
무언가가 변화할 때 code가 실행되도록 할 수도 있고,
이번에는 component가 파괴될 때 code를 실행할 수 있다는 것도 배웠어.
이게 은근히 진짜 유용하지.
개인적으로, 내 경험에 비추어 말해주는 건데
react 앱을 만들 때 이 byFn이 주로 필요하지는 않아.
나는 cleanup function을 사용하지 않거든.
이게 그렇게 자주 일어날 일은 아니야.
알았지?
가끔은 해야 할 필요가 있을 수도 있지
그러니까 할 수 있는 것 자체는 아주 좋아.
하지만 엄청 자주 사용하게 될 건아니야.
그러니까, 실제로 byFn같은 걸 어디에 적용해야 할지 떠오르지 않는다고 해도
걱정하지 않아도 돼.
정말 특정한 케이스에만 사용하게 될 거니까.
알았지?
자 이 영상을 마무리하기 전에, 이전에 했던 걸로 한번 돌아가 볼 건데
조금 다른 방식으로 여기 이 부분 코드들을 작성하는 건데
왜냐면 그게 많은 react.js 프로젝트에서 보게 될 구조가 될거거든
사람들은 주로 이런 function들을 만들지는 않고
보통은 useEffect안에 모든 것을 작성하지.
알겠지?
그러니까 이번에는 이렇게 생긴 function을 만들어보자.
그냥 이렇게 쓰는것도 한 방법일 뿐이고, 원한다면 말 그대로 하나씩 작성할 수도 있어.
알았지? 둘 중에 어떤게 더 좋은지 얘기해줘.
우리는 두 개 다 해보고, 비교해보자.
알았지?
왜냐면 내가 뭘 하고 있는지 헷갈릴 수도 있으니까
알았지?
좋아.
자 그러면 우리는 mount 또는 render할 때 console.log hi를 찍어줄거야
console.log('hi')
됐지? 이번엔 return을 할 건데
function을 return해야지
console.log
bye
오케이, 다 됐다.
자, 이제 비교해보면, 이쪽 게 조금 더 길고 쓸게 많지?
여기에서 해줄 건 console.log bye뿐이야.
그리고 내 경험에서 볼 때, 사람들은 더 이상 이 방법을 잘 쓰지 않아.
그렇겠지? 이게 더 짧은데 같은 말이니까.
이것도 똑같이 익명의 function을 만들어
여기서 우리가 한게 그거지?
좋아, 여기까지 다 잘 됐을거야
앞에 했던 건 일단 다 지우자.
오케이 , 이것도 문제 없이 실행된다는 걸 보여주기 위해
이것도 잠시 지워볼게
아무 문제 없이 실행되어야 하니까..
여기에 와서, 새로고침하면
created, bye bye.
완벽해!
그리고 이것도 똑같이 실행돼야겠지?
새로고침~
created, bye bye
됐지? 둘 다 같은 코드인데 하나가 더 긴 것 뿐이었어.
좋아, 일단 소스코드에는 두 가지 다 남겨놓을 테니까 비교해봐.
그리고 어떤 게 더 좋은지 얘기해줘.
알았지?
우리가 여기서 한 것은 function을 return한 것 뿐이야.
다 됐어.
자 그러면 useEffect는 여기까지 하고
다음 강의에서는 드디어 이것들을 본격적으로 연습해보자!
프로젝트 몇 개가 준비되어있어, 지금 바로 하고싶다!!
