Persistence

리렌더: 이미 스크린에 그려진 컴포넌트가 다시 렌더링되는 것 리렌더링은 언제 일어나는가? 컴포넌트의 state이 변했을 때, 해당 컴포넌트가 리렌더링됨 부모가 리렌더링됐을 때, 자식 컴포넌트도 리렌더링됨 (엣지 케이스가 있으나 일반적으로 그러함) Context Provider 값이 바뀌었을 때 그 컨텍스트를 사용하는 모든 컴포넌트가 리렌더링됨. 훅 내부에서 state 변동이 있거나 context 값 변동이 있으면 그 훅을 소비하는 컴포넌트가 리렌더링 됨. function Parent() { const [state, setState] = useState(); // state이 변하면 Parent 컴포넌트 리렌더링됨 // Parent 컴포넌트가 리렌더링되면 Child 컴포넌트도 리렌더링됨 return } 반..

Data fetching Traditioanl Approach vs Suspense 데이터 fetching과 관련해서 3가지 접근방법이 있다. Fetch-on-render 이 방법의 문제점은 'waterfall' 이라고 불린다. 이 코드를 보면, App 컴포넌트가 마운트하고나서 todos를 fetching하기 시작하고, 데이터를 받아오는 도중에는 loading jsx를 리턴한다.즉 여러개의 async 리퀘스트들이 병렬적으로 수행되지 못함으로써 UI 렌더링하는데 시간이 오래 걸리게 된다. 만약 Tasks 컴포넌트가 또 다른 async 요청을 할 예정인데, todos를 fetch하는데 5초가 걸린다면 이 Task 리퀘스트는 5초가 지난 다음에야 시작할 수 있는 것이다. 왜냐면 fetch on ..

react-redux connect를 Custom HOC로 만들기 react-redux의 connect함수는 리덕스 스토어와 리액트 컴포넌트를 연결해준다. 그래서 각 리액트 컴포넌트에서 바로 스토어로 쉽게 접근할 수 있다. 다만 connect함수를 통해서 접근하고 싶은 state나 action creator가 있는 경우 mapStateToProps나 mapDispatchToProps 로 연결해야 한다. 그리고 보통은 각 함수 내에서 연결하고 싶은 state 프로퍼티나 action creator를 특정한다. 그러다보면 connect가 쓰이는 컴포넌트마다 mapStateToProps, mapDispatchToProps 가 반복적으로 쓰이면서 코드가 중복될 수 있다. 일반적으로 connect함수가 쓰이는 모습..

useEffect Hook 사용하기 useEffect 훅은 함수형 컴포넌트에서 쓰이며 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다. 이를 정리하기 위해 간단히 라이프사이클 메서드를 설명하고, useEffect 훅의 효용을 적는다. LifeCycle Method - componentDidMount, componentDidUpdate 생명주기 메서드는 크게 두 종류이다. Will 메서드 : 어떤 작업이 실행되기 직전에 호출 Did 메서드 : 어떤 작업이 실행된 직후에 호출 생명주기 메서드에서는 Mount라는 단어가 등장하는데, 여기서 마운트는 리액트가 컴포넌트를 실제 DOM에 삽입한다는 것이다. (리액트는 가상DOM을 사용하니까) 예를 들어 componentDidMount는 컴포넌트가 실제 DOM..

리액트-리덕스 앱을 만들 때 고려해야 할 사항 폴더 구조를 어떻게 가져갈까(=컴포넌트를 어떻게 쪼갤까) 리액트만 사용한 경우의 케이스 페이스북 데모를 가정했을 때 크게 UI 상에서 Home과 Navigation으로 나눌 수 있다. Home 내부에는 일단 포스트를 등록하는 PostForm이 보여지고 있다. 또한 포스트를 등록하면 등록된 Post가 보인다. Post 내부에 뭐가 있는지 보면 코멘트를 입력할 수 있는 CommentForm과, 코멘트를 등록하면 보이는 Comment, CommentList가 있다. (개인 기호에 따라 Comment와 CommentList로 나눌 수도 있고 그냥 하나로 할 수도 있다.) Navigation 내부에는 페이스북 Logo, 로그인 된 상태에서는 Profile과 ''로그아..

HOC(High Order Component) 예제 HOC란 HOC란 리액트 컴포넌트를 아규먼트로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. 코드의 반복을 줄이고, 컨테이너 컴포넌트(비즈니스 로직 담당)와 presentational 컴포넌트(뷰 담당)를 분리하기 위한 목적으로도 쓰인다. 가짜 코드로 나타내면 이런 식이다. 기존의 컴포넌트를 받아서 향상된 컴포넌트를 리턴한다. const HOC = ReactComponent => EnhancedReactComponent; 기본적인 사용 형식 클래스 컴포넌트를 리턴하는 경우와 함수형 컴포넌트를 리턴하는 경우가 있는데 훅스 사용 때문에 함수형을 주로 사용할 것이기 때문에 함수형을 리턴하는 경우를 보면이런 식이다. 위 경우는 기존의 컴포넌트에 newPr..

유튜브 Data API(v3)를 활용한 비디오 렌더링 video_list.js import React from 'react'; import VideoListItem from './video_list_item'; const VideoList = ({videos, onVideoSelect}) => { const videoItems = videos.map((video) => { return ( ) }) return ( {videoItems} ) } export default VideoList; 비디오 리스트 컴포넌트 구조 함수형 컴포넌트 스테이트가 필요없기 때문에 함수형 컴포넌트이다. 비디오 리시트 컴포넌트의 특이한 점은 VideoListItem으로 각 아이템을 보내기 위한 중간 역할을 한다는 것이다. vid..

유튜브 Data API(v3)를 활용한 비디오 렌더링 search_bar.js import React, {Component} from 'react'; class SearchBar extends Component { constructor(props) { super(props); this.state = { term: '' } } render() { return ( this.onInputChange(event.target.value)} /> ) } onInputChange(term) { this.setState({term}); this.props.onSearchTermChange(term); } } export default SearchBar; 서치바 컴포넌트 구조 클래스 컴포넌트 - 사용자가 search한 ..

유튜브 Data API(v3)를 활용한 비디오 렌더링 index.js import _ from 'lodash'; import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import SearchBar from './components/search_bar'; import VideoList from './components/video_list'; import VideoDetail from './components/video_detail'; import YTsearch from 'youtube-api-search'; /* 보안상 이유로 비공개 */ const API_KEY = ''; class App extends Component..