React 공부하자 (1)

 

1. react는 자바스크립트 기반이다. 별도로 다른 프레임워크를 배울 필요가 없음. (angular나 vue.js 처럼)

react를 하면서 동시에 자바스크립트 기술을 업그레이드 시킬 수 있다.

 

2. 리액트 구조는 요소별, 컴포넌트별로 나눠서 작업할 수 있다.

 

 

 

위 그림처럼 요소별로 나눠서 볼 수 있다.

그룹별로 쪼개서 , 작업을 할 수 있다.

모든 걸 작은 요소로 쪼개서 작업이 가능하다.

 

JSX : 리액트로 html쓰는것.

 

3. 단방향 데이터 플로우를 가지고 있다.

데이터는 위치한 장소에 있고, 상태가 변했을 경우 데이터는 그대로 있고,  UI가 업데이트 된다. ( UI가 데이터를 변경시키지 않는다. 절대로)

 

리액트는 UI라이브러리이다. (프레임워크가 아니다.)

 

 

웹팩(Webpack) : 리액트 코드를 브라우저가 이해라 수 있는 코드로 변경해주는 툴

 

리액트 기초 세팅! ( **node가 깔려있다는 전제하이다.)

1) google에  create react app을 검색

2) 첫번째 facebook의 github에 들어간다.

3) 아래 코드를 터미널에서 입력 

npx create-react-app my-app
cd my-app
npm start

나 같은 경우 VsCode내의 터미널 (git bash를 이용)을 이용했음.

 

위와 같이 만들어 질것이고, 실행을 하고 나면 

 

이런화면이 뜰것이다 .그럼 기초셋팅 끝!!

 

**추가로 npm말고 yarn을 이용을 많이 한다고도 하니. yarn을 쓰는것도 괜찮다.

npm install -g yarn

 

위와 같이 인스톨을 하고나서

 

yarn start

똑같이 해주면 끄읕!

 

 

 

 

React vs ReactDOM

- 리액트는 라이브러리

- 리액트돔은 리액트를 웹사이트에 출력하는걸 도와주는 모델 리액트를 사용해서 웹에 올려놓고 싶다. 리액트 돔 사용

앱에 올려놓고 싶다. 리액트 네이티브 사용

 

 

리액트 2개 주요 컨셉 

state

props : 부모가 자식에게 정보를 주는 방법 props를 통해서 준다.

 

 

** 리액트는 엘리먼트가 많을경우 key라는것을 꼭 줘야한다. 

 

 

yarn add prop-types  <=> angular의 인터페이스 같은 것 설치 해서 사용

 

isRequired라고 작성하면 필수로 설정됨.

 

 

 

사이클 

컴포넌트가 존재하기 시작하면

will mount (사이클이 시작됨을 알림)

did render (컴포넌트가 리액트 세계에 존재함)

did mount  (성공적으로 리액트 세계에 컴포넌트가 자리잡음)

이 순서대로 작동한다.

 

업데이트

아래 순서대로 작동한다.

componentWillReceiveProps() ->shuouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate()

 

 

 

state 리액트 컴포넌트 안에 있는 오브젝트

state가 바뀔때마다 render 발생 ( 새로운 state와 함께)