Category: React

2019
0
TILReact

React 스터디 11

React Study 11 React Hook 무한 루프 : setCount를 바로 하지 않는 이유 Hook 상태 업데이트 해보기 Hook 상태 업데이트 : 기본 Hook 상태 업데이트 : 리듀서 React 최적화 (useMemo, useCallback) useMemo , React.memo useCallback useMemo vs useCallba

0
TILReact

React 스터디 10

React Study 10 객체의 접근 방법 YouTube 프로젝트 변경점 좋아요, 싫어요 기능 추가 댓글 추가 / 삭제 기능 추가 Stale closure problem 결과를 변경하기 위한 해결점 1 : 함수를 만들고 함수로 호출 결과를 변경하기 위한 해결점 2 : 즉시실행함수를 사용한다. React Hook useState useEffect

0
TILReact

React 스터디 09

React Study 09 여러 데이터를 담을 변수의 타입 결정 : 객체 선언 vs 배열 선언 defaultValue와 Value YouTube 프로젝트 변경점 <SearchBar> 태그 URL로 쿼리를 변경하는 방식으로 바꾸기. ComponentDidUpdate 설정 getYoutubeData 함수 → 클래스필드 변수로 변경 getYo

0
TILReact

React 스터디 08

React Study 08 React에서 input 태그 value 와 defaultvalue 차이 Redux 리덕스 사용 이유 카운터 실습 폴더 구조 Actions 설정 src/actions/index.js reducers 설정 카운터 리듀서 설정하기 src/reducers/counter.js reducers 합치기 src/reducers/in

0
TILReact

React 스터디 07

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

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
TILReact

React 스터디 04

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

0
TILReact

React 스터디 03

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

0
TILReact

React 스터디 02

React Study 02 JSX 란? JSX를 사용하는 이유 JSX 내부 작성 주의점 Virtual DOM Virtual DOM(가상 돔)의 사용이유 Virtual DOM(가상 돔)의 장점 & 단점 VirtualDOM이 받는 파라미터 세가지 (type, props, …child) ReactDOM.render() 함수 React 상태 업