참고해서 적용한 원글 https://myhappyman.tistory.com/312 React - 무한 롤링 슬라이드(배너) 구현하기 🎞️ 롤링 슬라이드 주식이나 뉴스같은 곳에서 한줄로 끊임없이 텍스트가 물처럼 한방향으로 흐르거나 요즘 트렌드의 스타일로 작성된 사이트들을 구경하다 보면 자주 접할 수 있는 스타일의 myhappyman.tistory.com 다른 분들의 코드도 한번 사용해보고 싶어 구글링을 많이 했다. 그 중 위의 블로그 글이 가장 트렌드에 맞기도 하고 내 프로젝트에 적용해보고 싶어서 가져왔다. 사용한 이벤트 onMouseEnter : 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생, 요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음 onMouseLeave : 마우스포인터가 요소 ..

처음에는 react-slider 라이브러리를 사용해서 슬라이드를 만들었다. 그런데 사용자 친구에게 포트폴리오를 보여주니 바로 드래그를 해버리는 게 아닌가...? 그래서 라이브러리를 drag-slide가 자연스럽도록 수정을 하려고 했는데 타 블로그에서 react로 drag-slide를 제작하는 글을 보게 되었다. 참고 블로그 : https://velog.io/@tunakim/%EB%A7%88%EC%9A%B0%EC%8A%A4-%EB%93%9C%EB%9E%98%EA%B7%B8%EB%A1%9C-%EC%A2%8C%EC%9A%B0-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84-ft.-React 마우스 드래그로 좌우 스크롤 구현 (ft. React) 아이템들을 행으로 나열하고 설..

public 파일에서 이미지 가져오기 App.js의 상대 경로 X index.html의 상대 경로 O getTime()메서드 : 밀리초 반환 헤더, 버튼 등 공통적으로 많이 사용되는 부분 => 공용 컴포넌트로 제작 버튼 예시 // 버튼 모아놓은 component(MyButton) // type, text, onClick => props const MyButton = ({type, text, onClick}) => { return ( // onClick: 이벤트 {onClick}: props {text} ) }; export default MyButton; // App component import MyButton from ___; const onClick01 = (e) => { console.log('클..

Routing - 라우트 : 데이터가 이동하는 경로 - 라우터 : 데이터가 이동하는 네트워크 장치 - 라우팅 : 데이터가 어디로 이동해야 할 지 경로를 정해주는 전체 과정 * @6 : 버전 => 참고자료 검색 시 라우터 버전 일치하는 지 확인해야 함 package.json에서 버전 확인 가능 설치 방법 : npm install react-router-dom@6 router 사용 시 주의 1. 페이지 변경 시에도 항상 노출되어야 하는 영역의 경우 Routes영역 바깥에 작성 2. 페이지 이동 위해 a태그 사용 가능함 하지만 a태그 클릭 시 문서 전체가 새로고침 됨 => SPA 장점 활용 X 그래서 라우터 사용한 페이지 전환은 a태그 사용 X

1. useMemo : 연산된 값을 렌더링 시 재사용 할 때 사용 컴포넌트가 업데이트 되고 렌더링 될 때 업데이트 필요 X 컴포넌트까지 같이 리렌더링 되는 경우 = 성능 떨어짐 이를 방지하기 위해 useMemo 사용 useMemo(function, deps) - funtion : 어떻게 연산할 지 정의하는 함수 - deps : 검사할 특정 값을 담은 배열(배령 안의 값이 바뀌면 함수 호출해서 연산, 값이 바뀌지 않으면 이전에 연산한 값 재사용) 예시 코드 참고 : https://xiubindev.tistory.com/101 2. useCallback : 특정 함수 재사용 시 사용 함수를 자식 컴포넌트에 props로 넘겨줄 때는 항상 useCallback 사용해야 함 그렇지 않으면 자식 컴포넌트는 계속 새..

+) Ref란? - 컴포넌트 라이프 사이클(마운트, 언마운트) 내에서 유지되는 변경이 가능한 변수 변수가 변할 때 렌더링이 추가로 되지 않음 state와 비교 state - 컴포넌트 라이프 사이클 내에서 유지 O, 변경 가능한 변수 - 값이 변할 때 렌더링이 다시 됨 ref - 컴포넌트 라이프 사이클 내에서 유지 O, 변경 가능한 변수 - 값이 변할 때 렌더링 X => 이 외 추가 정보 링크 : https://blog.toycrane.xyz/react-ref%EC%97%90-%EB%8C%80%ED%95%B4-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-f7d18d140716 useRef() : 특정 DOM 선택해야 할 시에 사용 클래..