basic/React.js (42) 썸네일형 리스트형 [React.js] Life Cycle 생명주기 함수 ② 리액트의 생명주기 = 컴포넌트의 생성, 변경 소멸의 과정을 뜻함 shouldComponentUpdate는 props나 state의 변경을 하는 함수이다. 기본 동작은 매 state 변화마다 다시 렌더링을 수행하는 것이다. return값이 true일 경우에만 렌더링한다. 따라서 this.props와 nextProps, 그리고 this.state와 nextState를 비교한 뒤 false나 true를 반환하는 것으로 컴포넌트의 접근을 제한하여 성능을 향상시킬 수 있다. 자세한 내용은 공식문서에서 확인할것! https://ko.reactjs.org/docs/react-component.html#static-getderivedstatefromprops [React.js] Life Cycle 생명주기 함수 ① 리액트의 생명주기 = 컴포넌트의 생성, 변경 소멸의 과정을 뜻함 render(). constructor(), getDerivedStateFromProps(), componentDidMount() 함수는 componenet의 생성 과정에 속한다. getDefaultProp(), getInitialState() 는 constructor로 대체 되었다. constructor는 생명주기 함수중 가장 먼저 실행되며, 처음 한 번만 실행된다. constructor에서 component 내부에서 사용되는 변수(state)의 선언과 초기화를 하고, 부모 객체에서 전달받은 변수(props)는 super에 던지면 된다. (super는 부모 클래스를 가리키는데 리액트에서는 React.Component를 가리킨다. 또한 su.. [ERROR] Unhandled Rejection (TypeError): Cannot read property 'push' of undefined withRouter의 history.push 사용할 때 import나 export에서 오타가 있다면 발생되는 에러 import { withRouter } from 'react-router-dom'; export default withRouter(Sample) [ERROR] Redux ... Reducer "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value f.. undefined로 할당하지말라고 나오는 문구로 할당을 안해주면 일어나는 실수!!! null이라도 넣어주면 해결 끝 [React.js] Ant Desgin 사용하기 npm i antd --s import 'antd/dist/antd.css'; https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 버전 업이 되면서 icon은 더이상 antd패키지에 포함되어 있지 않다 따로 사용하려면 npm install --save @ant-design/icons import Icon from '@ant-design/icons'; [React.js] 컴포넌트 DOM 이벤트 리액트에서 이벤트는 자바스크립트의 이벤트를 카멜표기법처럼 바꾸면 되는듯 click 엘리먼트의 마우스나 키보드가 클릭될 때 onClick submit 폼의 데이터가 전송될 때 onSubmit mousemove 엘리먼트 위에서 마우스 커서가 움직일 때 onMouseMove mouseover 엘리먼트 영역 위로 마우스 커서가 돌아다닐 때 onMouseOver mouseout 엘리먼트 위에 있던 마우스 커서가 영역을 떠나갈 때 onMouseOut keydown 키보드 버튼이 눌렸을 때 onKeyDown keypress 키보드 버튼 입력이 완료되었을 때 onKeyPress [React.js] 컴포넌트의 구성 요소 프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 props => Comp컴포넌트에서 this.props.name state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터 컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 [React.js] Redux 기본설정 redux react-redux redux-promise redux-thunk : 비동기 작업을 위해 필수, 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다. index.js설정 import { Provider } from 'react-redux'; import { applyMiddleware, createStore } from 'redux'; import promiseMiddleware from 'redux-promise'; import ReduxThunk from 'redux-thunk'; import rootReducer from './_reducers' //middleware를 넣어준다 const createStoreWithMiddleware = applyMiddleware(promis.. 이전 1 2 3 4 5 6 다음
