728x90 반응형 SMALL 프론트개발22 [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. [Redux] 리덕스 Redux란? 리액트 생태계에서 가장 사용률이 높은 상태 관리 라이브러리입니다. 리덕스를 이용하면 컴포넌트의 상태 관련 로직을 다른 파일로 분리시켜서 효율적인 관리에 도움을 줍니다. Context API와 useReducer를 사용하여 개발하는 것과 방식이 비슷합니다. Context API가 개선되기 전에 글로벌 상태 관리를 위해 많이 사용되어 왔었습니다. 리덕스를 사용하면 좋을 때 프로젝트의 규모가 클 때 비동기 작업을 자주 할 때 리덕스가 편할 때 Redux Action 상태에 변화가 필요하게 될 때, 액션을 발생시기게 됩니다. 액션 생성자를 통해 액션을 만듭니다. 액션 객체를 리덕스 스토어로 보냅니다. 리덕스 스토어가 액션 객체를 받으면 스토어 상태값이 변경됩니다. 변경된 상태값에 의해 상태를 이용.. 2022. 7. 27. [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. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
