개요
모든 것을 useEffect로 해결하지 말기
상품의 옵션이 변경되었을 때 옵션을 추가하는 버튼이 활성화되게 되는데,
특정한 경우에 해당 버튼이 계속 깜빡이는 오류를 발견했다.
해당 원인을 찾아보니, ReactInput이라는 컴포넌트가 무
특정 경우에 무한렌더링이 되고 있었다.
ReactInput이라는 컴포넌트가 내부에 값을 관리하고 있었는데,
외부에 value가 바뀔경우에 내부 값을 바꿔줘야 할 일이 생겨,
useEffect를 하나 더 추가했었다.
export const ReactInput: React.FC<ReactInputProps> = (props) => {
const [inputValue, setInputValue] = useState('');
useEffect(() => {
// props.onChange가 동작하는 로직
}, [inputValue]);
useEffect(() => {
if (props.value !== undefined) {
setInputValue(props.value);
}
}, [props.value]);
return <input value={inputValue || props.value} />
}하지만 특정 경우에서
외부 value가 바뀌어, 두번째 useEffect가 작동하게 되고,
연이어 첫번째 useEffect가 작동이 되게 되는데,
그에 따라 props.value가 또 바뀌어 무한렌더링이 돌았다.
해당 옵션 쪽 코드 구조에 문제도 있었지만,
이번 처럼 외부에서도 값을 관리하고 내부에서도 값을 관리하고 있었는데
해당 문제를 알면서 단순하게 이전에 useEffect를 추가한 것이
나중에 더 큰 문제로 돌아온 것이다.
당시에는 내가 생각하는 경우의 수에서 일어나지 않을 것이라 생각했는데,
나혼자 코딩하는 것도 아니고, 내가 생각하는 경우의 수가
상황에서 일어날 수 있는 전체의 경우의 수가 아니라는 것을 깨달았다.
그리고 이에 관련하여 useEffect에 의존하지 말자라는 글이 있었는데,
좋은 글이라고 느껴, 비슷한 글을 아래에 첨부한다.
(그 글을 찾으려니까 못 찾겠다🥲)
터득한 Point.
- 뭐든 과한 의존성은 독이 된다. 결국 실력을 키우자.
- useEffect는 렌더링 이후에 실행되기 때문에, 랜더링 중에 계산할 수 있는 것들인지 파악하고, 시기적절하게 사용하자.
10차 스프린트 회고: 24.11.18(월) ~ 24.11.29(금)
업무
파트너 어드민 회원가입 기능
OAuth 인가 과정 사전 공부
현재 서비스는 카카오, 네이버, 애플을 통해 소셜로그인 및 회원가입을 할 수 있다.
대부분의 과정은 소셜로그인들이 비슷하고, 애플만 살짝 달랐다.
클라이언트에서 소셜 Auth 서버로 바로 보내는 것이 안되서,
서비스 서버를 한 번 더 거쳐가는 과정이 필요했다.
소셜로그인을 통해 정보를 받아오고,
해당 유저의 정보가 우리 DB에 없다면 회원가입으로 Redirect시키도록 했다.
소셜로그인을 위해 제3의 서버와 티키타카하는 과정이 흥미로웠다🧐
구현
이미 다른 사내 서비스에서 회원가입 기능이 있어 API 구현은 어렵지 않았다.
회원가입 로직에서 놓치는 것이 있을 것 같아,
공부를 하고나니 코드의 논리 흐름을 이해할 수 있었다.
문제는 UI 구현이었는데,
저번에 회원가입을 딕셔너리로 구현했었고,
스스로 괜찮은 컴포넌트 구조를 찾았고 새로운 시도를 잘 해봤다고 생각했었다.
하지만 개발팀 회고 이후에
스스로의 코드를 보고 뜯어보면서
직관적이지 않은 코드가 어떤 단점이 있는지 알게되었다.
코드의 구조를 파악하는데 시간이 걸리는 것.
내가 봐도 시간이 걸리는데,
만든 사람이 아닌 제3자가 보면 더 혼란스러울 것 같다.
그래서 switch를 이용해 딕셔너리 타입에 따라 랜더링을 해주는 방식에서
페이지의 흐름에 따라 풀어 작성할 수 있도록 컴포넌트화시켰다.
먼 미래의 내가 봐도 직관적인 코드를 짜는 것이 클린코드이지 않을까 생각했다.
짧은 코드가 좋은 것도 아니고 만들면서 보니 풀어쓴다고 코드가 막 길어지지도 않았다.
터득한 Point
- 직관적인 코드를 구현하여 지속가능한 코드를 구현하자.
- 짧은 코드가 다가 아니다.
공부
외주로 작업했던 서버가 자꾸 다운이 되서,
해결방법을 찾고자 CS공부를 계속하며 새로운 사실들을 알게되었다.
아래에 좋은 글들을 첨부한다.
스레드와 프로세스
멀티스레드와 멀티프로세스
동기,비동기 & 블로킹,논블로킹
자바스크립트 이벤트 루프 구조 및 동작 원리
