~0519 useEffect (미루지말자 let's not procrastinate)

오늘은 20일에 강의 다 듣고 정리한 것을 대학 친구들 만나고, 집에 온 아버지랑 놀고, 영화 보느라 이제야 쓴다.

당일에 정리했으면 지금 새로운 강의 듣고 진도 나갈텐데 끙 이제라도 앉은 게 어디냐 정리하자.

 

범죄도시2 를 꼭 보자 손석구는 증-말 머찐 남자다

 

※오늘의 문제점 특정코드 실행을 제한하고 싶음※

리액트는 component내의 state가 변경, props로 전달받은 인수가 변경, 부모컴포넌트가 렌더링 되면 해당 컴포넌트는 리렌더링 되는 유용한 기능이 있다. 다만, 우리가 원치 않는 부분까지 리렌더링 하게된다. 예를 들어 접속시 회원의 이름은 console.log를 통해 알려주는 코드가 있으면 우리가 검색 기능을 사용하기 위해 input창에 입력 시 console.log는  처음 한 번만 나타나면 되는 기능인데도

위의 여러 이유로 리렌더링 된다. 이를 방지하고 필요한 코드만 실행되도록 하는 useEffect에 대해서 배워 볼 것이다.

 

첫 코드설명은 언제쯤 안해도될까 지금은 이해되는데 나중에 복습할 때 생소할까봐 하는거라

 

state를 만든다. 너무나도 익숙한 클릭 하면 클릭 횟수를 바로바로 갱신해서 보여주는  counter를 만들기 위해서

그리고 call an api라고 콘솔창에 뜨게끔 한다. 내가 위에서 말한 상황과 매우 유사하다.

line 6은 처음에 한 번만 실행되면 되는데 내가 line10의 버튼을 클릭할 때마다 state상의 counter값이 변경되어

line 9 h1태그를 새로 렌더링하고 밑에 있는 line 6 또한 불필요하게 렌더링 되는 상태이다.

 

예전에는 current쓴거 같은데 왜 이번엔 prev쓰지 하고 친구한테 물어보려고 캡쳐한거

 

이 부분 짧게 설명하면 setState여기서는 setValue의 경우 자신만의 고유한 임시저장 공간을 가지고, 함수가 끝나면 렌더링 시키는 방식인데,  지금과 같이 한번 일어나는 경우는 prev를 쓰나 그냥 변수 a를 쓰나 큰 상관이 없지만 예를 들어 onClick안의

setValue함수의 내용이 counter +1 이 코드가 4개 있다고 쳐보자 우리의 예상은 +1을 4번 실행했으니 +4가 되어 렌더링 될 것 같지만 고유한 임시저장 공간을 가지고 있기에 클릭시, 1이 되어 나온다. 이때 prev를 사용 시 이전 값의 임시공간에 있는 데이터를 그대로

가져와 실행하기 때문에 가능하다. 결과적으로 지금 코드에는 prev를 쓰나, counter로 작성하나 문제는 없다.

 

useEffect도 useState처럼 react.~작성해야하지만 첫줄에 import를 작성해 선언이 간단해졌다.

useEffect의 선언은 간단하다.

두개의 인자를 받는 함수로 첫 번째 인자는 한 번만 실행할 코드 두 번째는 array(이거에 대해서는 좀 이따)

콘솔 창에  i run ony once를 쳐주는  함수 iRunOnlyOnce를 만들고 useEffect에 넣어준다. 이 경우 아까 만든

첫 번째 log랑은 다르게, 처음에 한 번만 실행되고, 내가 버튼을 누르든, 뭘 하든 다시 실행되지 않을 것이다.

처음에 콘솔로그로 두 개다 나오고 그다음에 클릭하면 useEffect안의 코드는 리 렌더링 되지 않음.

왜 두번씩 나오지? 왜 두번씩 나오지?

위에서 같이 왜 콘솔창에 두 번 나오지 했는데  index.js에서 App을 렌더링 할 때 strict모드를 통해 렌더링 해서 두 번 나왔다.

아 오늘 중요한게 이게 아닌데

Strict모드

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

Strict 모드 – React

이러한 이유들 때문에 기본으로 개발시 실행된다 하는데 잠재적인 문제를 찾아내기 위해서란다.

 

여기까지 기본적인 useEffect의 기초를  알아봤고 두 번째 인자 array가 어떤 식으로 쓰이는지 알아볼 차례이다.

처음 한번만 실행되도록 하기에는 너무 제한을 두는 것의 자유도가 떨어진다. 언제 불편한지 밑의 상황을 통해 알아보자.

 

일단 useEffect에 들어갈 함수를 저번엔 따로 만들었지만 이번엔 내부에 제작했다.

영화 제목을 찾아볼 검색창을 추가했다. + State를 하나 더 추가했다. 

1. input과 state가 연결될 수 있도록 input 태그에 onChange={onChange}를 
2. onChange 함수에서 첫번째 ()에는 event가 들어갈 것이고, 그 이벤트 안에는 입력한 text를 가지고 있을 것이다.
3. event를 발생시킨 input에서 value값을 가져올 수 있도록  input안에 value={keyword}를 작성해주고, 
4. setKeyword(event.target.value);가져오도록한다.

문제는 여기서 발생한다. 우리는 한 글자, 한글자 검색창에 입력될 때, state를 수정하고 있다. 이때 렌더링 되는 것은 바람직하지만,

버튼을 누를 때 또한, 렌더링이 발생한다. 이 문제를 해결하기 위해 useEffect를 사용하면 되지만, 우리가 아는 기능 내에서는

불가능하다. 처음에만 실행되고 뚝 그치는 기능밖에 모르는데... ᶘ ͡°ᴥ͡°ᶅ

 

우리의 목표 :  search keyword에 변화가 있을 때 만 검색 기능에 수정을 주고 싶음.

 

해결법은 매우 간단하다. 우리가 잠시 아껴먹으려고 냅둔 array안에 keyword를 넣으면 끝이다. 쏘 간단!

이러면 앞으로 keyword값이 변화될 때만 실행되도록 한다.  여기서 좀 더 나아가면

useEffect의 첫 번째 인자 함수 자리에 조건문을 추가해 keyword값이 공백이 아니고, 길이가 5개 이상일 때부터 keyword값이 변화하면 렌더링 해라 하고 만들 수  있다. 밑과 같이 어려운 내용은 없어 설명 따로 x 

+ [](array) 안에 두 가지를 넣을 경우 둘 중 한 개만, 또는 둘 다 변경되면 코드가 실행됨

오늘자 코드 전체 짤 + 결과 창

끝 손석구 화이팅!  ก็็็็็็็็็็็็็ʕ•͡ᴥ•ʔ ก้้้้้้้้้้้ 백예린두