티스토리 뷰
알고리즘 문제에 고통받다가 오랜만에 다시 개인 프로젝트를 진행하고 있다.,,.,.
이전에 한번 요부분에서 머리가 터질뻔한적이있다..
[React] 회원가입 컴포넌트, 유저정보 수정 컴포넌트 수정
회원 가입 페이지와 유저 정보 수정 페이지 작업을 진행중 이다. 이렇게 비슷한 폼이기 때문에 같은 코드를 재활용 하려고 했다. 이런 형태의 컴포넌트로 구성하려고 했고 이런 형태로 개발 중
kmj24.tistory.com
대충 회원가입, 유저정보수정 컴포넌트 폼을 동일하게 가져가기 위해 하나의 코드를 2개의 컴포넌트에 나누어 재활용하려고 했는데, 분기점이 너무 많아 복잡해져서 다시 나누겠다는 글이다.,.,,(요기서 머리 터질뻔했다 ㅜ^ㅜ)
암튼 이제 다른 문제에 직면했다.
비밀번호, 비밀번호 확인 칸에서 입력받은 데이터를 상위 컴포넌트로 넘겨주기 위해 아래의 사진과 같이 구성했다.
상위 컴포넌트의 함수를 하위 컴포넌트에 props로 넘겨주고 하위 컴포넌트는 넘겨받은 함수의 인자로 비밀번호를 넣어서 상위 컴포넌트가 사용할 수 있도록 할 생각이었다.
이때 각 컴포넌트에서 입력받은 비밀번호의 변화를 감지하기 위해 useEffect를 사용하고 그 안에 props로 받은 함수를 넣어주었는데, 결과는...
죽어라고 랜더링을 한다...
useEffect에서 이전의 함수상태와 현재의 함수상태가 계속 다른것으로 인식하는 모양이다.
컴포넌트가 Rerendering되면서 새로운 함수가 생성되었고, 새로 생성된 함수에 대한 Rerendering이 무한 반복되는 현상이다.
참고 : stackoverflow.com/questions/62464488/how-to-use-a-prop-function-inside-of-useeffect
How to use a prop function inside of UseEffect?
I want to call a prop function inside of UseEffect. The following code works: useEffect(() => { props.handleClick(id); }, [id]); But lint is complaining about props not being a dependenc...
stackoverflow.com
만약 deps에 함수를 넣지 않는다면 다음과 같은 경고문이 뜬다.
React Hook useEffect에 'password'와 'returnPassword'라는 종속성이 없습니다. 이러한 항목을 포함하거나 종속성 배열을 제거합니다. 'returnPassword'가 너무 자주 변경되면 해당 암호를 정의하는 상위 구성 요소를 찾아서 사용에서 해당 정의를 래핑합니다.
상위 컴포넌트에서 function을 넘겨주므로 함수 선언부에서 useCallback으로 함수를 묶어준 후 useEffect의 deps에 함수를 넣어도 의미가 없다. 동일하게 무한 리랜더링 상황이 발생했다.
이 문제를 해결하기 위한 여러가지 시도를 해보았다.
try 1)
전송 상태를 관리하는 boolean useState를 생성한다. (send)
해당 상태는 초기값은 false이다.
전송이 필요할때 마다 전송 상태를 true로 만든다. (useEffect 함수 내 선언)
true일 때만 함수를 실행한다.
전송 상태를 다시 false로 변경한다.
이러한 flow로 진행 되도록 소스코드를 다음과 같이 수정했다.
이런 형태로 코드를 수정했는데
Warning: Cannot update a component (`PasswordContainer`) while rendering a different component (`PasswordConfirmBox`).
2개의 컴포넌트 중 하나의 컴포넌트가 렌더링 중이고, 동시에 다른 컴포넌트를 업데이트 할 수 없다고 한다.
하위 컴포넌트를 렌더링 중이고 동시에 상위 컴포넌트를 업데이트 하려고 하면 안된다는 경고창이다.
try2)
사진과 같이 props에서 받아온 함수를 호출하는 useCallback함수를 선언하여 시도해보았다.
하지만 useCallback함수의 deps에도 props function을 넣어주는 것이 규칙이며, 넣어줄 경우 다시 무한 렌더링이 된다.
try3)
1번에서 시도한 내용을 useEffect hook내부에서 시도해보려고 했다.
try4) 새로운 함수를 선언하여 useMemo, useCallback 활용
당연하지만,,,,,,! 안된다 ㅜㅜ
뭔가 본질적인 문제가 몬지... 찾아보다가....!
계속 검색하다 보니 이런글을 발견했다.
stackoverflow.com/questions/61255053/react-usecallback-with-parameter
React useCallback with Parameter
Using React's useCallback hook is essentially just a wrapper around useMemo specialized for functions to avoid constantly creating new function instances within components' props. My question comes...
stackoverflow.com
상위 컴포넌트 함수의 parameter로 받아오는 부분의 문제인것 같다.
즉 상위 컴포넌트에서 하위 컴포넌트에 props로 함수를 전달하고 하위 컴포넌트는 argument로 비밀번호를 넣어주며
다시 상위 컴포넌트에서 parameter로 받아온 비밀번호에 대한 상태를 지속적으로 갱신하고 있던 것이었다.
try5) 상위 컴포넌트의 함수내부의 코드에서 상태 갱신 전 data 변경여부 확인
코드로 보자면
여기서 받은 결과를 지속적으로 갱신하고 있던것 이었다.
그렇다면 여기서 추가해 주어야 할 코드는 간단하다.
//변경 전 함수
const getPassword = useCallback((data : string, success : boolean) => {
setPassword(data);
setDataConfirm({
...dataConfirm,
password : success
});
}, [dataConfirm]);
//변경 후 함수
const getPassword = useCallback((data : string, success : boolean) => {
setPassword(data);
if(dataConfirm.password !== success){
setDataConfirm({
...dataConfirm,
password : success
});
}
}, [dataConfirm]);
기존의 상태와 parameter의 데이터를 비교하여 일치하지 않는 경우에만 상태를 갱신하도록 하는것이다.
이렇게 각 컴포넌트의 코드를 수정 후...!
편ㅡ안한 화면을 볼수 있었다...
편 - 안
먼가 며칠 고민할만한 내용은 아닌것 같은데...
이러한 예외사항의 대처방안에 대한 교훈을 얻은 것 같다.