React101

사실 몇달간 리엑트 및 넥스트로 프론트엔드 공부를 했습니다. 배울때는 정신없이 배웠는데요, 지금와서 돌이켜보니 뭐라도 남겨놓는게 좋을뻔 했습니다. 기초적인 틀은 알아도, 세세하게 안다고는 하지 못하겠고, 또 심지어 배운 내용인지도 헷갈릴때가 있네요. 그래서 지금부터라도

아마 리액트를 배우다보면 가장먼저 마주하는, 리액트스러운 함수(Hook)일겁니다. 처음 배우시는 분들이라면, 왜 이런 번거로운게 있나 싶으실겁니다. 하지만 개인적으로 useState가 리액트의 작동방식에 밀접한 관련이 있다고 생각하고, 단순히 어떻게 쓰는지 뿐만 아니라

리액트를 공부하면서 마주친 두번째 훅입니다. 사실 이게 저는 그렇게 이해가 안가더라구요. Side effect를 위해 있다지만, 그냥 함수 컴포넌트 안에서 구현하면 되는거 아닌가? 싶었습니다. 그리고 왜 side effect라고 부르는지도 모르겠구요. 그래서 여러 포스

지금까지 미뤄왔던, 간단하지만 중요한 내용인 DOM에 관한 얘기를 해보려 합니다. DOM의 필요성과, 한계 그리고 VDOM의 등장, 마지막으로 리액트가 VDOM을 사용하는 방법에대해 탐구해 볼게요. 지루한 얘기지만, 최대한 간단하고 쉽게 설명해 보겠습니다!인터넷이 보급

지금까지는 조금 많은 내용을 한 포스트에 담아왔기 때문에, 이번에는 그나마 짧은 주제를 다루려고 합니다. JSX? 바닐라 JS만 사용하셨다면, JSX 확장자에 대해서도, 또 JSX파일을 작성하는 법도 생소 할 수 있습니다. JSX는 JS의 확장형으로,

오랜만입니다! 오늘은 웹페이지가 만들어지는 방법들과 그 장단점을 알아보겠습니다. 이번 포스트에서 소개할 방법은 크게 네가지가 있는데요, Client Side Rendering (CSR) Server Side Rendering (SSR) Static Site Gene

지난 시간 Virtual DOM을 살펴볼때, 리액트는 실제 DOM과 VDOM을 비교하여 차이가 있는 부분만 수정을 한다고 배웠습니다. 여기서, 더 시간을 절약하는 방법이 있는데, 바로 React.memo()와 useCallback 훅입니다. 리액트도 결국 DOM과 VD

최근 토이 프로젝트에서 어떻게 전역변수를 관리할까 고민하다가 한 꼼수?를 발견해서 야무지게 사용했었다. 바로 swr을 이용한 방법인데, 이게 원래는 데이터 fetching 훅인데, 편법으로 로컬 스토리지에서 데이터를 캐싱하는 법이 있다. 어찌되었든 swr은 기본적으로