[React] 기초

1. 리액트란?

• 리액트는 데이터변경이 잦고, 규모가 큰 라이브러리에 적합하다.
• 즉, sns나 채팅 프로그램에 적합하다.
• 페이스북, 인스타그램, 넷플릭스 등에서 사용하고 있다.
• 화면을 만들기 위한 자바스크립트 라이브러리
• 사용자와 상호작용이 가능한 동적 UI 제작 가능

2. 특징

1) Data flow

• 단방향 데이터 흐름을 가지고 있다.
• 양방향은, 프로젝트 규모가 커질수록 추적이 어려운 단점이 있지만 단방향 데이터 흐름은 이러한 단점이 없다.
• 부모 -> 자식 컴포넌트의 흐름이라, 코드를 이해하기 쉽고데이터 추적과 디버깅이 쉽다.
• 단점은 데이터의 변화를 감지하고 업데이트하는 코드(이벤트 함수)를 매번 작성해 주어야 한다.

2) Component 기반 구조

• 소프트웨어를 하나의 부품으로 만든다.
• 한 페이지에서 여러 부분을 component로 만들고, 이를 조립해 화면을 구성한다.
• 웹사이트에서 배너, 헤더, 푸터, 글목록 등이 모두 컴포넌트가 될 수 있다.
• 컴포넌트를 조합해 Root component (최상위 컴포넌트)를 만든다.
• 장점
  -컴포넌트 단위로 쪼개져 있어서 전체 구조를 파악하기 쉽다.
  -기능, UI 단위로 캡슐화 시켜 관리하므로 재사용성이 높다.
  -코드를 반복할 필요 없이 컴포넌트만 import하면 되므로 간편하다.
  -애플리케이션이 복잡해져도 유지보수,관리에 용이하다.

3) Virtual Dom

• 가상 돔이다. 자바스크립트의 객체이며 트리구조로 되어 있다.
• 이벤트가 발생할 때마다, 가상돔이 만들어지고 실제와 전후상태를 비교하여 달라진 부분을 실제 돔에 적용한다.
• 즉, 이벤트 등 변경사항이 있을때마다 렌더링 되는 것이 아니라, 최종적으로 크게 한번 리렌더링 되므로 가상돔은 앱의 속도와 효율성 증가시킨다.
  

4) Props and State

Props

• 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
• 자식에서는 props 변경 불가능, props를 전달한 최상위 데이터에서만 전달 가능하다.

State

• 컴포넌트 내부에서 선언되고, 내부에서 값을 변경할 수 있다.
• 클래스형 컴포넌트에서만 사용가능하고 각각의 state는 독립적이다.
  (함수형 컴포넌트에서는 사용불가)

5) JSX

• 자바스크립트를 확장한 문법으로 React Element를 생성한다.
• javascript + xml
• 자바스크립트에서 html을 작성하듯이 비슷하게 작성할 수 있도록 해준다.
• 필수로 사용해야하는 것은 아니지만 대부분 리액트에서 사용하고 있다.
  

3. 프로젝트

1) 생성

• 대문자 사용 불가능하다.
• 단어 여러개 사용 시 하이픈(-) 사용한다.
• npx를 사용한다.
  -npm의 자식 명령어로 npm보다 패키지를 가볍게 구성한다.
• 명령어 : npx create-react-app test-app

2) 실행

• 해당 프로젝트로 이동 후 명령어 작성한다.
• 명령어 : npm start
• localhost:3000에서 해당 페이지 볼 수 있다.
• 프로젝트 구조
  
• 폴더
  -node_modules : npm을 시작하면 생기는 폴더.모듈과 관련된 정보가 들어 있음.
  -public : index.html, favicon.ico -> 가상 DOM을 위한 파일이 들어있는 곳
  -src : 실제 리액트 코드(컴포넌트)를 작성하는 곳