REACT 핵심강좌 필기

 21.05.13

온라인강의 수강 시작: https://www.inflearn.com/course/react-velopert/ 

https://velopert.com/3613

프론트앤드 라이브러리란?

1. vue, angular, react

   장인은 도구를 탓하지 않는다

   angular: 프레임워크 차원에선 기능이 많지만 런닝커브가 많고 typescript사용이 기본

   react: 컴포넌트 기반, 프레임워크 아님, 뷰만 기능쓰고 나머진 라이브러리 사용(redux, router)

   vue: 입문자가 사용하기에 쉽고 webpack 없이 사용 가능, html로 마크업이 쉽다

2. model(양반향 바인딩)

   mutation(변화)

   변화에 따라 어떤 모델을 변경시키고 어떤 뷰를 사용할지 중요

   데이터가 바뀌면 그냥 뷰를 날려버리고 새로만들자(dom) -> virtual dom 사용하여 브라우저와 호환

   youtube: react and the Virtual dom 시청

Virtual Dom: react, VUE

REACT 장점

1. 큰 생태계

2. 사용하는곳이 많다 (airbnb, bbc, twitch, facebook)

Webpack: 번들링을 통해 의존성파일을 하나로 통합(web파일 관리 도구)

Babel: javascript 변환 도구          

실습: code sand box 사용 https://codesandbox.io/s/4r6lqrlvj9?file=/src/App.js

JSX: https://codesandbox.io/s/4r6lqrlvj9?file=/src/App.js

var: scope 함수 범위

let: scope 블럭 단위

jsx 문법참고: https://react-anyone.vlpt.us/03.html

즉시실행함수

<Fragment>

{(() => {

if (value === 1) return <div>111</div>;

if (value === 2) return <div>222</div>;

if (value === 3) return <div>333</div>;

return <div>없다</div>;

})()}

</Fragment>

Props(class형에만 존재)

부모가 자식에게 주는값, 자식입장에선 읽기전용

      (props) <Child value="value"/>

구조분해할당 문법

ex) name=>this.props의 객체가 구조할당됨

const MyName =({name})=>{

   return <div>안녕하세요 {name}</div>   

}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

State(내부 값을 변경)

ex) 

state = {

    number :0

}

handleIncrease = () =>{

    this.state.number+=1 ; //이런식으로 사용하면 react에서 값이  update 됬는지 알수 없다.

                                 // 꼭 값 변경 시  setState 사용해야함

}

handleIncrease= () =>{

    this.setState({

       number: this.state.number+1;

    });

}

arror function 사용 이유: this 값 

일반 함수로 사용하려면 아래와 같이 해야함

constructor(props){

    super(props);

    this.handleIncrease = this.handleIncrease.bind(this);

}

shouldComponentUpdate: Api 

최적화 작업해서 유용하게 사용

불필요한  update 막아줌

shouldComponentUpdate(nextProps, nextState){

    if(nextProps.value ===10) return false; //10일때는 값이 update 안됨 즉 렌더링 안함

    return true;

}

npm

yarn: 개선된 버전의 npm,  더 나은 속도 및 캐싱

 

npx create-react-app react-todo 설치 오류시 참고

https://rios.tistory.com/entry/React-npm-yarn-%EC%84%A4%EC%B9%98-%EC%98%A4%EB%A5%98-error-An-unexpected-error-occurred