목록리액트/라이브러리 (6)

개발공부 임고미

[Slick-slider] React slick 세팅/간격주기/드래그 중 클릭막기 - 드래그 중 클릭막기[3]

목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 드래그중 클릭 막기 1. slick APi이용 상태값을 이용해 드레그 중인것을 캐치하고 그 동안 클릭을 막는 방법을 이용합니다. const [dragging, setDragging] = useState(false) const handleBeforeChange = useCallback(() => { setDragging(true); }, []); const handleAfterChange = useCallback((i: number) => { setDragging(false); }, []); const settings = { ..., beforeChange: handleBeforeChange, afterChange:..
리액트/라이브러리 2022. 5. 2. 09:42
[Slick-slider] React slick 세팅/간격주기/드래그 중 클릭막기 - 간격주기 / Hover효과 영역[2]

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 간격주기 1. css custom 간격을 주기위해선 slick slide의 css를 수정해줭하는 수밖에 없습니다. [기본] //오른쪽으로 20px만큼 간격주기 .slick-list { marign-right: -..
리액트/라이브러리 2022. 4. 28. 18:40
[Slick-slider] react slickt 세팅/간격주기/드래그 중 클릭막기 [1]

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 3. 드래그중 클릭 막기 슬라이드 세팅 1. 패키지 로드 리엑트에서 slick을 세팅하기위에선 몇가지 패키지를 다운로드 해야합니다. //react slick npm install react-slick --save npm install slick-carousel -..
리액트/라이브러리 2022. 4. 28. 17:19
[Styled Component] 적용안되는경우1

기본 1. import 안한경우 2. import 하고 component 만들어줬는데, 잘못만들어준경우 //x const styledComponent = styled.div``; //o const StyledComponent = styled.div``; 이 또한 컴포넌트를 만드는것이므로, 대문자로 시작해줘야합니다. 3. 컴포넌트에 styled를 적용하고 싶은데 잘못한 경우 //x const StyledComponent = styled.Component``; //o const StyledComponent = styled(Component)``; 컴포넌트는, 일반 태그들과 달리 () 괄호로 묶어줘야합니다. 4. 위와같이 잘했는데도 안되는경우 이 상황을 겪고 이 포스팅을 하게 되었는데 해결은 하였지만 모든 원..
리액트/라이브러리 2021. 11. 29. 20:35
[React - Xlsx & react-csv ] 엑셀 다운로드 만들기!

들어가며! 처음에 csv파일과 xlsx의 차이를 잘 몰라 어떤것을 선택해 엑셀로 변환시킬까 고민하다가 두 타입의 차이점을 알아보았다. csv 1. MS-Excel, Google Sheet등 과 같은 다양한 스프레시트에서 사용할 수 있습니다. 2. xlsx에 비해 쉽고 빠르게 읽을 수 있다. 3. 단순 읽고 쓰는 정도라면 csv추천 xlsx 1. 기능이 많다. 2. csv에비해 무겁다. 참고 : https://wisenrich.com/%EC%97%91%EC%85%80xls%ED%8C%8C%EC%9D%BC%EA%B3%BC-csv-%EC%9A%A9%EB%8F%84-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80/ ------- 둘 중 필요한거..
리액트/라이브러리 2021. 8. 10. 14:04
[StyledComponent] 스타일드 컴포넌트 활용하기

간단한 스타일을 줄때 활용했는데 제대로 활용해보기 위한 정리 styled component 의 API Reference 와 Getting start 부분을 참고해 작성 1. 활용가능 : 태그 or 컴포넌트(tag / component) //태그 : .button const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white; ` //컴포넌트 : (ComponentName) const TomatoButton = styled(ComponentName)` background: tomato; ` 2. 조건에 따른 스타일링 (props) //props로 background를 받아와서 색을 넣..
리액트/라이브러리 2021. 3. 22. 14:09
Prev 1 Next