webpack을 통해서 비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 한다. 즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다. 물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올때 보다 훨씬 편해지겠지만 하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다. React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여준다. http://ko.reactjs.org/docs/code-splitting.html 코드 분할 ..

connect 함수 대신 hooks 사용 상태 조회는 useSelector, 액션 생성은 useDispatch useSelector() // 반환값 = useSelector(함수, === 비교 함수) const result: any = useSelector(selector: Function, equalityFn?: Function) // 적용 const counter = useSelector(state => state.counter) // state.counter를 반환 const todo = useSelector(state => state.todos[props.id]) // state.todos중 특정 id를 같는요소 반환 useDispatch() const dispatch = useDispatch()..

https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs for free. In case your requirements go beyond our freemium account conditions, you may check the entire list of our subscription plans. You can read the How to Start guide and enjoy using our po openweathermap.org 위 주소로 이동 후 회원가입을 진행하시면 개인 api키가 발급됩니다. OpenWeatherMap api는 완전 ..

useCallback은 useMemo를 기반으로 만들어져서 비슷한 점을 가진 hooks다. useMemo는 특정 결과값을 재사용할 때 사용하고 useCallback은 특정 함수를 재사용할 때 사용한다. useCallback을 사용할 때 함수 안에서 사용하는 state, props가 있다면, 반드시 deps 배열 안에 포함시켜야 한다. 그리고 컴포넌트에서 props로 함수를 받아왔다면 그 함수도 deps에 포함시켜야 한다. 함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야 한다. 그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다. useCallback은 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다..

클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 클래스형 컴포넌트와 함수형 컴포넌트 차이 1) 선언방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { return } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { return } } export default App; 클래스 컴포..

1. Map() 함수 기본 사용법 map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다. 2. Map 함수의 형태 arr.map(callback, [thisArg]) import React from 'react'; const App = () => { const arr = [1, 3, 5, 7, 9]; const result = arr.map((v, i) => { console.log(i); }); return ( ) } export default App import React from 'react'; const App = () => { const names = ['test1', 'test2', 'test3', 'test4'..