반응형 패캠챌린지52 패스트캠퍼스 챌린지 50일차 (Hooks의 제약 조건과 구현 방식의 연관성) 22.3.14 (월) +50days Re-Introduction of React Hooks 3. Hooks의 제약 조건과 구현 방식의 연관성 다시 보기 컴포넌트 밖에서 실행하거나, 실행되는 Hook의 갯수가 일정하지 않다면….. Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. Invariant Violation: Hooks can only be called inside the body of a function component. 👉 https://ko.reactjs.org/docs/hooks-rules.html Hooks, 어떻게 생겼을까 구현 방법 예상.. 2022. 3. 14. 패스트캠퍼스 챌린지 49일차 (Hooks 를 통한 해결) 22.3.13 (일) +49days 2. Hooks 를 통한 해결 Too many hooks useState Component.state / setState 함수형 컴포넌트 내에서 상태 관리가 가능해짐 useEffect Component.componentDidMount / componentDidUpdate / componentWillUnmount Lifecycle Method 대체 가능 useRef React.createRef DOM Element 등, 렌더링 시점에 상관 없이 참조되는 값 저장하기 useContext Context.Consumer / Component.contextType 여러 컴포넌트에서 공유할 수 있는 상태 만들기 (Scoped state?) useCallback / useMemo .. 2022. 3. 13. 패스트캠퍼스 챌린지 48일차 (함수형 컴포넌트의 한계) 22.3.12 (토) +48days 함수형 컴포넌트의 구조 컴포넌트는 결국 React Element 를 만드는 여러 방법 중 하나 function SimplifiedGreetring(props) { const showName = () => alert(props.name); const handleShowName = () => setTimeout(showName, 3000); **console.log(this); // undefined - 인스턴스를 생성하지 않는다.** return ( Hello, {props.name} show name ); } export default SimplifiedGreetring; 함수형 컴포넌트는 상태를 가질 수 없었다. Hooks, Closure 매번 실행될 뿐인 함수가 상.. 2022. 3. 12. 패스트캠퍼스 챌린지 47일차 (함수형 컴포넌트의 해결 방식) 22.3.11 (금) +47days 함수형 컴포넌트의 해결 방식 (물론,) 클래스 컴포넌트에서도 해결할 수 있다 비동기 콜백 내 값 변조, this 바인딩 등... import React from "react"; import "./styles.css"; class Greeting extends React.Component { constructor(props) { super(props); this.state = { name: "students!" }; **// [1] this에 직접 바인딩** // this.changeNameAndNotify = this.changeNameAndNotify.bind(this); } **// [2] this lexical binding(선언한 곳의 this 바인딩) // 3.. 2022. 3. 11. 패스트캠퍼스 챌린지 46일차 (자바스크립트의 this 바인딩 방식) this is hard 실행 환경에 따라 바뀌는 this JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 [함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는]() [bind]() 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다). this = … 전역 호출시 window 함수에서 호출 시 window, strict mode 일 경우 u.. 2022. 3. 10. 패스트캠퍼스 챌린지 45일차 (클래스 컴포넌트의 구조와 한계) 22.3.9 (수) +45days 클래스 컴포넌트의 구조 React Component 인스턴스를 생성하는 클래스 import React from "react"; import "./styles.css"; class Greeting extends React.Component { showNmae = () => { alert(this.props.name); }; handleShowName = () => { setTimeout(() => { this.showNmae(); }, 3000); }; render() { console.log(this); return ( Hello, {this.props.name} show name ); } } 클래스 컴포넌트의 특징 인스턴스 재환용 props, state 재할당 시 값 .. 2022. 3. 9. 패스트캠퍼스 챌린지 44일차 (Trouble Overview) 22.3.8(화) +44days 우리는 리액트 시대에 살고 있다 패턴 둘러보기 클래스 컴포넌트 컴포넌트 라이프사이클 이벤트 바인딩 Presentational / Container 패턴 함수형 컴포넌트 Stateless 고차 컴포넌트 Hooks 비동기 처리 Lifecycle method, Event Handler, useEffect Redux Middleware React Query, SWR Suspense API Solved Troubles 모든 라이브러리는 문제를 해결하기 위해 만들어졌다 jQuery 크로스브라우징 이슈 및 레거시 Web API의 부족한 기능 보완 Angular 데이터 바인딩 및 컴포넌트 단위 개발 패턴 정립 React 양방향 바인딩에 의한 성능 저하 문제 해결 짧고 간결한 함수형 컴포.. 2022. 3. 8. 패스트캠퍼스 챌린지 43일차 (react hook form) 22.3.7 (월) +43days react-hook-form 은 복잡한 폼을 다룰 때 도움을 주는 라이브러리 입니다. 특징 비제어 컴포넌트(Uncontrolled component) 를 사용해 불필요한 렌더링을 줄여 퍼포먼스를 향상시킵니다. (Uncontrolled Component vs Controlled Component) 타입스크립트를 지원합니다. React hook API 를 지원합니다. Uncontrolled Component vs Controlled Component react-hook-form 을 다루다보면 제어 컴포넌트(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component)에 관한 내용이 빈번하게 소개됩니다. react 공식 문서에서도 이를 .. 2022. 3. 7. 패스트캠퍼스 챌린지 42일차 (react-query) 22.3.6 (일) +42days React Query 란 ? react-query 는 React Application에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트 하는 작업을 합니다. Motivation 기본적으로 React Application 에서는 서버로부터 데이터를 가져오거나 업데이트하는 방법을 제공하지 않습니다. 개발자는 자체적으로 이 방법을 구축해야 하는데 일반적으로는 react hooks 를 사용하여 컴포넌트 state 및 effect 를 조합하거나 글로벌 상태 머신을 사용하여 React Application 전체의 비동기 처리를 다룹니다. 대부분의 전통적인 상태 관리 라이브러리는 비동기처리나 서버 상태 작업 보다는 클라이언트 상태 관리에 적합한데 여기서 서버 상태란 아래의 .. 2022. 3. 6. 패스트캠퍼스 챌린지 41일차 (Recoil 2) 22.3.5 (토) +41days https://recoil-todo-list.netlify.app/ 실습예제 Use-Cases 좌, 우 아이콘 버튼을 클릭하여 이전 달, 다음 달로 이동 가능하다. 오늘 날짜는 #313133 색으로 표시 날짜를 선택하면 해당 날짜#7047EB 색으로 표시 선택한 날짜의 숫자를 더블 클릭하면 해당 날짜의 할 일 목록의 통계 모달을 노출시킨다. 할 일 목록이 있을 시에 리스트로 노출되고 제 아이콘을 눌러 제 가능하다. 선택한 날짜의 빈 곳을 더블 클릭하면 해당 날짜의 할 일 등록 모달을 노출시킨다. 할 일을 입력하고 엔터 키를 누르면 해당 날짜의 할 일 목록에 추가된다. 해당 날짜의 할 일 목록이 3개가 넘게되면 그 외 n 개 로 표시된다. 그 외 n 개를 클릭하면 해당 .. 2022. 3. 5. 패스트캠퍼스 챌린지 40일차 (Recoil 1) Recoil 이란 ? ecoil 은 페이스북에서 만든 상태 관리 라이브러리이고 2020년 5월에 진행된 React Europe 2020 에서 처음으로 소개되었습니다. 현재 (2021년 8월 2일) 기준으로 최신 버전이 0.4.0 이고 아직까진 프로덕션에 사용되기는 이를 수도 있지만, Redux, MobX 등 기존의 상태 관리 라이브러리들을 대체할 다양한 장점이 존재하므로 점차 발전할 것으로 기대됩니다. 1. Recoil vs Redux 액션, 리듀서, 미들웨어 등 boilerplate 코드가 많이 발생하는 Redux 와는 대조적으로 Recoil 은 boilerplate-free API 제공한다. React 의 useState 처럼 간단한 게터(get) / 세터(set) 인터페이스로 사용 가능합니다. Re.. 2022. 3. 4. 패스트캠퍼스 챌린지 39일차 (Infinite scroll by Intersection Observer) Intersection Observer Intersection Observer API - Web APIs | MDN Intersection Observer API - Web APIs | MDN The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. developer.mozilla.org Intersection Observer 는 브라우저 뷰포트(Viewport) 와 설정한 엘리먼트 (Element) 의 교차 영역을 관찰하며, 요소가 .. 2022. 3. 3. 이전 1 2 3 4 5 다음 반응형
