React의 useState 훅: 상태 관리, 불변성 유지, 그리고 prevState 활용법useState와 일반 변수(let)의 차이점React에서 상태 관리를 위해 사용하는 useState 훅은 컴포넌트의 상태 변화를 관리하고 화면에 자동으로 반영해 주는 중요한 도구입니다. 반면, 일반 자바스크립트 변수(let)는 상태를 저장할 수 있지만, 그 값이 변경되더라도 React는 이를 감지하지 않으므로 화면에 업데이트가 이루어지지 않습니다. 이 글에서는 useState와 일반 변수의 차이점을 비교하며, 버튼 클릭 시 카운트가 증가하는 예제를 통해 그 차이를 살펴보겠습니다. useState와 let 변수의 기본 개념useState: React에서 제공하는 훅(Hook)으로, 컴포넌트의 상태를 선언하고 그 상..

React에서 JSX를 반환할 때는 반드시 하나의 태그로 감싸야 합니다. 여러 개의 태그를 반환하려면, 부모 태그로 감싸야 하며, 빈 태그로 감싸는 것도 가능합니다. 이를 Fragment라고 하며, ... 형태로 사용할 수 있습니다. HTML에서 사용하는 class 속성은 React에서는 className으로 사용해야 합니다. 또한, JSX 내부에 자바스크립트 코드를 삽입하려면 중괄호 {}로 감싸야 합니다. 인라인 스타일을 적용할 때는 style 속성에 객체 형태로 값을 전달합니다. 이때, 중괄호 {} 두 개를 사용해야 하는데, 첫 번째 중괄호는 자바스크립트 표현식을 열기 위한 것이고, 두 번째 중괄호는 스타일 객체를 감싸기 위한 것입니다. HTML에서 font-size와 같은 속성은 React에서는 f..

https://create-react-app.dev/docs/getting-started/ Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.dev React 개발을 할 때, 바벨(Babel)이나 웹팩(Webpack) 같은 도구를 사용하고, 배포 시 필요한 설정을 일일이 설치하는 것은 매우 복잡하고 시간이 많이 소요되는 작업입니다. 이를 간편하게 해결하기 위해, React 개발에 필요한 공통적인 도구와 설정을 한 번에 설정해주는 도구가 Create React App입니다. 설치 방법은 다음과 같습니다.npx를 사용하여 설치:npx ..

React는 UI(사용자 인터페이스)를 만들기 위한 자바스크립트 라이브러리입니다. 주로 단일 페이지 애플리케이션(SPA)과 클라이언트 사이드 렌더링(CSR)을 구현하는 데 사용됩니다. 왜 React는 라이브러리인가?프레임워크는 보통 HTTP 클라이언트, 상태 관리(State Management), 라우팅(Routing), UI 등의 기능을 기본적으로 제공하여, 개발자가 이를 이용해 개발을 진행할 수 있게 합니다. 프레임워크를 사용하면 정해진 틀과 규칙에 따라 개발을 진행할 수 있어 편리하지만, 몇 가지 단점도 존재합니다. 먼저, 프레임워크에서 권장하는 모든 기능과 구조를 익혀야 하므로 초기 학습에 많은 시간이 필요합니다. 또한, 정해진 틀 내에서만 작업할 수 있기 때문에 자율성이 떨어지고, 개발자는 프레..