728x90 반응형 SMALL 리액트3 [React] 특정 컴포넌트로 스크롤 이동하기 react-srcoll npm install react-scroll or yarn add react-scroll 코드 https://codesandbox.io/s/eager-wave-eb5xbh?file=/src/Contents.js eager-wave-eb5xbh - CodeSandbox eager-wave-eb5xbh by huey2269 using react, react-dom, react-scripts, react-scroll, styled-components codesandbox.io 네이게이션 바에서 해당 컨텐츠의 제목을 클릭하면 그 위치로 스크롤이 이동하는 기능입니다. 2022. 8. 20. [React] Context API Context 일반적으로 데이터를 여러 컴포넌트들에 전해줘야 하는 props의 경우 사용이 번거로울 수 있습니다. 리액트의 Context API를 사용하면 프로젝트 내에 전역적으로 사용할 수 있는 값을 관리할 수 있습니다. 다시 말해, Context를 사용하면 일일이 props를 넘겨주지 않아도 컴포넌트 전체에 데이터를 제공할 수 있습니다. 데이터 다루기 HumanContext.js import React from 'react'; const HumanContext = React.createContext(); export default HumanContext; index.js import React from "react"; import ReactDOM from "react-dom"; import "./in.. 2022. 7. 26. [React] 라이프사이클(Lifecycle) 컴포넌트 라이프사이클(Component LIfecycle) 리액트 컴포넌트는 그려지는 순간부터 사라지기까지 여러 지점에서 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해 줍니다. 마운트(mount) constructor : 생성자 메서드로 컴포넌트 생성 시 가장 먼저 실행됩니다. getDerivedStateFroProps : 새 props를 받았을 때 호출되며 받아온 것을 state에 넣고 싶을 때 사용합니다. render : 컴포넌트를 렌더링 합니다. componentDidMount : 컴포넌트의 첫 렌더링이 끝나면 호출됩니다. 업데이트(update) getDerivedStateFromProps : props나 state가 변경되어도 호출됩니다. shouldComponentUpdate : 컴포넌트.. 2022. 7. 25. 이전 1 다음 728x90 반응형
