JavaScript/ReactJS
[ReactJS] react-router-dom V6 바뀐 라우팅
v6 로 넘어오며 많은것이 바뀌게 되었습니다. 우선, 간단한 내용부터 천천히 넘어가보도록 하겠습니다. 라우팅의 변화 기본적인 변화 V5 에서는 아래와 같은 코드로도 작동이 되었습니다. import {BrowserRouter as Router, Switch , Route } from 'react-router-dom'; import Home from './pages/Home' const App = () => { return( ) } export default App; 하지만, V6로 넘어오며 Switch -> Routes component -> element 이렇게 변경이 되었습니다. 이렇게 변화가 되면서 element 에는 {Home} 이 아닌 태그로 작성을 해야 정상적인 작동을 하게 됩니다. import..
[ReactJS] 내가 생각하는 효율적인 라우터 관리 방법
React 프로젝트를 진행할 때 제가 자주 사용하는 방법 중 하나 입니다. react-router-dom 이 v6 로 넘어오며 이 방법을 사용하고 있지는 않지만, ReactNative 할 때 react-navigator 를 사용할 때 이용하는 방법 입니다. 우선, 결론 //App.tsx { rootRouter.map((item, key) => return ) } //RootRouter.ts import { ComponentType } from 'react'; interface RouterInterface { name : string; component : ComponentType; } export RootRouter:RouterInterface[] = [ { name='Home', component = ..
[ReactNative] 카카오 로그인 구현하기 -1
ReactNatvie 에서 카카오 로그인을 구현하려 하는데 여러 선택지가 있었습니다. 1. react-native-seoul/kakao-login 2. actbase/react-native-kakao-login 이렇게 2개가 있었지만, 1번은 진행 중 많은 오류가 있어 포기를 하게 되었고, 2번은 지원이 중단되었다길래 새로운 방법을 차게 되었습니다. 라이브러리 선정 actbase 에서 기존의 react-native-kakao-login 은 아래 보이는 이미지처럼 npm 에서 This package has been deprecated 라고 뜨며 @actbase/react-kakaosdk 로 변경이 되었다고 합니다. 그래서 @actbase/react-kakaosdk 를 사용하기로 하였습니다. GitHub -..
[ReactJS] 상태관리 라이브러리 Redux / store 와 connect()()
2021.05.25 - [내가 공부하는것/JavaScript] - [ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법 [ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법 React 를 다뤄보신 사람들은 Mobx 나 Redux 에 대한 이야기를 많이 들어보았을 것이다. 필자는 Mobx 보다 Redux를 더 많이 들어보았고, 이 때문에 레퍼런스가 더 많을것 이라는 생각에 Redux 를 다루기로 webaura.tistory.com 위 글에서 reducer 와 action, type 설정을 했었다. 이에 이어서 store 를 설정하고 실제 프로젝트에 적용시켜보며 chorme 에서 Redux 의 상태를 볼 수 있는 방법을 알아보자. store redux/store import { cr..
[ReactJS] 리액트 경고 : Assign object to a variable before exporting as module default
react 를 하다보면 잦은 오류가 발생한다. redux 를 할 때 자주 발생했었는데 여러개를 export할 때 문제가 되는 부분이었다. 큰 문제는 아니지만 이렇게 뜨니까 너무 거슬려서 어떻게 수정을 해야하나 고민을 하였다. Assign object to a variable before exporting as module default 무슨 문제인가 구글링을 해본 결과 export default { store, persistor }; 이렇게 export 를 하면 경고가 발생한다고 한다. 그래서 아래와같은 코드로 변경을 해주는게 좋다. const stores = { store, persistor } export default stores; 이런식으로 export 하고자 하는 내용들을 묶어서 export 해..
[ReactJS] 상태관리 라이브러리 Redux / 설치와 적용법
React 를 다뤄보신 사람들은 Mobx 나 Redux 에 대한 이야기를 많이 들어보았을 것이다. 필자는 Mobx 보다 Redux를 더 많이 들어보았고, 이 때문에 레퍼런스가 더 많을것 이라는 생각에 Redux 를 다루기로 하였다. 많은 내용을 공부한것이 아니지만, 유용하게 사용중인 기능들만 이야기를 해보려고 한다. 이번에 작성하는 대부분의 내용은 아래 사이트에서 참고한 내용들이다. 공식문서가 정말 유용하다! https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux 소개하기 공식 사이트에서는 " Redux는 자바스크립트 앱을 위한 예측..
[React] 라이브러리 없이 이미지 슬라이더 만들기
효율이 완전떨어질 수 있는 코드일 수 있습니다. 하지만, 기능적으로 문제는 없다 생각하여 작성한 글 입니다. 문제점 혹은 지적사항에 관한 댓글은 환영하겠습니다. 현재 포트폴리오 사이트를 만들던 중, 이미지 슬라이더를 라이브러리 없이 만들어보고 싶었습니다. 그러던 중 한가지 아이디어가 떠올라 이렇게 글을 작성하였습니다. 일단 완성품 내가 원하는 그림 현재 제작중인 포트폴리오 사이트의 일부분 입니다. 좌측 하단에 보면 Prev, Next 버튼이 있습니다. 이 버튼을 누르면 다음 슬라이더 혹은 이전 슬라이더가 보이는 기능을 구현하고 싶었습니다. 여러가지 스크롤에 관련된 함수는 많았습니다. ( scrollTo, scrollintoView, scrollTop, scrollLeft 등 ) 하지만, 스크롤에 관련된 ..
[React.js] 부모에서 자식, 자식에서 부모 값 전달하는 방법 props, function
[ React 관련 글 List ] 2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 함수에서 사용하는Hooks State. useState 2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 리액트에서 화면전환 애니메이션 ( react-transition-group ) 부모에서 자식으로 값 전달하는 방법 props 란? - 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단. - 하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 해준다. - 단, 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수는 없다. props 사용법 - 클래스형 컴포넌트와 함수형 컴포넌트 둘 다 똑같은 방식으로 진행하면 된다. :: 상위 컴포넌..