React란?
A JavaScript library for building user interfaces
: UI를 만들기 위한 JS 라이브러리
UI란 사용자의 입력등을 통해 페이지와 상호작용하는 시스템을 뜻합니다.
입력을 통해 페이지가 동적으로 변해야 하는데 리액트는 이를 위한 도구입니다.
페이지의 일부분이 효율적으로 수정되기 위해서는 페이지 전체가 리로딩되지 않고 일부분만 수정되는것이 좋겠죠?
이를 위해 React는 SPA(Single Page Application)구조를 이용합니다.
React의 장점
SPA는 단일 페이지 웹사이트로 큰 틀이 되는 페이지 하나에서 필요한 부분만 내용이 변경되는 구조를 뜻합니다.
React는 SPA구조를 통해 페이지의 빠른 업데이트를 지원하고 하나의 페이지만을 관리하여 html파일을 여러개 만들 필요가 없게됩니다.
또한, 일부만 수정한다는 뜻은 페이지를 컴포넌트화하여 구성한다는 뜻인데 이는 페이지의 재사용성을 높여주게됩니다.
JSX
JSX는 JavaScript와 XML/HTML을 결합한 문법입니다.
React 사용에 있어 필수는 아니지만 사용을 권장합니다.
JSX 문법 예시
// JSX const element = <div>환영합니다. 사용자님</div>;
페이지를 구성하기 위한 태그형식의 문법을 JavaScript에서 사용하여 직관성과 간결성이 향상되었습니다.
태그 사이에 JavaScript 변수를 넣으려면 {}를 이용합니다.
{변수명}
// JSX const name = "javaman"; const element = <div>환영합니다. {name}님</div>;
React 사용하기
React CDN
<!--HTML--> ~~~ <div id="root"></div> <!-- 리액트 CDN 링크 --> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- 리액트 컴포넌트(직접 작성) --> <script src="testReact.js"></script> ~~~
리액트는 위와 같이 기존의 프로젝트에 추가할 수 있습니다.
또한, CRA(create react app)도구를 통해 리액트로 웹 애플리케이션을 개발하는데에 필요한 모든 설정이 되있는 상태로 프로젝트를 생성할 수 있습니다.
CRA를 이용하기 위해서는 Node.js와 npm을 다운로드 해야합니다.
1) Node.js 사이트를 진입하여 Node.js를 설치합니다.(LTS)
2) VSC등의 터미널에서 npx create-react-app XXXXXX(생성할 프로젝트 명)을 입력하여 실행합니다.
성공적으로 생성시 다음과 같이 나옵니다.
※ react는 프로젝트 명으로 소문자만 허용합니다.
3) cd XXXXXX와 npm start를 실행하면 프로젝트가 열립니다.
4) 터미널에서 Ctrl+C를 입력하면 프로젝트가 종료됩니다.
