Web
-
[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('..
-
[React] react-activation 과 주기적 Api 호출Web/Front-End 2021. 3. 11. 16:14
컴포넌트가 변해도 데이터를 유지해야 할 상황이 생겼다. vue에서는 내부적으로 KeepAlive가 존재했는데 react는 존재하지않아 react-activation 이라는 라이브러리를 받아 사용하기로 하였다. import KeepAlive from 'react-activation' const DeviceListComponent = (props) => { if (state === 'live') { return } else if (state === 'last') { return } } 위와같이 사용하여 AComponent와 BComponent 안에 데이터들은 유지시킬수 있게되었다. KeepAlive를 사용하게 되면 해당 클래스들로 내부 컴포넌트가 감싸지게 되는데, 빈 영역이라 하지만 퍼블리싱 받은 파일에서 ..
-
[React] Custom Hook 으로 전역 State 관리Web/Front-End 2021. 3. 11. 15:29
뭔가의 리스트에서 클릭 한 아이템의 정보를 다른 컴포넌트에 뿌려주고 싶었다. 기존의 방식은 단순하지만 아주 무식하게 짰었는데 (뿌려줄 컴포넌트) (컴포넌트)props.setState-> (컴포넌트)props.setState-> (컴포넌트)props.setState(item 선택 컴포넌트) 이와 같이 아주 무식하게 props로 하나하나 넘겨줬다. React를 쓰다보면 여러 컴포넌트에서 한 데이터를 공유하고싶은 상황이 아주 많이 존재하는데 문득 저렇게 구현을 하고 오늘 코드를 혼자 리뷰해보니 리액트답게 짠 코드지만 너무 마음에 들지 않았다. 그렇다고 useContext를 사용하기는 싫었고, 훅을 새로 만들어 setter함수를 구현해 store 기능을 하는 훅을 만들어 보기로 했다. import { useSt..