한량의 개발블로그

리액트 실행시 훅 실행 순서 DOM이 브라우저에 페인팅되기 전 LayoutEffects 훅이 실행된다는데, LayoutEffects는 과연 무엇일까? useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) 위는 useLayoutEffect를 인텔리센스가 자동으로 완성한 모습이다. 인텔리센스 : vs코드에서 클래스 함수 변수 등을 오른쪽 마우스로 클릭하여 원하는 컨텍스트르 선택할 경우 해당 개체에 대한 정보를 알려주거나 정보가 있는 위치로 이동시키는 것을 말한다. 또한 클래스나 구조체의 변수나 포인터 변수의 오른쪽에 "." 또는 "->"을 타이핑 할 경우 클래스의 멤버함수와 프러퍼티, 구조체의 멤버에 대한 내용..

09. 리액트에게 의존성으로 거짓말하지 마라 클래스컴포넌트에 익숙한 사람들이 useEffect를 사용할 때 규칙을 어기는 경우가 꽤 많다. function SearchResults() { async function fetchData() { // ... } useEffect(() => { fetchData(); }, []); // 이게 맞을까요? 항상 그렇진 않지요. 그리고 더 나은 방식으로 코드를 작성하는 방법이 있습니다. // ... } 마운트될때만 이팩트를 실행하고싶은 경우, 위와같이 의존성배열에 아무값도 넣지 않은 상태로 이펙트를 실행한다. 위코드처럼 작성시 무한루프에 빠지거나, 소켓이 너무 자주 반응하는 문제들이 발생할 수 있다. ( 실제 지난 프로젝트에서도 위와 같은 방법을 사용했다 😭 ) 📖 ..

지난 프로젝트를 hooks로 진행하였다. useEffect를 사용시 동기화가 안되어서 또는 무한루프에 빠져서 난처했던 경우가 있었다. 어떻게 어떻게 해결을 하긴 했지만, useEffect에 대한 더 깊은 개념공부가 필요했고 오늘은 useEffect에 대해서 공부한 내용을 정리해보려한다. Redux를 만든 Dan Abramov의 블로그 overreacted를 참조하였고, 헷갈렸던 개념을 쉽고 깔끔하게 정리해준 그에게 존경을 표한다. 목차 모든 랜더링은 고유의 Prop과 State가 있다 모든 랜더링은 고유의 이벤트 핸들러를 가진다 모든 랜더링은 고유의 이펙트를 가진다 모든 랜더링은 고유의… 모든 것을 가지고 있다 흐름을 거슬러 올라가기 그러면 클린업(cleanup)은 뭐지? 라이프사이클이 아니라 동기화 리..