Vite로 React 프로젝트 시작하기npm create vite@latest예전에는 React 프로젝트를 시작할 때, 일반적으로 CRA(create-react-app)로 개발환경을 구성했지만 요즘에는 Vite를 많이 사용한다. 시간이 흘러 이제 CRA는 더 이상 권장하지 않는 방법이 되었고, 심지어 CRA로 만든 프로젝트를 Vite로 마이그레이션 하는 추세인 것 같았다. Vite는 CRA에 비해 상대적으로 작은 크기와 빠른 빌드 속도를 가지고 있기 때문에 빠르게 변화하는 개발 생태계에서 Vite가 대세로 자리 잡게 되었다. 어쨌든, Vite를 이용해서 빠르게 개발 환경을 세팅해 주고 이 글의 메인 주제인 ESLint와 Prettier를 세팅해 주겠다. (이 글의 카테고리가 React인 이유는 단순히 내..

클릭 이벤트로 함수 호출하는 건 쉽지 않아? 리액트에서 JSX를 통해 onClick 이벤트로 함수를 호출하는 방법은 매우 간단하고 쉽다. 그냥 주고 싶은 요소에 onClick={Func}를 써주면 된다. 물론, onClick={() => {...}} 처럼 콜백 함수를 사용할 수도 있다. 무척 간단한 방법이라 리액트에서 클릭 이벤트 함수 호출 방식에 대해 딱히 의문점을 가져본 적은 없었다. 하지만, 누군가 나에게 물어봤다. "왜 onClick={Func}는 되는데, onClick={Func()}는 안 돼?" 이 질문에 나는 "음... 함수 자체를 호출하는 것과 함수의 껍데기를 벗겨서 호출하는 것의 차이아닐까...?"라는 추상적인 답변을 한 적이 있다. 물론, 느낌(?)은 얼추 맞다고 할 수는 있지만 명확한..

불변성(Immutability)이란? 예전에 리액트 관련 글을 쓸 때 분명 불변성이라는 개념을 언급하며 이것에 대해 정리한 적이 있었다. 하지만, 언제 무슨 글에서 썼는지도 모르겠고 불변성이라는 개념은 리액트 문법을 다루기 위해 반드시 알아야 하는 개념이기 때문에 내가 까먹을 때마다 보기 위해서 이번 기회에 제대로 불변성 개념을 정리하는 글을 쓰려고 한다. 리액트는 데이터(참조값)가 변했을 때, 리렌더링이라는 것을 한다. 리렌더링 과정에는 업데이트된 부분만 가상 DOM에 렌더링 하여 이전 가상 DOM과 비교하고 달라진 부분만 실제 DOM에 반영시킨다. 즉, 성능 최적화를 위해 전체를 다시 렌더링 하는 게 아닌 달라진 부분만 렌더링 한다. 불변성을 이해하기 위해서는 이와 같은 리액트의 렌더링 방식을 이해하..

useRef()란? useRef()는 리액트의 Hooks 중 하나로, 함수 컴포넌트 내에서 변수를 유지하고 싶을 때 사용한다. 또한, DOM 요소에 접근하기 위해 참조를 생성하기도 한다. 예를 들어, 특정 DOM 요소의 크기나 위치를 가져오거나 스크롤 바 위치를 가져와야 할 때, 엘리먼트에 포커스를 설정해줘야 할 때 등의 작업을 수행할 때 많이 사용한다. useRef()를 호출하면 반환되는 객체는 current라는 속성을 가지고 있는데, 이 속성을 통해서 변수를 유지할 수 있다. current 속성의 값은 첫 번째 렌더링 이후에도 유지되며, 이 값을 변경해도 컴포넌트가 리렌더링 되지 않는다. (DOM을 선택하든 변수를 담든 무조건 current 속성을 가져와야 한다. useRef는 current와 한 몸..

중첩 라우팅이란? 중첩 라우팅(Nested Routing)이란 라우팅 구조를 계층적으로 구성하는 방법으로 부모 컴포넌트의 경로에 딸린 자식 컴포넌트들의 경로를 정의하는 것을 의미한다. 쉽게 말하면 abc.com/users가 일반 라우팅이고, abc.com/users/name/shawn이 중첩 라우팅이다. 즉, 부모 컴포넌트의 경로 뒤에서 자식 컴포넌트의 경로가 추가되는 것이다. 사용 예시 // App.js const App = () => { return ( ) } // Home.js const Home = () => { return ( 이곳은 홈입니다. // Users 컴포넌트가 들어갈 자리 ) } 라우트 안에 또 라우트를 넣어서 중첩 라우팅을 구현할 수 있다. 위의 코드는 "/home" 안에 "user..