React
-
[React 라이브러리] 라이브러리 기초Programming/JavaScript & TypeScript 2022. 5. 9. 13:58
1. 라이브러리란? 라이브러리 = 개발편의를 위한 도구 모음, 공구 framework = 기반 구조까지 잡혀 있는것, 공장 React도 도구모음 이미 잘 만들어둔 도구를 가져다가 쓰면서 React 생태계의 이점을 누리자 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 벅참) 더 나은 도구가 필요해짐 검색 필요 그대로를 검색 github, npm trends, 커뮤니티, 기술 블로그 유사한 라이브러리를 검색 사용법 파악 공식문서 github code 검색 기술 블로그 검색 적용 POC(proof of concept) 부분을 적용해보고, 전체를 고민하자 2. moment react보다 사이즈가 큰 라이브러리....왠만하면 사용하지 말자...(Luxon, dayjs등을 사..
-
Error 처리Programming/JavaScript & TypeScript 2022. 5. 3. 21:29
JS와 React를 개발하다보면 UI에서 Error가 난 경우에는 아무것도 보여지지 않는다. Error가 발생하기 전까지는 그려져야할것 같은데, JS나 React에서는 그렇지 않다. (왜인지는 모르겠다.) 이번에 다룰 내용은 UI에서 Error가 났을 때, 해당 컴포넌트만 Error를 처리하는 방법이다. 여기서 참고했다.. https://ko.reactjs.org/docs/concurrent-mode-suspense.html#handling-errors 기본 코드 App과 Child Component가 있고, Child에서 Error를 발생시켜보자 더보기 기본 Error 발생 시키기 console에 Error가 나오며, 브라우저에는 아무것도 나오지 않는다. 더보기 Child안에서 'throw new Er..
-
리액트를 다루는 기술Programming/JavaScript & TypeScript 2021. 12. 16. 12:21
리액트를 다루는 기술(개정판)에서 실제 소스코드와 차이가 있는 부분 정리 13장 리액트 라우터로 SPA 개발하기 부터 사용되는 Route는 최신 react-router-dom에서는 적용되지 않습니다. react-router-dom에 대한 방법이 V6부터 변경되었기때문입니다. 책을 따라하려면 react-route-dom을 v5.3.0으로 설치하면 됩니다. 터미널에서 아래와 같이 입력하면 됩니다. yarn add react-router-dom@^5.3.0 react-router-dom V6에 대한 정리는 아래 블로그를 참고하세요. https://velog.io/@soryeongk/ReactRouterDomV6
-
클래스 컴포넌트 vs 함수형 컴포넌트Programming/JavaScript & TypeScript 2021. 9. 25. 21:22
react에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 함수형 컴포넌트는 클래스형 컴포넌트와 동일하다. 클래스형 컴포넌트는 state기능및 라이프사이클 기능이 있고, 임의 메서드를 정의할 수 있다는게 장점 함수형의 장점은 선언하기 편하고, 메모리 자원도 적게 사용, 빌드 결과물의 크기도 작다. 단점은 state와 라이프 사이클 api 사용불가인데, 이게 React v16.8 이후에는 Hook으로 어느정도 커버 가능하다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react' return {name} } } 함수형 컴포넌트 import React from 'r..