Nimbus

Next.js는 React 위에서 동작하는 프레임워크다. React가 컴포넌트로 화면을 그리는 라이브러리라면, Next.js는 그 React로 실제 웹사이트를 만들 때 필요한 것들을 미리 갖춰놓은 도구다. 크게 두 가지를 대신 해준다. 하나는 라우팅이다. 리액트만 쓰면 react-router 같은 걸 따로 설치해서 경로와 컴포넌트를 직접 연결해야 하는데, Next.js는 폴더 구조만으로 이게 자동으로 된다. 다른 하나는 렌더링 방식이다. 리액트는 기본적으로 브라우저에서 화면을 그리는 CSR로 동작하는데, 이 경우 검색엔진이 빈 화면으로 인식하는 경우가 있다. Next.js는 서버에서 미리 그려서 보내는 SSR을 페이지 단위로 선택할 수 있게 해준다. 이 글에서는 이 두 가지를 중심으로, 프로젝트를 만드는..

컴포넌트를 나누다 보면 위에 있는 값을 한참 아래 컴포넌트에서 써야 할 때가 있다. 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 끌어올리기]다. 이번 포스팅에서는 이게 뭔지, 그리고 왜 이런 방식으로 데이터를 다뤄야 하는지 학습한 내용을 정리해 보려고 한다. 어떤 상황에서 필요한가온도를 입력하면 그 값을 다른 곳에 표시해주는 기능을 만든다고 해보자. 입력창 컴포넌트와 표시 컴포넌트를 따로 만들면 이렇게 된다.function TempInput() { const [temp, setTemp] = useState(''); return setTemp(e.target.value)} />;}function TempDisplay() { return 온도: ???;} TempDisplay가 temp 값을 표시하려면..