리액트 프로젝트를 생성하고 실행해보기작업환경Node.js  22.xMac OSWebStormJSX프로젝트를 생성하고 `App.js`파일을 보면 아래와 같은 모습을 볼 수 있다.import logo from './logo.svg';import './App.css';function App() { return ( Edit src/App.js and save to reload. Learn React );}export default App;위 코드는 `function`키워드를 사용하여 App이라는 컴포넌트를 만든다. 이때 함수에서 반환하고 있는 코드는 마치 HTML을 작성..

리액트 프로젝트를 생성하고 실행해보기작업환경Mac OS환경 설정리액트 프로젝트를 만들때는 `Node.js`가 필요하다고 한다. `Node.js`는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임 환경이다. 리액트와 직접적인 연관은 없지만 프로젝트 개발 시 필요한 주요 도구가 Node.js를 사용하기에 설치해주도록 한다.Node.js 설치우선 `Node.js`가 설치되어있는지 확인하기 위해 터미널에 `node -v`를 입력해보았다. 이전에 설치를 한 적이 없다면 이 부분은 넘어가도 된다.예전에 이미 설치한 버전이 존재한다. 최근 나온 LTS 버전은 22.x이므로 기존 버전을 삭제하고 다시 설치하자. 홈브루를 이용해 `brew unistall node`를 입력하여 삭제..

Virtual DOMDOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성트리 형태이기에 특정 노드를 찾거나 수정, 제거, 원하는 곳에 삽입 가능동적 UI에 최적화 되어있지 않음 > 요소가 많아지면 느려짐 (DOM자체는 빠르지만 변화에 느림)Virtual DOM실제 DOM에 접근하여 조작하지 않고 추상화한 자바스크립트 객체를 구성하여 사용.리액트 DOM 업데이트 과정데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링이전 Virtual DOM에 있던 내용과 현재를 비교바뀐 부분만 실제 DOM에 적용라이브러리리액트가 다른 프레임워크와는 다르게 라이브러리라는 점은 다른 프레임워크에 존재하는 Ajax, 데이터모델링, 라우팅과 같은 기능이 ..