React7 Next.js + TypeScript ) 스크롤 내릴 시에 특정 컴포넌트 숨기기 스크롤시 상단 메뉴바 숨기기 작동화면 Code NavBar.tsx import { useScrollDirection } from "./useScrollDirection"; import styled from "styled-components"; const Header = styled.div` position: sticky; height: 3rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; `; const HeaderDown = styled.div` top: -3rem; `; const NavBar = () => { const scrollDirecti.. 2022. 7. 15. Next.js ) Input 입력값 태그로 변환하기 (TypeScript) 태그 등록 Input 만들기 작동화면 Code export default function TagInput() { const [input, setInput] = useState(""); const [tags, setTags] = useState([]); const [isKeyReleased, setIsKeyReleased] = useState(false); // input 입력값 'input' state 에 등록 const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; // 태그 해제하기 const deleteTag = (index: number) => { setTags((prevSt.. 2022. 7. 15. Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까? Next.js (React) + TypeScript : Event Type 지정하기 Input Event Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는 onChange const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; onKeyDown, onKeyUp const onKeyDown = (e: React.KeyboardEvent) => { // ... } const onKeyUp = (e: React.KeyboardEvent) => { // ... } 위와 같이 이벤트의 타입을 지정해주면 됩니다. Sele.. 2022. 7. 14. React ) redux-saga 기반 api 호출 연습 redux-saga 를 활용해 News WebApp 상태관리 하기 기존에 React Hook 방식을 이용해 구현했던 HackerRank News Web App 을 redux-saga 를 이용해 다시 구현해보았습니다. 실행 화면 주요 코드 fetchNews API 를 호출해 newsList 를 불러오는 코드만 올렸습니다. - NewsList.js function NewsList() { const dispatch = useDispatch(); const newsList = useSelector((state) => state.newsList); useEffect(() => { dispatch(allAction.getNewsList()); }, []); - actions/newsActions.js export .. 2022. 5. 11. React ) Recoil 로 Axios 비동기 처리하기 React-News Web App 에 Recoil 적용하기 기존에 react hook 방식과 redux-saga 를 적용해 만든 HackerRank News Web App 을 Recoil 을 이용해 상태를 관리하는 방식으로 다시 제작해봤습니다. HackerRank News OpenAPI 를 활용했습니다. 실행 화면 Code Recoil 초기 설정 먼저 npm i recoil 을 통해 recoil 을 설치합니다. Recoil 은 Redux 와 비교하면 초기설정이랄 것도 없습니다. import { RecoilRoot } from "recoil"; function App() { return ( ... ); } 그냥 RecoillRoot 로 감싸주면 끝입니다. 너무 좋습니다. atom.js import { at.. 2022. 5. 10. React ) HackerNews WebApp 제작을 통한 React 학습 React 로 HackerRank News WebApp 만들기 전체코드 보러가기 1.hook 브랜치에서 확인하실 수 있습니다. 사용기술 react- v18 react-router-dom - v6 실행화면 학습내용 react-router-dom 사용 App.js import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 태그를 사용하기 위해서는 위와 같이 태그로 감싸줘야합니다. path 에는 이동할 url 주소를 명시하고, element 에는 화면에 렌더링될 컴포넌트를 입력합니다. ToolBar.js import { Link } from "react-router-dom"; News Ask Jobs 클릭해서 해당 페이지로 넘어가고 싶.. 2022. 5. 7. React ) Class 형 보다 Hook(함수) 형을 권장하는 이유 React 공식 문서에서는 Class 보다 Hook 을 사용할 것을 권장하고 있습니다. 학습 동기부여를 위해(?) 왜 그런지 살펴보기로 했습니다. Hook 이 해결한 문제들 1. 컴포넌트 사이에서 상태 로직을 재사용하기가 어렵다. React 는 컴포넌트간에 재사용 가능한 로직을 연결하는 방법을 제공하지 않습니다. render props 나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결할 수 있습니다. 하지만 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 합니다. Hook 을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있기 때문에 이를 이용한 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2... 2022. 5. 6. 이전 1 다음 반응형
