useEffect2 [React] 최초 렌더링에서 useEffect 실행 생략하기 안녕하세요, 개발자 Sean입니다. 오늘 플랫폼 테스트 진행 중 이상한 버그 하나를 발견했습니다. 차트를 그리는 페이지에서 차트 세팅을 변경해 적용하면 변경된 세팅이 아닌 이전 세팅값으로 차트가 그려지는 현상이었습니다. 왜 이런 현상이 발생하는지 조사해보니, 초기 렌더링 때 상태변화가 이루어지지 않은 상태에서 이전 상태 값으로 차트를 그렸기 때문에 문제가 발생하는 것을 확인할 수 있었습니다. 개인적으로 올바른 해결방법은 아니라고 생각하지만 급한데로 우선은 useEffect에서 초기 렌더링일 때는 함수 실행을 스킵하도록 코드를 짰더니 문제가 해결되긴 했습니다. 방법은 여러가지가 있을 수 있겠지만 제가 사용한 방법은 useRef를 활용하는 것이었습니다. const notInitialRender = useRe.. 2022. 12. 14. [React] 외부 클릭 시 메뉴창 닫기 오늘 토이 프로젝트를 진행하면서 메뉴 버튼 밖을 클릭했을 때 메뉴 컴포넌트가 닫히는 UI를 구현하고 싶었다. 방법에 대해 한참을 고민하다 보니... 최상의 컴포넌트에서 props drilling을 통해 메뉴를 닫는 기능을 구현할까... 하는 생각이 들었지만 어엿한 프론트엔드 개발자를 꿈꾸는 나에게 이것은 올바른 해결법이 아니라는 판단이 들었다. 그래서 구글링을 해보니 해당 방법을 Effect 훅과 Ref 훅을 이용해 해결하는 방법에 대해 참고할 수 있었다. 전체 코드는 이러한데 한번 부분 부분 살펴보자. const Deck = ({data}: Props) => { const [openInnerMenu, SetOpenInnerMenu] = useState(false); const InnerMenuHandl.. 2022. 4. 8. 이전 1 다음
