[React] 안녕 ~ React

 

* React

- 웹 프레임워크 자바스크립트의 라이브러리 중 하나

- 사용자의 인터페이스를 만들기 위해 사용됨

- facebook에서 제공하는 프론트엔드 라이브러리

- 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용됨

- 웹 / 앱의 View를 개발할 수 있는 라이브러리임

 

자바스크립트 라이브러리 - 앵귤러, 뷰, 리액트 (하나를 하면 나머지도 금방 할 수 있음)

html, css, javascript ---> 앵귤러, 뷰, 리액트

 

- 옛날 방식

html, css, javascript

index.html, sub1.html, sub2.html

css-style.css

js-main.js nav.js

document.querySelector()

---> 파일이 너무 많음

 

-이를 보완한 react

SPA(Single-Page Application)

 

 

 

* React 특징

1. Data Flow

React는 데이터의 흐름이 한 방향으로 흐르는 단방향 데이터 흐름을 가짐 (앵귤러는 양방향)

 

2. Component 기반 구조

component는 독립적인 단위의 소프트웨어 모듈 (독립적인 하나의 부품으로 만드는 방법)

 

3. Virtual Dom

Dom(Document Object Model)

 

4. Props and State

Props(properties) - 컴포넌트의 속성을 설정

부모 컴포넌트에서 자식 컴포넌트의 속성을 설정함

부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

자식 컴포넌트에서는 전달받은 props는 변경이 불가능(읽기전용 데이터)

최상위 부모 컴포넌트에서만 props를 변경할 수 있음

State

컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음

동적인 데이터를 다룰 때 사용됨

사용자와 상호작용을 통해 동적으로 값이 변경될 때 사용됨

children

컴포넌트 태그 사이에 내용을 보여주는 props

 

5. JSX

리액트의 화면을 정의할 때 작성

html과 유사해 보이지만 실제로는 JavaScript임

1) 꼭 닫혀야 하는 태그

<div>

                <Hello/>

                <Hello/>

</div>

 

2) 태그는 꼭 감싸져 있어야 함

function App(){

                return(      ---> 이러면 에러 남

                                <Hello/>

                                <div>안녕하세요</div>

                )

}  

 

function App(){

                return(

                                <>   ---> 이렇게 감싸줘야함               

                                            <Hello/>

                                            <div>안녕하세요</div>

                                </>

                )

}   

 

3) jsx에서 자바스크립트 표현식은 {} 묶어서 사용

4) if문 대신 삼항연산자 사용

5) class 속성은  classname 속성으로 사용

 

 

 

* 작업환경

1. node.js 

프로젝트를 개발하는데 필요한 도구들이 node.js를 사용(npm-패키지 관리자)

http://nodejs.org

2. yarn

패키지 관리자

 

리액트 프로젝트 생성

npx create-react-app 프로젝트 이름

npx create-react-app begin-react   // react 폴더에서 cmd 키구 설치

 

react 컴포넌트

1. 함수 컴포넌트

function App() {

                return <div>

                </div>;

}

2. 클래스형 컴포넌트

class App extends Component {

                render() {

                                return <div></div>;

                }

}                  

 

https://nodejs.org/ko/

Node.js

 

Node.js 설치 후 npm install

 

npm-start

 

플러그인 설치하기 ~

ESLint

JavaScript snippets

Reactjs snippets