코드캠프 4기 (31) 썸네일형 리스트형 REST Parameter 구조분해 할당 rest parameter const { money, hobby, ...rest } = child 리액트 훅 폼 http://react-hook-form.com Home React hook for form validation without the hassle react-hook-form.com 제어 컴포넌트 똑같은 value를 저장한다는 보장이 있으나 버벅거릴수 있다. 비제어 컴포넌트 매칭이 100%안될 수 있음 외부함수에 내부함수 함수안에 다른함수를 리턴으로 받기 UseEffect, ref UseEffect, ref ref 태그들을 변수에 담아서 쓸 수 있다. (담기위해 ref를 사용한다) // componentDidMount와 동일 (그리고(render) 난 뒤 실행) useEffect(() => { }, []); [] - 의존성 배열(dependency array) 괄호 안에 바뀔때 마다 useEffect 실행된다. 👉 의존성 배열이 없으면? useEffect(() => { }); 뭐 하나라도 바뀌면 다시실행된다. class component에서 componentDidUpdate와 비슷하다. 💡 componentDidUpdate와의 차이점 componentDidUpdate()는 변경이 일어났을때만 실행되고, useEffect(() => { }); 는 처음에는 무조건 실행되고, 뭐라도 하.. 11월 26일 메모 디바운싱 작성하다가 잠깐 멈췄을때 (재입력 없을때) 한번 실행되는 함수 Throattling 먼저실행하고 특정 시간 지나기 전까지는 실행하지 않는 함수 대표적인 예 : 스크롤 이벤트 11월 24일 메모 resolvers 함수들을 모아서 resolvers에 감싸서 넣기. 실행되는 공간 (api는 함수) Board.insert() axios 처럼 db로 요청 BAAS Backedn As a Service SAAS PAAS (software, platform) realtime database 채팅이나 알람, 실시간 서비스 코드캠프 4기 - 11월 22일 여러개의 함수를 묶어서 하나의 객체를 만든다. 객체(객체지향프로그래밍-OOP) 함수형 컴포넌트를 위해 훅, 함수를 통해서 컴포넌트를 만들었다. 함수형 컴포넌트에서 setstate와 같은 기능을하는 것은 클래스 컴포넌트에서는 extends Component을 통해 class component를 만든다. 화면에 그리기 render() 클래스 안에 함수 만들때는 function적는것 빼기 클래스 안에 this.onClickCounter (클래스 안에 있는것을 접근하기 위해) 자바스크립트 클래스 밖에서 this를 하면, 가장 최상위인 window를 가르킨다. this.alert("dd")은 window.alert("dd")와 같다. onClickCounter()는 클릭했을때 실행이된다. 새로운 환경이 만들어지고.. State 끌어올리기, 스프레드 연산자, Deep copy, 무한스크롤 - 11월 19일 state 끌어 올리기 자식1의 카운트가 올라가면 자식2의 카운트를 올리고 싶을때? 두개의 state를 부모로 끌어올린다. 부모 state를 props로 각각 내려준다. 부모의 setstate를 자식으로 propsfh 내려준다 모든 컴포넌트가 하나의 state를 공유 글로벌 state string, number boolean 에 값이 들어가지만 객체, 배열은 값은 다른곳에, 주소만 저장 profile의 모든 key value들 복사 ... 스프레드 연산자 위와 같이 스프레드 연산자를 사용해도 객체 안의 객체는 저장되지 않는다. (shallow copy) Deep Copy 전체를 문자열로 바꾸고, 문자열을 다시 객체로 돌리기 객체를 문자열로 바꾸기 JSON.stringify(profile) 문자열을 객체로.. 이벤트 버블링 - 11월 18일 태그 안 props.childern, 모든 페이지들을 가운데 정렬을 할 수 있다. yarn add -D @types/react-slick 내가 설치했던 모든 파일 yarn.lock은 깃허브에 올리는게 중요하다. event.target as Element 엘리먼트라고 강제 id는 중복이 안되게끔 만드는데, 아이디를 많이 쓰는게 좋지 안흠 하나의 함수에서 여러가지 값을 받는 방법이 있다. 페이지네이션? 이벤트 버블링 (event.currentTarget.id) 코드캠프 4기 - 11월 17일 return 페이지들 _app.tsx 설정담당 파일 Component 부분을 감싸기 (변하지 않는 부분을 만들기 위해) *여러 레이아웃 구조 생각해보기* 이 부분의 페이지들이 바뀐다 props 수동 props 자동 ----- props.children global style 모든페이지에서 적용하기 폰트다운받을때 경량화 버전으로 다운로드 받기 React Slick yarn add react-slick npm install slick-carousel --save import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; 이전 1 2 3 4 다음
