리액트3 210623 React Context React Context React Context Context 란? Context.Provider Class.contextType Context.Consumer Context.displayName Context 란? Context 는 컴포넌트 트리의 매 계층마다 props 전달 없이 데이터를 제공하는 방식입니다. (global context) Context 는 특정한 데이터가 다수의 컴포넌트에서 사용될때/필요할 때 사용합니다. 많은 컴포넌트에서 사용하므로, 사용시 주의가 필요합니다. Context API // create context object const context = React.createContext(defaultValue) Context.Provider 이 context 오브젝트는 트리에서.. 2021. 7. 4. 210622 React Hooks React Hooks React Hooks Hook 이란? Basic Hooks useState useEffect Rules of Hooks Building Your Own Hooks useContext Context Additional Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue Hook 이란? React 에서 Hook 은, function 컴포넌트 내부에서 React 의 state 와 lifecycle 특징을 연결시켜주는 (hook) function 입니다. 리액트는 내장 Hooks 들을 제공하며, 개발자가 직접 작성한, 재사용 가능한 Hook 을 사용할 수도 있습니다. Basi.. 2021. 7. 4. React - React lifecycle methods 정리 Lifecycle methods 1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) 2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) 3. render 4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) 5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) 6. shouldComponentUpdate(nextProps, nex.. 2020. 5. 16. 이전 1 다음
