티스토리

Hakunamatata

검색하기

블로그 홈

Hakunamatata

iborymagic.tistory.com/m

iborymagic 님의 블로그입니다.

구독자: 12

방명록 방문하기

주요 글 목록

useEffect가 나를 열받게 했다 이번에 새로운 기능을 개발하면서 상태의 변화에 따른 side effect들을 처리해주기 위해 useEffect를 많이 사용하게 됐다. 기능의 생명 주기를 stage라는 단위로 구분했는데, 원래는 페이지 단위로 사용자의 행동을 구분하는 것이 보편적이겠지만 사실 페이지의 형태도 거의 비슷하고 로직만 약간씩 바뀌는 식이어서 굳이 페이지를 나눌 필요가 없겠다는 생각이었다. 그래서 사용자가 '이번 페이지에서 할 작업을 다 마쳤으니 다음 페이지로 넘어간다' 라는 의도로 '다음' 버튼을 누르면 동일한 페이지 내에서 stage만 바뀌고, stage의 변화에 따라 useEffect에서 여러 작업을 수행하는 방식으로 구현을 했다. useEffect(() => { if (stage === ‘first-stage’) { //.. 공감수 29 댓글수 14 2022. 7. 15.
visibility, display, opacity 그리고 조건부 렌더링 React를 사용하다가 컴포넌트의 렌더링과 관련해서 헷갈리는 사항이 생겨 정리했다. visibility: hidden과 opacity: 0은 모두 해당 요소가 화면에 렌더링되지만 투명하게 보이게끔 만들어준다. 하지만 둘 다 요소를 투명하게 보이게 할 뿐, 해당 요소는 여전히 자리를 차지한다. (차지하는 자리만큼 뻥 비어보이게 된다) 둘의 차이점이라면 visibility: hidden은 뒤에 있는 요소를 클릭할 수 있지만, opacity: 0은 불가능하다는 것. 반면, display: none은 해당 요소를 DOM 트리까지만 가져가고 렌더 트리에서는 제외해준다. 즉, 레이아웃에 포함되지 않는다. 그래서 해당 요소가 자리조차도 차지하지 않게 된다. 하지만 DOM 트리까지 해당 요소를 가져가야 하기때문에, 해.. 공감수 1 댓글수 0 2021. 12. 14.
React.memo와 useCallback, useMemo ■ React.memo React.memo는 고차 컴포넌트. 컴포넌트의 렌더링 결과를 Memoizing 함으로써, 이후의 불필요한 리렌더링을 건너뛴다. 이전 렌더링과의 비교는 'props가 같은지'로 판단. (이전 렌더링 때와 props가 동일하다면 Memoizing 결과 재사용) props 객체를 비교할 때는 얕은(shallow) 비교를 사용한다. 비교 방식을 수정하고 싶다면 두 번째 인자로 비교 함수를 만들어 넘겨주면 된다. export const Component = ({ prop, anotherProp }) => { return ( prop1: {prop} prop2: {anotherProp} ); } export const MemoizedComponent = React.memo(Component.. 공감수 2 댓글수 0 2021. 12. 13.
CRA를 Next.js로 마이그레이션하기 서버 사이드 렌더링(SSR)을 언젠가 한 번쯤 해봐야겠다고 생각하곤 있었는데, 막상 프로젝트 진행하고 미션 진행하고 하다보니 딱히 시도해 볼만한 시간이 안났다. 사실 핑계이긴 하다.. 쉴 시간 줄여서 공부하면 되긴 하니깐. 반성... 그러던 중 때 마침 미션으로 SSR 관련 미션이 나와서 Next.js를 아주 가볍게 이용하여 SSR을 살짝 맛볼 수 있게 됐다. 서버 사이드 렌더링 중에서도 Next.js, 그 중에서도 CRA에서 Next.js로 마이그레이션 하는 방식으로 아주 가볍게 도입만 해 본 셈이지만, SSR을 깊게 공부할 수 있는 발판이 될 수 있지 않을까 생각한다. 1. 설치 CRA의 불필요한 dependency들을 제거한다. npm uninstall react-scripts react-route.. 공감수 0 댓글수 0 2021. 10. 6.
React에서 setInterval 사용하기 최근에 리액트 프로젝트를 진행하면서 setInterval을 사용할 일이 많아졌다. 채팅방 목록을 새로고침할 때 setInterval을 사용해서 주기적으로 HTTP 요청을 보낸다던가(polling), 채팅이 도착했을 때 setInterval을 사용해서 브라우저 탭 제목을 바꾼다던가 하는 식이다. (페이스북 DM이 도착했을 때 브라우저 탭 제목이 '(4) facebook' 이런 식으로 바뀌는 것 처럼) 채팅방 목록을 보여주는 페이지에 처음 접속했을 때, 즉 페이지가 mount될 때 채팅방 목록을 일정 주기마다 불러오는 polling을 하기 위해서 empty dependency를 가진 useEffect 내부에 setInterval을 호출해줬는데, 생각지 못한 문제가 발생했다. const example() =>.. 공감수 1 댓글수 2 2021. 9. 5.
React로 Snackbar를 만든 과정 스낵바 하나 만드는 데 이렇게 오래 걸릴 줄 몰랐다. 사실 적당히 만족했더라면 진작에 끝날 수 있었지만.. 그 놈의 욕심 때문에.. 상당한 시간을 소모하고 말았다. 내가 원하는 대로 동작하는 스낵바를 만들고 싶었다. 코치님께서 입버릇처럼 말씀하시는 '주화입마'에 빠지지 말라는 말이 바로 이런 경우겠거니. 참고로, 주화입마는 무협지에서 고수들이 욕심을 부려 무리하게 공력을 끌어올리다가 폭주하여 몸을 망치는 것을 말한다. 불필요한 욕심때문에 삼천포로 빠져 시간을 버리지 말라는 맥락이다. 이전 로또 미션때도 굉장히 사소한 애니메이션 효과에 시간을 많이 쏟았었는데 또 같은 실수를 저지른 셈. 물론, 이번 스낵바같은 경우는 레벨1 때부터 꽤 오랫동안 고민을 하기도 했고, 한 번 만들어두면 자주 쓰겠다는 생각때문에.. 공감수 10 댓글수 4 2021. 5. 16.
useEffect를 life cycle method 처럼 사용하기 useEffect는 componentDidMount, componentDidUpdate, 그리고 componentWillUnmount가 합쳐진 훅이라고 생각하면 편하다. 세 가지 life cycle method를 하나의 훅으로 사용할 수 있어서 상당히 편리하긴 한데, 각각을 따로 사용하고 싶을 때는 어떻게 해야할까? ■ useEffect를 componentDidMount처럼 사용하기 useEffect의 두 번째 인자로는 dependency array가 들어간다. 즉, 컴포넌트가 re-rendering을 하기 전에, 변경되었는지 확인할 변수들이 들어가는 배열이다. 이 배열에 변수가 들어가면 해당 변수가 변경되었을 때 useEffect가 호출되면서 componentDidUpdate의 역할을 할 수 있게 되지.. 공감수 1 댓글수 0 2021. 5. 13.
PropTypes element vs elementType ■ 리액트에 PropTypes가 존재하는 이유 얼마전까지만 해도 타입스크립트가 있는데, 왜 굳이 PropTypes를 또 써줘야하는지 이유를 알지 못했다. 하지만 둘 사이에는 명백한 차이점이 존재한다. 사실, '타입을 체크해준다'라는 기능만 동일하고 아예 다르다. 타입스크립트는 컴파일 타임에 정적으로 타입을 검사하기 때문에, 코드 작성 시에 발생하는 타입 에러를 잡아주는 반면 PropTypes는 동적으로 타입을 검사해주기 때문에 사용자의 동적인 입력에 따른 타입 체크가 가능하다. 외부 API로부터 데이터를 받아오거나 할 때 발생하는 타입 에러같은 것들을 체크할 수도 있다. 즉, 런타임에서 발생하는 타입 에러를 체크할 수 있다는 것. 타입스크립트에 PropTypes를 자동으로 지정해주는 기능도 있다고 함. .. 공감수 2 댓글수 2 2021. 5. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.