React
1.React는 왜 만들어졌을까?
Document Object Model = HTML문서의 계층 구조와 정보를 표현 및 제어할 수 있는 API. 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조.상태가 바뀌었을 때, 처음부터 새로 만들어서 보여주자. => 속도가 늦어짐메모리에 있는 가상의 돔을 통해 속도
2.React의 시작 - 설치
node.jsnpmvscodenpm start
3.React 시작(2)
대문자로 시작두단어 이상일 때는 대문자로 분류
4.React - JSX의 기본규칙
React에서 컴퍼넌트의 생김새를 정의babeljs.io를 통해 HTML형식을 JavaScript로 변환태그는 닫혀 있어햐 한다.가. 태그 안에 내용이 없는 경우 셀프클로즈 태그 사용두개 이상의 태그는 하나의 태그로 감싸야한다.가. 비어있는 태그로 감싸도 된다. '&l
5.React - useState
Counter.js를 만들기App.js에서 불러오기\-1과 2를 통해 UI 완성-Counter.js에 이벤트 설정useState 사용
6.axios.post 활용
react에서 axios를 활용하여 데이터를 추출 및 출력해보았다.신경쓸 것1\. .then을 이용하여 연동 성공 시 할 행동을 정하기2\. .catch를 이용하여 연동 실패 시 할 행동을 정하기3\. typescript는 타입을 꼭 입력해야한다.4\. 서버와 연동할
7.react-router로 페이지 만들기
는 하나의 페이지를 통해 작동되기 때문에 router를 이용하여 페이지를 나누어야 한다.react-router-dom 설치
8.React-responsive로 반응형 웹 만들기
설치 및 세팅 npm i react-responsive npm i @types/react-responsive 문법 useMediaQuery
9.React.memo() - 공부 필요
React.memo()를 사용하는 이유렌더 결과가 같다면 메모이징을 통해 내용을 재사용하여 빠른 반응
10.React - Pagination
Pagination 원하는 데이터를 테이블로 만들고 이를 페이지 선택하고자 했다. Table Component typescrips: 타입 설정을 신경쓰자. memo함수: 렌더링 결과를 기억하려 불필요한 재렌더링을 줄여 속도를 향상시킨다. 2-1. memo 함수