React
-
RecoilReact 2021. 4. 28. 01:11
Facebook에서 만든 새로운 '상태 관리를 위한 라이브러리'이다. 이미 Redux 팀에서는 Redux-toolkit이라는 것도 만들었지만 redux-toolkit의 존재를 알고 난 상태에서 recoil의 존재를 알았다. 흠... 페이스북에서는 이미 상태 관리 라이브러리를 만들었는데 또? 라는 생각이 들었지만 contextAPI의 단점이 드러나면서 만들지 않았나 라는 의견을 본 적이 있어서 아무래도 context API 때문에 만들지 않았나 싶다. codesandbox에서 적용해본 결과 나름 쓸만했다 redux-toolkit처럼 폴더 구조도 새로운 개념에 맞게 잡는 것이 좋을지... 컴포넌트 위에서 사용하는게 맞을지... 라이브러리를 넘어서 리액트팀에서는 폴더 구조에 대한 지침을 따로 권장하고 있지 않..
-
React의 성능을 올려보자!React 2021. 1. 18. 23:16
@ 이 글은 TypeScript (4.2+), React(17.0.1+), styled-components (5.1+) 로 구성된 간단 예제입니다. 리액트의 성능을 올려보는 방법들은 생각보다 꽤나 많았다. 단순히 리액트 DOM의 성능부터 gpu관련까지 있었다. 오늘은 성능 향상하는 방법을 기록해두려 한다. 예제는 막 거창한건 아니고 단순하게 즉석에서 생각해봤다. 0. 사전 지식과 사전 준비 1) 확장 프로그램 설치 먼저 크롬 웹스토어에서 React Deveolper Tools를 설치한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-ico..
-
React HooksReact 2021. 1. 2. 00:11
@ React 17.0.1을 기준으로 작성합니다 React를 처음 공부했을 때에는 뭐가 뭔지 며칠동안 계속 궁금증에 시달렸었는데 이제부터 배우는 사람들은 그렇지 않기를 바라면서 보는 사람이 이해하기 최대한 쉽게 작성해보고자 한다 16.8버전부터 추가된 hook은 정말 편리하게 사용가능하다. 더불어 lifecycle 메서드도 useEffect로 통합되는 등 관리하기 편해졌다. 0) hook의 명명 규칙 hook은 use라는 접두사가 붙으며 camelCase로 이름을 짓는다. 그래서 다른 라이브러리의 hook들은 대부분 use~~~로 시작한다 React에는 어떤 hook이 있는지 알아보자 1) useState 상태를 바꾸는 hook 사용법 import React, { useState } from 'react..
-
React 알아보기React 2021. 1. 1. 18:25
React 공식 홈페이지: ko.reactjs.org/ 쉽게 말해 프론트 엔드 개발에서 JavaScript를 이용하여 화면을 구성할 수 있는 '라이브러리'입니다. 이와 비슷한 프레임워크로는 Vue, Angular등이 있죠 리액트는 Facebook에서 만들었고 2013년에 발표가 되었습니다. 그동안 수많은 버전 업데이트를 통해 벌써 17.0.1버전이 나왔습니다. 리액트로는 크게 3가지 작업이 가능합니다. 1. 작은 단위의 컴포넌트들을 구성하고 재사용한다. 2. 상태에 따라 화면을 변경 3. 모바일 앱 개발 1] 컴포넌트 재사용 홈페이지 화면에도 나와있듯이 리액트는 컴포넌트 기반입니다. 예를 들어 아래와 같은 빨강색 버튼이 있다고 합시다. 버튼 html은 이를 여러 줄로 계속 작성해야(혹은 여러줄 복사 붙여..