몽땅뚝딱 개발자

React + Typescript 환경에서 Swiper 적용하기! 오늘도 안됐ㄷㅏ 이젠 개의치않아 맨날 안되니깐 말이야 ! 내가 구현할 환경에서는 React, TypeScript, SCSS를 사용하고 있다. 1. Swiper를 설치해준다. 가장 최신버전으로 했다. $ npm i swiper 2. 이렇게 선언해준다. 이렇게 선언하면 이미지 슬라이드까지는 구현이 된다. { displayImageList.map((url, index) => { return ( ) }) } ✍🏻 여기서 내가 원하는 바를 정리해보자면 1) 현재 슬라이드의 인덱스를 받아와서 화면에 노출해야한다. 2) 2개의 탭을 왔다갔다 하는 것이기 때문에 다른 탭을 누르면 activeIndex(현재 활성화 된 슬라이드의 인덱스)도 함께 초기화되어..

글 하나로 적긴 애매하지만 모아두면 소소한 깨달음의 정리... 계속 추가 될 예정....🚂 1. 함수를 넣으면 렌더링 시점에서 함수가 호출되므로 함수형태로 넣어준다. // 이렇게 함수형태로 작성해준다. // 이렇게 적으면 렌더링 시점에 실행된다. 2. 값은 이렇게도 담긴다. import SwiperCore, {Navigation} from "swiper"; const [swiper, setSwiper] = useState(); 3. 기본값을 지정하는 방법은 2가지 - 첫번째 방법: defaultProps를 사용한다. UserInfo.defaultProps = { name: 'empty', age: 0, }; - 두번째 방법: 매개변수에서 지정해준다. function UserInfo({ name = 'em..

◽ useMemo의 형태 useMemo( param1 callbackFn, param2 [의존성 배열] ) const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hook이다. useMemo는 처음에 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되더라도 계속 같은 함수를 호출하지 않고 이전에 이미 계산된 결과 값을 메모리에서 꺼내와서 재사용한다. 렌더링 중에 실행되기 때문에 통상적으로 렌더링 중에는 하지 않는 것을 이 함수 내에서 하면 안된다. 예를 들어, 사이드 이펙트(Side Effect)에서 하는 일을 useMemo에 적지 않도록 한다. 첫번째 인자..

마커를 넣어보자! 1. 마커 1개 넣어보자 import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Window { kakao: any } } const Map = styled.div` width: 100%; height: 300px; ` function MapContainer() { const addMarker = () => { const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667) return new window.kakao.maps.Marker({ position: markerPosition..

책+구글링으로 구현해봤던 레이아웃과 라우터 쪼개기! 이전에 만들어놨던거 기록기록...✍🏻 📄 index.tsx 로 묶어준다. import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import App from './App' import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( , ) 📄 App.tsx 컴포넌트를 만들고 작성한다. import React from 'react' import styles from..

테마를 분리해보자.... 해내고나니 뿌듯하다... ^_ ^ㅋ 다만 리팩토링이 필요하다. 1. type으로 선언했는데 interface와 구분이 잘 되지 않는다. 좀 더 알아본 뒤 변경해야 할 것 같다. 2. 좀 더 공통화 할 수 있는 부분이 있을 것 같다. 3. 기본값도 유니온을 사용해서 type으로 만들 수 있을 듯?! 📄 CommonButton.tsx import styled, { css } from 'styled-components' // ... function CommonButton(props: ButtonProps) { return ( {props.label} ) } export default CommonButton ButtonProps는 이렇게 지정해주었다. /** * **label**: 버튼..

컴포넌트는 페이지에 장착되기도 하고(mount), 업데이트가 되며(update), 필요없으면 제거(unmount)된다. 라이프사이플을 사용하면 중간중간 간섭하고 실행할 수 있다. ◽ useEffect() 사용하기 useEffect()는 HTML 렌더링 이후에 동작한다. 1. 오래걸리는 반복연산 2. 서버에서 데이터를 가져오는 작업 3. 타이머 등은 useEffect안에서 사용하는 것이 좋다. 예제 1. class 문법을 사용하는 기존 방식 class lifeCycle extends React.Component { componentDidMount() { // ... } componentDidUpdate(prevProps, prevState, snapshot) { // ... } componentWillUn..

◽ 설치하기 npm i react-router-dom@6 ◽ Router 사용하기 📄 index.js 태그로 감싸준다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring ..

◽ 커링(Currying)이란? 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야하는데, 이 함수를 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다. ◽ 예제 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, {Component} from "react"; class ChildComp extends Component { tryPlus(a) { // 200을 항상 고정값으로 보내주기..

1. 리액트는 JSX이기 때문에 'class'가 아니라 'className'을 사용한다. import './App.css'; function App() { return ( // className을 사용한다. ); } export default App; 2. 중괄호({}) 문법을 사용하여 데이터를 바인딩한다. import './App.css'; function App() { let post = '제목' return ( 블로그 // 중괄호 문법을 사용한다. { post } ); } export default App; 3. style은 style={} 문법으로 사용하며, 카멜 케이스이다. import './App.css'; function App() { let post = '제목' return ( // sty..