Web/Front-End
-
[React] Custom Hook을 사용하자Web/Front-End 2021. 5. 20. 11:57
Custom Hook은 아주 편한 기능 중 하나이다. 내가 사용하고싶은 컴포넌트나 로직을 미리 정의해두고 매개변수를 통해 자유롭게 어디서든 가져다 쓸 수 있으면서 Hook 내부에는 react문법이나 다른 hook을 포함 시킬 수 있어 함수형 컴포넌트 개발을 하면 빼먹을수가 없는 부분이다. 간단하게 내가 만든 예제를 통해 뭐가 간편한지 작성하도록 하겠다. const usePage = () => { const [totalSize, setTotalSize] = useState(0) const [size, setSize] = useState(10) const [pageNumber, setPageNumber] = useState([]) const [selectedPage, setSelectedPage] = use..
-
[React] Infinity Scroll 구현Web/Front-End 2021. 5. 20. 11:45
무한 스크롤링이라곤 하지만 정확하겐 바닥에 닿으면 데이터를 새로 불러오는 로직이다. 여러 라이브러리가 존재하지만 순수 리액트만으로 작성을 해보았다. 먼저 스크롤이 화면 전체인 컴포넌트에서의 스크롤 구현이다. 해당 기능은 현재 진행중인 프로젝트내에서 여러곳에서 써야하므로 훅으로 구현을 하였다. const useScroll = (totalPage, limit) => { const [page, setPage] = useState(1) const ScrollPaging = useMemo( () => throttle(() => { let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) let scro..
-
[React] 조건에 따른 컴포넌트 교체Web/Front-End 2021. 3. 19. 18:24
1. 삼항 연산자 return ( {a ? AComponent : BComponent} ) true or false 검사 return ( {a === 0 ? AComponent : a=== 1 ? BComponent : CComponent } ) 중첩 삼항연산자 개인적으로는 조건이 여러개가 붙으면 삼항연산자보단 return ( {0 : AComponent 1 : BComponent 2 : CComponent}[a]} ) 이렇게 쓰는걸 선호한다
-
[React] 정해진 횟수 연속 클릭 구현Web/Front-End 2021. 3. 11. 17:57
요구사항에 특정영역을 5회터치(or 클릭) 시 특정 페이지로 이동하는 기능이 있었다. 더블클릭같은 경우는 봤어도 5회 클릭은 구현해본적이 없어 조금 애를 먹다 구현을 하였는데 해당 내용을 포스팅 해보도록 하겠다. Logic.ClickCountCheck(history)} /> 컴포넌트에는 이렇게 작성을 하고 let clickCount = 0 export function ClickCountCheck (history) { clickCount = clickCount + 1 setTimeout(() => { clickCount = 0 }, 3000) if (clickCount === 5) { history.push('/A') } } 로직 함수내부에 이렇게 작성 하였다. useHistory로 만든 history라는..
-
[React] 같은 계층의 중첩 라우터끼리 페이지 이동Web/Front-End 2021. 3. 11. 17:47
App.jsx 에 Arouter와 Brouter를 정의한 후 Arouter에 A_AComponent와 A_BComponent 를 정의한다. Brouter에는 B_AComponent와 B_BComponent를 정의해준다. 이렇게하면 A_A => A_B 또는 B_A => B_B 로 useHistory나 Link태그를 통해 자유로운 이동이 가능해지는데 만약 A_A => B_A 로 이동은 가능할까? 기본적으로 url path는 변하지만 사용자가 직접 새로고침을 하지 않으면 렌더링이 되지않는 문제가 있다. 이유는 중첩 라우팅의 구조로 인해 A/A_A 에서 URL을 던지면 A/ 에서 찾게되는데 A/에는 B_로 시작하는 라우트가 없기때문에 렌더링이 되지 않는다. 그럼 어떤 방법이 있을까? 나는 페이지 이동을 성공 시..
-
[React ]추천 검색어 구현Web/Front-End 2021. 3. 11. 17:33
위와 같은 추천 검색어 기능을 라이브러리 없이 리액트만으로 구현을 해보고 싶었다. 항상 무슨 코드를 짤때 배우는 입장이라 라이브러리를 최대한 배제하고 순수코드만으로 짜고싶어 리액트로 짜보기로했다. 검색어들은 json파일로 더미데이터를 생성해놨고, 해당 리스트들을 axios 호출을 통해 불러온다. axios.all([DeviceData.getLastDeviceList(), DeviceData.getLiveDeviceList()]) .then(axios.spread((lastRes, liveRes) => { for (let i = 0; i < lastRes.data.device.length; i++) { if (lastRes.data.device[i].name.includes(searchValue)) { s..
-
[ES6 ]Axios 모듈화Web/Front-End 2021. 3. 11. 17:19
리액트 관련 문서로 정의하려했는데, 생각해보니 리액트 문법이 단하나도 들어가지않아 ES6를 말머리에 달았다. import axios from 'axios' const instance = axios.create({ baseURL: process.env.PUBLIC_URL, timeout: 1000 }) 해당 방식으로 파일을 새로 만들어준다. 나는 CommonAxios.jsx 로 작성하였다. 공통적으로 요청전이나 요청 에러 처리를 해야 할게 있다면 instance.interceptors.request.use( function (config) { // 요청 바로 직전 // axios 설정값에 대해 작성합니다. return config }, function (error) { // 요청 에러 처리를 작성합니다. ..
-
[React] Modal 모듈화및 PortalWeb/Front-End 2021. 3. 11. 16:40
사이트를 개발 하다보니 팝업및 모달창을 뜨게 해야할 일이 꽤 여러곳에 있었다. 해당 모달들은 유니크한 폼을 가진 것도 있지만 대부분 버튼 하나 두개로 이루어진 베이직한 모달들이였는데 이런 모달들을 사용할때 매번 새로운 모달을 생성하기보단 특정 값들만 넘겨주어 기본 폼에서 벗어나지않게 공통 모듈로 빼보려고 했다. 공통 모듈로 빼보려고 하니 모달 자체는 언제 어디서나 떠야 하는 성질을 가지고있기에 Portal도 사용하도록 했다. 먼저 public/index.html에 모달이 뜰 영역을 정의해준다. 나는 해당 모달 영역을 이용할 ModalPortal.js 파일을 생성하였다. const ModalPortal = ({ children }) => { const el = document.getElementById('..