1. 파라미터 없이 버튼 click 이벤트
<Button onClick={saveLoc}>저장</Button>const saveLoc = ()=>{ Axios.post call
}2. 파라미터 있는 버튼 click 이벤트 -> 함수형으로 작성 -> 함수형으로 작성하지 않으면 호출되지 않아도 로딩시 자동실행됨<Button onClick={()=>delLoc(row)}>삭제</Button>const delLoc = (item) =>{
const body = {
seq: item.seq
}Axios call}----undefined 비교 방법-> props.user.userData !== undefined && logic
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
즉시실행함수
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://medium.com/sjk5766/javascript-object-key-vs-object-key-%EC%B0%A8%EC%9D%B4-3c21eb49b763
https://hoilzz.github.io/react/connect-state/
https://velog.io/@jeonghoheo/Redux-React-요약
https://www.hashbangcode.com/article/prevent-enter-key-submitting-forms-jquery
jquery를 사용해서 아래와 같이 처리
onkeydown->enter 이벤트 막고
onkeydown->enter 이벤트 실행
DOM 리소스가 작을 경우 (클 경우 1 3 2 )
1. script 순서대로 실행
2. dom 로딩후 window.onload(=body onload)
3. dom 로딩후 $(document).ready(=$(function(){}))
$(document).ready() = $(function())
외부리소스, 이미지와는 상관없이 브라우저가 DOM트리를 생성한 직후 실행
window.load()와 비슷한 시점 실행되고 중복사용해도 선언한 순서대로 실행
(html리소스 작은 경우 onload가 빠름)
(html리소스가 큰 경우 ready가 빠름)
(window).load() = body onload
DOM의 standart 이벤트
Html로딩이 끝난 후 사용
딱한번만 로딩(중복 이벤트 불가)
화면에 필요한 모든 요소(css, js, image..)가 웹 브라우저 메모리에 올려진 다음 실행
화면이 모두 그려진 다음에 실행되는 이벤트에 적합
외부링크나 파일 include 시 그안에 window.load 스크립트가 있으면 둘중 하나 실행
