Tag: React

2019
0
TILReact

React 스터디 07

React Study 07 한글 단어 처리 Router props.location Redux Redux의 사용이유 Redux를 배우는 시기 Redux 주요 개념 3가지 Redux 원칙 Action { type : 타입명, 변수명 : 변수값 } Reducers ACTION을 REDUCER에게 전달해주는 행위 : 디스패치( DISPATCH ) Store

0
DevelopReact

Components and Props

React Official Document주요개념 : Components and Props 함수 컴포넌트와 클래스 컴포넌트 컴포넌트 렌더링 주의: 컴포넌트의 이름은 항상 대문자로 시작 컴포넌트를 이용한 렌더링 예시 컴포넌트 합성(구성) 컴포넌트 추출(분리) props는 읽기 전용 React Official Document주요개념#3. Comp

0
DevelopProject

유튜브 미니 클론 (No Route)

Youtube Mini Clone React목차 Youtube Mini Clone 생성하기 기본 틀 짜기 유튜브 데이터 받아올 준비하기 유튜브 데이터 받아오기 Header 작성 ( 큰 틀 = 로고부분) Header 작성 ( 검색바 ) 입력 값 기본 정해두기 데이터 초기화 값 셋팅 Main 작성 ( VideoList + VideoPlayer ) 무한

0
TILReact

React 스터디 06

React Study 06 환경변수 정의하기 .evn 파일 생성 .gitignore에 .env 추가 번외 : .env 파일을 만들지 않고 npm start 할 때마다 키값 넘겨주기(권장하진 않음) Router 파라미터를 넘기는 방법 2가지 쿼리 스트링 REST API Switch 해결방법 1 : exact 해결방법 2 : 중요도가 높은 라우팅을

0
TILReact

React 스터디 05

React Study 05 this.setState의 2가지 작용 의미있는 업데이트를 연속적으로 불러들일 때 같은 코드가 반복 될 때 Style Component import 변수명 from ~~폴더명 = 해당 폴더 index.js 로드 SearchBar 동영상 선택 판단하기 InfiniteScroll 용어 - ( 러버덕 ) this.se

0
DevelopReact

엘리먼트(요소) 렌더링

React Official Document주요개념 : 엘리먼트(요소) 렌더링 React 엘리먼트(요소)란? DOM에 요소 렌더링하기 렌더링 된 요소 업데이트하기 React는 변경된 부분만 업데이트 한다. React Official Document주요개념#2. 엘리먼트(요소) 렌더링React 엘리먼트(요소)란? 1const element = &l

0
TILReact

React 스터디 04

React Study 04 비동기 처리 fetch 단점 +then 대신 async/await +try - catch 비동기 코드 내 순회 YouTube Mini Clone 인수 기본값 설정하기. Axios , params 별도로 설정하기. debounce 함수 함수 컴포넌트 vs 클래스 컴포넌트 모든 상태를 하위 컴포넌트에게 전달하는법 HOC ( H

0
DevelopReact

JSX 소개

React Official Document주요개념 : JSX 소개 JSX 란? JSX를 표현식에 포함하기 변수 함수 호출 JSX도 표현식 JSX 속성 정의 경고 JSX 하위 요소 정의 JSX XSS 공격 방지 JSX는 객체를 표현한다. React element(요소) React Official Document주요개념#1. JSX 소개

0
TILReact-Preview

JSX

React with Velopert - 02 - JSX JSX 란? JSX를 사용하는 이유 JSX 작성 주의점 null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게 된다. class 가 아니라 className 으로 정의해야한다. <img> 안에 무조건 alt 속성을 작성해야한다. 변수를 값으로

0
TILReact

React 스터디 03

React Study 03 import Component Transfile React에서는 데이터가 항상 불변성을 유지해야한다. ReatDOM.render() Hot Module Replacement (HMR) JSX로 데이터를 받아오기 React key 단방향 데이터 흐름 setState setState에서 콘솔확인하기 Component API