컴포넌트웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소 1단계 : 컴포넌트 정의하기사용하고 싶은 컴포넌트를 원하는 마크업을 추가하여 작성 (React 컴포넌트의 이름은 항상 대문자로 시작해야 함)export default function Introduce() { return ( 제 이름은 권여진입니다. 만나서 반갑습니다! );} 2단계 : 컴포넌트 내보내기export default 접두사를 사용하면 다른 파일에서 해당 컴포넌트를 가져올 수 있도록 해줌해당 컴포넌트를 내보낼 준비가 된 것이라고 말할 수 있음// 방법 1export default function Introduce() { return ( // JSX 코드 );}// 방법 2function Introd..

React 프로젝트 생성하기  CRA 사용하기모듈 번들러로 Webpack 사용개발 환경에서도 번들링 진행 O서버 시작과 리로딩 시간 느림웹팩의 다양한 기능 이용 가능 - 프로젝트 생성 : npx create-react-app프로젝트에 필요한 모듈도 같이 설치 (node_modules) - 프로젝트 실행 : npm start 실행하면 http://localhost:3000/ 로 아래와 같은 화면이 나온다!// CRAnpx create-react-app// 실행npm start CRA 폴더 기본 구조my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ ├─..

NPM (Node Package Manager)JavaScript 패키지의 설치, 배포, 관리를 도와주는 도구  JavaScript 패키지?재사용 가능한 JavaScript 코드 묶음, npm에 배포된 패키지는 package.json 파일로 정보를 표시함 패키지를 사용해서 또 다른 패키지를 만들 수도 있음 -> 사용한 패키지에 대한 의존성이 생김 Npm을 사용하여 프로젝트에 패키지 사용하기// 프로젝트 초기화 & package.json 파일 생성npm init// 패키지 설치npm i 패키지이름npm install 패키지이름// 패키지 삭제npm uni 패키지이름npm uninstall 패키지이름// 패키지 목록 확인npm lsnpm list  - npm 사이트 npm | HomeBring the bes..

React현대적이고 강력한 사용자 경험(UX)을 제공하는 접근성 높은 JavaScritp 라이브러리 Facebood(현 Meta)에서 만든 UI 개발 자바스크립트 라이브러리 현존하는 JavaScript UI 라이브러리 중에서 가장 많이 사용하고 있으며 현업에서 React는 중요한 기술 스택 중 하나로 자리 잡아있다온라인상에 풍부한 자료와 예제 코드, 질문과 답변을 찾아보기도 편리! HTML, CSS. JS를 사용해서 만드는 것보다 더 체계적이고 성능이 좋은 웹 어플리케이션을 만들 수 있음 React의 주요 특징가상 DOM을 통한 효율적인 렌더링컴포넌트 기반의 재사용 가능한 UI단방향 데이터 바인딩JSX 문법을 통한 직관적인 UI 작성SPA 개발 지원활발한 커뮤니티와 생태계 React를 사용한 대표적인 웹..