react 사용법, 기본 개념

리액트 코드를 자바스크립트로 바꿔주는 툴이 필요하다. 이걸 트랜스파일러 트랜스포머 모듈번들러라고 부르기도 한다.

웹팩은 리액트 코드를 브라우저가 이해할수 있는 코드로 변경 해주는 역할을 한다..

리액트로 작업하려면 웨팩과 같은 모듈번들러가 필요하다.

------------------------------------------------------

(CRA 사용법)

하지만,,, 리액트를 만든 페이스북에서,,, 초보자를 위해,,,, 이걸 대신해주는 툴이 잇다..

create react app이라고 치면된다.. 줄여서 CRA라고 부른다..

까는 방법은 여기에 나왔다..  https://github.com/facebook/create-react-app

아마 quick overview라는 항목에 나와있을 것이다...

npm 또는 npm의 다음버전 npx로 깔면된다..

이런식으로.......

Quick Overview

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

깐 경로로 가면.. 이미 파일등이 세팅이 되어있을 것이다..

다시 돌아와서설명하자면,,, CRA의 사용하는 큰 장접은 configuration을 안해도 된다는 것이다.

==============================================

기본 개념들

컴포넌트에다가 jsx언어(거의 html과 비슷하다)를 실행시켜서 작동시킨다.. 

보통 index.js 파일이라고 명명을 붙이는데,,, 여기다가,,, react/reactDom/css/컴포넌트앱을 여기에 가져온다..

여기서 reactDom은 라이브러리를 웹사이트에 출력하는 것을 도와준다.. 스마트폰인경우 reactNavtive를 쓴다

헷갈릴 수도 잇는데,, react는 UI라이브러리, reactDom은 웹사이트에 출력하는 것을 도와주는 것이다.

props : 부모 컴포넌트와 자식 컴포넌트를 연결해준다...

/*컴포넌트의 라이프싸이클*/

Render : componentWillMOunt() -> render() -> componentDidMount(), 순서를 바꾸어도 이렇게 된다.. 

Update : 

componentWillReceiveProps() 컴포넌트가새로운props를 받았다는말 -> 

shouldComponentUpdate() 리액트는 old props와 new props를 비교 살펴본뒤 다르면 true ->

componentWillUpdate(), 이컴포넌튼 업데이트 -> 

render() , 준다 -> 

componentDidUpdate(), 확인

*set과 setstate

state란?

state는 리액트 컴포넌트 안에 있는 오브잭트이다.

컴포넌튼 안의 state가 바뀔때마다, 컴포넌트는 다시 render 함

쉽게 설명한다면,, 컴포넌트안에 객체인데,, 이걸,, jsx(react의 html)언어에다 추가할수 있다......

그리고 내용을 변경할때는 setstate로 한다... 예를 들자면,, 5초뒤에 내용을 바꾼다고 한다면,,,

render에다 내용과 state를 적고,,,,

componentDidMount에다,, 시간관련 객체(setTimeout따위)에다가 setState 적어 변경하면 된다..

*state (똑똑한)컴포넌트 stateless (멍청한)컴포넌트

state 컴포넌트는 위에 나온것들을 말하고

stateless 컴포넌트는 state가 없다...

* 컴포는트에는 다양한 컴포넌트가 있다.... 위에 말한 것처럼 stateless 일수도 있고 순서가 있을수도 있다.. 하지만 결론 부터 말하자면,,, 이러한 컴포넌트가 똑똑한 컴포넌트던 아니던 다양하던,,,

중요한건 한개의 Props와 한개의 html만 있으면 된다...