[리액트 React] 처음 만난 리액트 Section 1. 리액트 소개, Section 2. 리액트 시작하기

Section 1. 리액트 소개

리액트는 무엇인가?

• UI를 만들기 위한 JS 라이브러리
  • 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것
  • UI: 사용자와 컴퓨터 프로그램의 상호작용을 중간에서 제어해주는 것
  • JS UI library: NgularJS(Google), React(Meta), Vue.js(중국인 개발자가 시작한 오픈소스 프로젝트) - 리액트는 라이브러리, 나머지 둘은 프레임워크
  • 프레임워크 vs 라이브러리: 프로그램의 흐름에 대한 제어 권한 - 프레임워크는 제어 권한을 프레임워크가 갖고 있는 반면 라이브러리는 개발자가 필요한 부분만 끌어다 쓰는 것(제어 권한이 개발자에게 있음)
• 웹 개발의 트렌드 - 계속 바뀜 → 웹사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요
• SPA - 하나의 HTML을 만들고 요청이 들어올 때마다 컨텐츠 불러오기 → 리액트는 SPA를 만드는 도구

리액트의 장점과 단점

• 장점
  • 빠른 업데이트 & 렌더링 속도 (업데이트: 화면에 보이는 내용이 바뀌는 속도)
  • Virtual DOM
    • DOM(Document Object Model): 웹 페이지를 정의하는 하나의 객체 - 한 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇
    • 개발자 도구 켜서 document 검색하면 나옴
    • 웹 페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 Virtual DOM
    • 빠른 업데이트를 위해 사용 - 화면 업데이트 = 돔 수정
    • 돔을 직접 수정하는 것은 비용이 많이 드는 작업 → 업데이트할 최소 부분만을 찾아 업데이트

• • Component-Based 구조
    • 리액트는 모든 페이지가 컴포넌트로 구성되어 있고 한 컴포넌트는 다른 여러 컴포넌트로 구성됨
    • 컴포넌트 기반의 장점: 재사용성 (Reusability)
    • → 재사용성이 높게 개발: 해당 소프트웨어나 모듈이 다른 곳에도 쉽게 사용할 수 있도록
    • → 다시 사용 가능한 성질 - 재활용과 재사용은 조금 다름 (재활용은 다시 활용한 자원을 가공하여 새로운 제품을 만드는 것, 재사용은 계속해서 사용 가능한 성질 → 물리적인 것은 재사용 불가능)
    • 리액트와 재사용성: 컴포넌트 기반 구조 - 웹 사이트에서 여러 곳에서 재사용될 수 있음 → 재사용성이 높은 컴포넌트 개발
  • 든든한 지원군 Meta: Meta가 만든 오픈 소스 프로젝트 - 프로젝트 성장/유지를 위해 필요한 자본
  • 활발한 지식 공유 & 커뮤니티 (개발 생태계와 커뮤니티)
  • 리액트 네이티브를 이용해 앱을 만들 수도 있음 - 프로그래밍 언어 및 프레임워크를 따로 학습할 필요가 없음
• 단점
  • 방대한 학습량: 기존과 다른 방식의 UI 라이브러리 - Virtual DOM, JSX, Component, State, Props 등의 개념
    • 계속 바뀌는 부분에 대해서도 공부해야 함
  • 높은 상태관리 복잡도: State(리액트 컴포넌트의 상태) - Virtual DOM은 state가 바뀐 부분을 찾아 업데이트 → 굉장히 중요! 성능 최적화를 위해 state 관리가 중요함 - Redux 등 외부 상태관리 라이브러리 등 사용 필요

---

Section 2. 리액트 시작하기

(실습) 직접 리액트 연동하기

• HTML만으로 간단한 웹사이트 만들기
  • head의 title 태그 안에 들어가는 내용이 탭 이름이 되고 body 안에 들어가는 내용이 사용자에게 보여짐
• CSS를 사용하여 웹사이트 스타일링하기
  • link 태그: 현재 html 파일과 외부 리소스 사이의 관계를 정리하기 위해 사용
  • index.html파일과 styles.css 파일이 동일한 디렉터리에 위치해야 함
• 웹사이트에 react.js 추가하기
  • div id=”root” 태그로 index.html에 DOM Container (Root DOM Node) 추가하기
  • script 태그로 리액트, 리액트 돔, 리액트 컴포넌트 가져오기
  • MyButton.js로 함수 컴포넌트 작성하기 - 컴포넌트를 render 함수로 DOM에 렌더링해야 컴포넌트가 화면에 보임
  • 버튼 클릭하면 버튼의 라벨이 바뀜 - 리액트 컴포넌트의 state가 변경되었기 때문

(실습) create-react-app (3분)

• 앞서 배운 것은 기존 웹사이트에 리액트를 적용하는 방법 → 새로운 웹사이트를 만들 때 리액트를 사용하는 방법
• create-react-app (cra): 리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어있는 상태로 프로젝트를 생성해주는 도구
• Node.js, npm, Vs Code가 필요함
• npx (execute npm package binaries) 명령어: npm 패키지를 설치한 이후 바로 실행까지 해주는 명령어 (패키지 설치, 실행을 간단하게 하려고 사용)
• → vs code 터미널에 명령어 입력

npx create-react-app <your-project-name> # 사용법
npx create-react-app my-app # 실제 사용 예제

• 설치 후 앱을 실행할 수 있는 명령어를 알려줌

cd my-app # 경로 변경
npm start # 애플리케이션 실행