728x90 반응형 SMALL 프론트개발/React8 [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. [Next.js] next.js 알아보기 Next.js란? https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Vercel에서 만든 React의 SSR(서버 사이드 렌더링) 프레임 워크입니다. 개발자가 서버사이드 렌더링에 대한 고려를 직접 하지 않아도 된다는 장점을 가지고 있습니다. 그리고 정적 사이트를 만들 수 있습니다. 특별한 설정 없이 쉽게 사용할 수 있기에 많은 개발자들이 선호하는 프.. 2022. 7. 30. [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] Additional Hooks useReducer 복잡한 정적 로직을 만드는 경우 사용. 다음 state기 이전 state에 의존적인 경우에 사용. Redux를 알면 쉽게 사용할 수 있음. import { useReducer } from 'react'; const reducer = (state, action) => { if (action.type === 'PLUS') { return { count: state.count + 1 }; } return state; } function ExReducer() { const [state, dispatch] = useReducer(reducer, {count: 0}); // 첫번째 인자로 함수가 들어감. return ( {state.count} ClickButton! ); function cli.. 2022. 7. 25. 이전 1 2 다음 728x90 반응형
