[React] 기초

React
- 웹 프레임워크 자바스크립트의 라이브러리중 하나
- 사용자의 인터페이스를 만들기 위해 사용됨
- facebook 에서 제공해주는 프론트엔드 라이브러리
- 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용
- 웹/앱의 View를 개발할 수 있는 라이브러리

html, css, javascript --> 앵귤러, 뷰, 리액트( 3개 중 하나만 해도 나머진 금방 배울 수 있음)

React 특징

1. Data Flow
   react는 데이터의 흐름이 한 방향으로 흐르는 단방향 데이터 흐름을 가진다.
2. Component 기반 구조
   component는 독립적인 단위의 소프트웨어 모듈을 말한다.
   - 독립적인 하나의 부품으로 만드는 방법
   - 기능별로 하나의 component를 이용해 조립하 듯 사용한다.
   - 애플리케이션이 복잡해지더라도 component를 import해서 사용 가능
   ex) 네이버를 기준으로 로고,뉴스창,로그인창,쇼핑창 등등. 하나의 창들이 모두 component
3. Virtual Dom
   Dom Document Object Model
   현재의 화면과 가상의 화면을 비교했을때 변화가 있는 component만을 변경한다.
   전체를 변경하지 않고 부분만 변경하기에 속도와 웹의 편의성이 좋다.
4. Props ans State
   Promps(properties) - 컴포넌트의 속성을 설정.
   부모 컴포넌트에서 자식 컴포넌트의 속성을 설정함
   Props 부모 컴퍼넌트에서 자식 컴퍼넌트로 전달해주는 데이터
   읽기 전용 데이터 자식 컴포넌트에서 전달받은 props는 변경이 불가능함.
   최상위 부모 컴포넌트에서만 props를 변경할 수 있음.
   State
   컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
   동적인 데이터(값이바뀌는) 데이터를 다룰때 사용
   사용자와 상호작용을 통해 동적으로 값이 변경될때 사용한다.
   children
   컴포넌트 태그 사이에 내용을 보여주는 props// 사이에 들어가는 값이 children
5. children
6. JSX
   리액트의 화면을 정의할 때 작성
   html과 유사해 보이지만 실제로는 javascript이다.

1) 꼭 닫혀야 하는태그

<div>  
<Hello/> // 셀프클로징을 꼭 해줘야 한다. <Hello> 시 에러  
</div>  
2) 태그는 꼭 감싸져 잇어야 함( 1개의 태그 이상 사용이 불가능함)  
function App() {  
return(  
<>  
<Hello/>  
<div>안녕하세요</div>  
</>  // 태그로 감싸서 하나의 태그로 만들어 줘야함.  
// <div>같은 태그를 사용해도 되지만 사용하기 싫다면 가짜태그를 사용 가능    
)  
}  

3) JSX에서 자바스크립트 표현식을 사용하려면 {} 로 감싼다.
4) 리액트에서는 if문이 사용이 불가능함 if문대신 삼항연산자를 사용
5) class속성은 className속성을 이용해야함

1. node.js
   프로젝트를 개발하는데 필요한 도구들이 node.js를 사용
   (npm - 패키지 관리자) 리엑트 설치 후 cmd에 node 입력시 버전이 나온다.(설치완료)

확장프로그램
ESLint 설치
JavaScript (ES6) code snippets 설치
Reactjs code snippets 설치 ( rsc 입력시 바로 함수입력)

리액트 프로젝트 생성 ( cmd에서 실행 )
npx create-react-app 프로젝트 이름
npx create-react-app begin-react

비주얼스튜디오에서 생성한 폴더를 열고 새터미널을 연 후 npm start입력

react 컴포넌트

1_1. 함수 컴포넌트  
function App() {  
return <div>  
</div>;  
}  
1_2. 
const 이름 = () => {
    return <>;
}

2. 클래스형 컴포넌트

   class 이름 exteds Component {
   rander() {
       return <div></div>;
   }
   }

 

js파일 생성 후 

rsc + tab = 파일명으로 함수 기본틀 생성

rcc + tab = 파일명으로 클래스 기본틀 생성