안녕하세요

리액트 Link 컴포넌트 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용합니다. 태그의 href는 페이지를 새로 불러오기 때문에 새로운 데이터를 렌더링해주게 됩니다. Link 컴포넌트는 브라우저의 주소를 이동하지만 페이지를 새로 렌더링하지 않습니다. Link는 to 태그를 이용합니다. 리액트 Swiper dots 구현하기 Swiper 컴포넌트에 ref를 주었습니다. ref는 태그이름.current로 해당 태그에 접근할 수 있습니다. react Swiper에서 dots기능을 구현하려면 ref를 이용해 MSG.current.swiper.slideTo() 속성을 이용합니다. {SLIDE.map((dot, idx) => ( MSG.current.swiper.slideTo(idx + 1)} ..

stlyed components라는 CSS-in-JS 라이브러리를 통해서 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다. 1. 패키지를 설치합니다. $ npm i styled-components 2. styled 함수를 import 합니다 import styled from "styled-components"; 3. css를 다음과 같이 백틱(``) 안에 작성합니다. styled.button` color: red; `; 4. 스타일을 컴포넌트로 만들로 children을 props로 각 css 스타일을 적용합니다. function Button({ children }) { return {children}; } 5. 이를 export하고나서 가져다 쓰면 됩니다. import Button from "...

컴포넌트로 컴포넌트를 감싸는 방법입니다. 컴포넌트로 컴포넌트를 감싸려면 children을 props로 주고 나서 children을 원하는 태그로 감싸주면 됩니다. import React from "react"; const Wrapper = ({ children }) => { return ( {children} ); }; export default Wrapper; 그리고 App.js에서 Wrapper 컴포넌트로 감싸면 됩니다. return ( ); cookie 이벤트로 팝업 창에 오늘 하루 열지 않기 기능을 구현합니다. const Popup = () => { const [TG, setTG] = useState(); return ( // TG가 true라면 Pop에 'on'을 붙이도록 합니다. Popup {..

리액트로 유튜브 동영상 전환 기능 만들기 1. react-youtube를 설치합니다. npm install react-youtube 2. 유튜브 모듈을 import 합니다. import YouTube from "react-youtube"; 3. 동영상을 만듭니다. const opts = { height: '100%', width: '100%', playerVars: { autoplay: 0, loop: 1, controls: 0, showinfo: 0, rel: 0, mute: 1, paused: 1, }, }; 4. 유튜브 영상에 ref를 주고, url을 변수로 만듭니다. const Promotion = () => { const MOVIE = useRef(); const [url, setUrl] = u..