본문 바로가기

React38

[React] useNavigate() 설명, 404 페이지 만드는 법, nested routes, outlet 페이지 이동기능을 컴포넌트 대신 useNavigate() 훅을 사용할 수 있다. function App(){ let navigate = useNavigate() return ( (생략) { navigate('/detail') }}>이동버튼 ) } -> navigate(-1) = 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기도 가능하다. 404 페이지 -> 의 path에 *을 넣으면, 모든 경로를 뜻한다. -> 위 Route 경로 이외의 경로를 들어간다면 element 요소를 보여준다. 서브경로 만들 수 있는 nested routes /about/member로 접속하면 회사멤버 소개하는 페이지 /about/location으로 접속하면 회사위치 소개하는 페이지를 만들고 싶을 때, -> 이렇게 해도 되겠지만,.. 2023. 12. 18.
[React] React Router 쓰는 법 react-router-dom React는 SPA(Single Page Application)이므로 html 파일을 하나만 사용한다. React Router를 사용하면 페이지 간의 전환 및 라우팅을 쉽게 처리 할 수 있다. 주로 외부 라이브러리인 react-router-dom를 사용한다. 사용법 npm install react-router-dom@6 -> 먼저, 터미널에 react-router-dom 라이브러리 설치한다. (위 코드는 6버전) import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); -> index.js 파일로 가서 import .. 2023. 12. 18.
[React] import export 문법 import 문법 // 예를 들어, MyComponent.js 파일에서 MyComponent를 내보내는 경우 // 현재 파일에서 MyComponent를 가져오려면 다음과 같이 작성할 수 있습니다. import MyComponent from './MyComponent'; -> import 문은 다른 파일에서 내보내는 모듈을 현재 파일에서 사용할 수 있게 해준다. export 문법 // 단일 개체 또는 함수를 내보내는 경우 export default 모듈명; // 여러 개의 개체 또는 함수를 내보내는 경우 export { 모듈1, 모듈2, ... }; -> export 문은 현재 파일에서 외부 파일에서 사용할 수 있도록 지정된 모듈을 내보내는 데 사용된다. 2023. 12. 16.
[React] public 폴더의 용도 여러가지 소스코드는 src 폴더에 보관하면 되는데 이미지같은 static 파일의 경우 public 폴더에 보관해도 된다. 리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관 없습니다. 2023. 12. 16.
[React] HTML, CSS로 이미지 첨부, public 폴더 이용하는 법 HTML import img from "./img/bg.png"; 현재 폴더인 src에 img라는 폴더를 만들고 그 안에 이미지 파일을 첨부한 후 import 한다. 쓸 위치에 가서 style={{backgroundImage : "url(" + 이름 + ")" }} 해주면 된다. CSS .main-bg { height: 300px; background-image: url("./img/bg.png"); background-size: cover; background-position: center; } -> 쓸 태그에 className='작명' 후 css 파일로 간 후 .작명 { } 안에 url(이미지경로)를 넣어주면 된다. public 폴더 이용하는 법 -> import 필요 X , 위 코드 + /파일명 해.. 2023. 12. 16.
[React] React-Bootstrap 사용하기 세팅하기 npm install react-bootstrap bootstrap -> 터미널에 설치한다. -> public 폴더의 index.html의 태그 안에 위 코드 넣어논다. 사용하기 -> 구글에 react bootstrap 검색 후 처음 나오는 사이트로 이동한다. -> 검색 창에 필요한 요소들(컴포넌트) 검색 후 이용하면 된다. 2023. 12. 16.
[React] 이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(Event Bubbling)이란? HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소로 전파되는 현상을 말합니다. 즉, 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 과정을 의미합니다. 이벤트 버블링은 이벤트가 발생한 요소에서 시작해서 가장 최상위의 조상 요소까지 이벤트가 전파됩니다. 이때, 각 요소의 이벤트 핸들러가 호출되며 이벤트 처리가 이뤄집니다. 이는 DOM(Document Object Model)의 트리 구조를 기반으로 하고 있습니다. 예시 {console.log(상위 클릭)}}> console.log("하위 클릭")}>Click me! span 태그인 Click me!를 클릭하면, span 태그를 감싸고 있는 div 태그의 onClick 이벤트도 같이 실행된다. -> .. 2023. 12. 15.
[React] filter() 함수 설명과 예시 filter() 함수란? filter() 함수는 react 내장 함수가 아닌 자바스크립트 함수이다. Array 자료형에서만 사용 가능하고 결과값이 true인 값만 새로운 배열에 넣어서 반환해준다. 예시 var items = [1,2,3,4,5]; var filter_ex = items.filter(item => item 2023. 12. 15.
[React] props 문법 설명과 예제 React에서는 컴포넌트에서 컴포넌트로 데이터를 보낼 때 props 문법을 사용한다. 예시 function App (){ let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(props){ return ( { props.title[0] } 날짜 상세내용 ) } 자식컴포넌트 사용하는 곳에 가서 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 작성 후 사용 시 props.작명 사용하면 된다. state뿐 아니라 변수, 함수 다 전송 가능하다. -> 자식 컴포넌트에서 부모 컴포넌트로는 불가능하다. -> 같은 곳에 존재하는 컴포넌트에게도 불가능하다. 2023. 12. 14.
[React] map() 함수 설명과 예제 map() 함수는 array 타입에만 사용 가능 var ex = [2,3,4]; ex.map(function(){ console.log(1) }); # 1,1,1 출력됨 -> 콜백함수의 파라미터가 없다면 ex 요소의 개수만큼 반복된다. var ex = [2,3,4]; ex.map(function(a){ console.log(a) }); # 2,3,4 출력 됨 -> 콜백함수의 첫번째 파라미터는 ex의 첫번째 요소부터 마지막 요소까지 할당되며 반복된다. var ex = [2,3,4]; ex.map(function(a, i){ console.log(i) }); # 0,1,2 출력 됨 -> 콜백함수의 두번째 파라미터는 인덱스에 해당해서 0부터 1씩 증가한다. 2023. 12. 14.

티스토리툴바