Nimbus

컴포넌트를 나누다 보면 위에 있는 값을 한참 아래 컴포넌트에서 써야 할 때가 있다. props로 내려보내면 되지만, 단계가 깊어지면 값을 쓰지도 않는 중간 컴포넌트까지 props를 받아 넘기게 된다.이런 상황을 prop drilling이라고 한다. Context는 이 중간 단계를 건너뛰는 기능이다. prop drilling다크모드를 만든다고 해보자. 테마 값은 앱 전체가 쓰니까 App이 들고 있고, 정작 바꾸는 버튼은 헤더 안쪽에 있다.function App() { const [theme, setTheme] = useState("light"); return ;}function Layout({ theme, setTheme }) { return ;}function Header({ theme, setTh..

리액트에서 원래 상태(state)를 가질 수 있는 것은 클래스 컴포넌트뿐이었다. 함수형 컴포넌트는 props를 받아 화면을 그리는 단순한 역할에 그쳤고, 상태 관리나 생명주기 제어가 필요하면 클래스 컴포넌트로 작성해야 했다. 이 한계를 해결하기 위해 리액트 16.8에서 등장한 것이 Hooks다. 훅 덕분에 함수형 컴포넌트에서도 상태를 관리하고 렌더링 이후의 동작을 제어할 수 있게 되었고, 현재는 클래스 컴포넌트 대신 함수형 컴포넌트와 훅을 사용하는 것이 표준적인 방식으로 자리 잡았다. 훅의 종류는 생각보다 많지만, 지금까지 공부하면서 가장 자주 마주친 것은 useState, useEffect, useRef 세 가지였다. 이 글에서는 이 세 가지 훅을 배우면서 이해한 내용과, 개인적으로 헷갈렸던 부분을 정..

리액트를 공부하다 보니 요즘 강의나 문서에서는 프로젝트를 만들 때 Create React App(CRA)이 아니라 Vite를 쓰고 있었다.찾아보니 CRA는 유지보수가 중단되었고, 리액트 공식 문서에서도 더 이상 권장하지 않는다고 한다. 그래서 이 포스팅에서는 Vite가 뭔지, 그리고 다들 "빠르다"고 하는데 왜 빠른 건지 학습한 내용을 정리해 보려고 한다.아직 실무에서 깊게 써본 건 아니라서, 개념과 기본 사용법 수준에서 이해한 만큼만 적어본다.Vite란Vite는 프랑스어로 "빠르다"라는 뜻의 프론트엔드 빌드 도구다.\이름 그대로 개발 서버 구동 속도와 코드 수정 반영 속도(HMR)가 빠른 게 가장 큰 특징이다. CRA를 써봤다면 npm start를 누르고 서버가 켜질 때까지 한참 기다려본 경험이 있을 ..