Category: Develop

2020
0
DevelopReact

SPA 와 react-router [1]

React Router with Velopert - 01 - SPA SPA 란? non-SPA SPA 장점 SPA 단점 주로 사용되는 리액트 라우터 라이브러리 리액트 라우터 react-router next 리액트 라우터 react-router BrowserRouter HashRouter MemoryRouter StaticRouter Route L

0
DevelopGraphQL

GraphQL Schema, Type

Graph QL - SCHEMAS & TYPES - SCHEMAS & TYPES 타입 시스템 Type system 타입 언어 Type Language 객체 타입과 필드 인자 Arguments 쿼리 타입 & 뮤테이션 타입 The Query and Mutation Types 스칼라 타입 Scalar Types 열거형 타입 Enumera

0
DevelopGraphQL

GraphQL Query, Mutation

Graph QL - QUERY , MUTATION - QUERY , MUTATION 필드 Fields 인자 Arguments 별칭 Aliases 프래그먼트 Fragments 프래그먼트 내에서 변수 사용하기 Using variables inside fragments 작업 이름 Operation name 변수 Variables 변수 정의 Variabl

0
DevelopProject

React Grid Mini Project

React Grid Mini Project개요 커스텀 훅, useReducer, useCallback에 대한 학습을 위한 프로젝트를 구현해본다. 해당 프로젝트는 각각의 요소를 상태로서 관리를 하고 이전의 상태 , 현재의 상태, 미래의 상태를 각각 관리를 하는 방식으로 진행한다. 목차 화면 UI 보여주기 useState를 이용하여 set이벤트 구

0
DevelopReact

React로 사고하기

React Official Document주요개념 : React로 사고하기 목업으로 시작하기 1단계 : UI를 컴포넌트 계층 구조로 분할하기 2단계 : React로 정적인 버전 만들기 3단계 : UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기 4단계: State가 어디에 있어야 할 지 찾기 5단계: 역방향 데이터 흐름 추가하기

0
DevelopReact

합성(Composition) vs 상속(Inheritance)

React Official Document주요개념 : 합성(Composition) vs 상속(Inheritance) 컴포넌트에서 다른 컴포넌트를 담기 특수화 React에서 상속은? React Official Document주요개념#10. 합성(Composition) vs 상속(Inheritance) React는 상속 대신 합성을 사용하여 컴포넌트

2019
0
DevelopReact

State 끌어올리기

React Official Document주요개념 : State 끌어올리기 온도계산기 기본 컴포넌트 생성 두번째 Input 추가 하기 변환 함수 작성 State 끌어올리기 Calculator 변경사항 요약 Calculator 컴포넌트 수정하기 정리 교훈 React Official Document주요개념#9. State 끌어올리기온도 계산기기본

0
DevelopReact

폼

React Official Document주요개념 : 폼 HTML 에서의 Form React에서의 Form 제어 컴포넌트(Controlled Components) textarea 태그 select 태그 file input 태그 다중 입력 제어하기 제어되는 Input Null 값 React Official Document주요개념#8. 폼HTML

0
DevelopReact

리스트와 Key

React Official Document주요개념 : 리스트와 Key 자바스크립트에서 리스트 변환 리액트에서 여러개의 컴포넌트 렌더링 하기 기본 리스트 컴포넌트 Key Key로 컴포넌트 추출하기 Key는 주변 배열의 context에서만 의미를 지니고 있다. Key는 형제 사이에서만 고유한 값을 지녀야 한다. React에서 Key는 컴포넌트로 전달되지는

0
DevelopReact

조건부 렌더링

React Official Document주요개념 : 조건부 렌더링 조건 연산자 이용 엘리먼트(요소)를 변수에 저장하기 인라인으로 IF를 표현하기 논리 && 연산자로 if를 인라인으로 표현하기 삼항 연산자로 If-Else구문 인라인으로 표현하기 컴포넌트 렌더링 막기 setState 일괄처리 setState 일괄처리 해결 Re