Frameworks/React.js

react-hook-form이란? React에서 폼, 양식을 만들때 사용하는 라이브러리 복잡한 폼을 만들때, 간결하고 쉬운 코드작성에 도움이된다! Home React hook for form validation without the hassle react-hook-form.com React Hooks 이란? [React] React Hooks란? / 사용법 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트 defineall.tistory.com 여러가지 React Form 라이브러리 1. formik 태그에서 모든 조건과..

Local State란? LocalStorage에, state값을 저장해서 사용하는 것! Local State의 필요성 처음 사이트에 접속했을때, LocalStorage에 저장된 값을 이용해 state값을 지정해 줄 수 있다 Reactive Variables 란? 아폴로를 이용해, 변수를 전역으로 관리 하도록 해준다. ( 어디서든 변수를 꺼내올 수 있도록 함 ) Apollo Client로, reactive variables 만들기 // Apollo.js import { makeVar } from "@apollo/client" export const isLoggedInVar = makeVar(false); 컴포넌트에서 reactive variables 사용하기 // App.js import Home fro..

👉 React Hooks란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리 React Hook 개발 과정 1. 클래스 컴포넌트 사용 -- 2019년 2월 데이터 캐시 개발 -- 2. 함수 컴포넌트와, 리액트 훅 사용 ( 리액트 훅은, 함수 컴포넌트에서만 사용가능하다 ) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다. React Hook의 필요성 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? ) 서로의 장점을 전부다 가지..

Fontawesome-icon 이란? React에서 여러 아이콘을 쉽게 사용할 수 있게 도와주는 것 안정적이다. 벡터 아이콘이다. Fontawesome-icon 설치 npm으로 설치 // 기본 설치 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons // React에서 사용시 설치 npm install --save @fortawesome/react-fontawesome // React Native에서 사용시 설치 npm install --save @fortawesome/react-native-fontawesome // 선택 설치 npm install --save @fortawes..

React Helmet이란? React에서 웹사이트 타이틀(탭 이름)을 동적으로 변경할 수 있게 해준다. React Helmet 설치 npm i react-helmet-async React Helmet 사용 // App.js import { HelmetProvider, Helmet } from 'react-helmet-async'; function App() { return ( My website ); } export default App; 결과

라우터의 왕 React Router란? React에서 Router 기능을 편리하게 사용할 수 있게 해주는 Node.js 패키지 Router란? URI와 화면을 연결해주는 기능을 하는 프로그램 다시, React Router란? React에서 각각의 URI에 따라, 다른 화면을 보여주도록 연결해주는 것 React Router 설치하기 npm i react-router-dom * 본 게시글은 react-router-dom 버전 5를 다루고 있습니다. 버전 6은 아래의 게시글을 확인해주세요.

브라우저 - 렌더트리를 보여준다. 렌더트리 - DOM + CSSOM ( 스타일 적용 ) 스타일 적용후, 화면에 보이지 않는 부분은 렌더트리에서 제외된다. - display : none 스타일이 적용된 element는, 렌더트리에 포함되지 못한다. - visibility : hidden 스타일이 적용된 element는, 렌더트리에 포함되어 실제화면에서 공간을 차지한다. DOM이란? Document Object Model, 문서 객체 모델 HTML의 여러 구성요소(노드)에서 유효한 것만 선택해, 트리 형식으로 구성한 표 DOM안의 모든 것들은 객체 ( 클래스로 만들어진 것, Node 라고 부름 ) ex) , , "Text" ... 렌더링이란? [웹] 렌더링(Rendering)이란? 렌더링이란? 서버에서 HT..

문제 발생 이유 2020년 9월 22일, React의 JSX 문법이 업데이트 되면서 ESLint가 이에 대한 업데이트를 아직 진행하지 않았다. React 17 버전에 대한 공식 문서 내용 Babel과 협력하여, 새롭게 재 작성된 JSX 변형 버전을 제공한다. React를 가져오지 않고도 JSX를 사용할 수 있다. ( import React from 'react'; 안해도 됨 ) 번들 크기가 약간 늘어났다 기존의 JSX문법은 계속지원한다. ------------------------------------------------------------------------------------ // 기존의 방식 JSX를 사용할때, 컴파일러가 이를 브라우저가 이해할수 있는 React 함수 호출로 변환한다. 이전 ..

👉 styled-components란? 스타일이 지정된 html 요소(element)들을 React 컴포넌트 형식으로 사용할 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다 defineall.tistory.com styled-components 장점 html 태그를 손쉽게 변경할 수 있다. ( styled-components로 지정된 부분만 변경하면됨 ) styled-components 설치..