쭈링이.log 쭈링이.log

React Lifecycle React Lifecycle 이란 컴포넌트들의 생명주기를 뜻하며 컴포넌트의 생성 부터 시작해 업데이트, 소멸이 되어 사라질 때 호출하는 메서드이다. 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 순서에 따라 생명주기를 갖는다. useEffect useEffect 란 react lifecycle에 하나의 훅으로서 컴포넌트가 렌더링을 할 때 작업이 실행 되도록 리액트의 hook이다. useEffect를 사용하기위해 react에서 import를 해야한다. // useEffect 훅을 사용하기 위해 선언한다. import { useEffect } from 'react'; 컴포넌트속에 useEffect 함수를 선언하여 사용하면된다...

Styled Components React styled components 란 js파일에서 css를 사용할 수 있도록 도와주는 Css-in-js 라이브러리이다. styled components를 사용하기 위해 우선 설치를 해야한다. npm install styled-components 터미널을 연 후 npm install styled-components 명령어를 입력하여 설치한다. 설치가 완료되면 이러한 로그창이 나타난다. styled components 를 사용하기위해선 라이브러리를 불러와야한다. import styled from 'styled-components'; import로 라이브러리를 불러 온후 변수를 만들어 styled components 문법을 사용하면된다. // 태그로 사용할 변수명을 만..

React Router Parameter React Router에서 URL의 파라미터를 설정하려면 path에 :변수를 사용한다. // path 경로 뒤에: 를 붙여 파라미터 변수를 선언한다. 파라미터 변수 선언후 useParams함수를 사용하여 파라미터 값을 변수에 저장한다. // useParams함수를 사용하도록 라이브러리 선언한다. import { useParams } from 'react-router-dom'; function Detail(props) { // path에 선언한 변수명으로 변수를 선언한다. let {id} = useParams(); ... 파라미터값 id변수를 console.log() 함수로 출력했다. 파라미터id의 값으로 각각의 인덱스 데이터를 추출할 수 있다. // Detail...

useNavigate useNavigate란 페이지를 이동할 때 사용한다. useNavigate와 Link의 차이점은 단순히 페이지 이동할 때 사용을 해도 되지만 useNavigate은 특정 이벤트가 실행이 되었을 때 작동이 되도록 이벤트핸들을 설정할 수 있고 로직이 필요한 상황에서도 사용가능하다. // react-router-dom 라이브러리에서 import로 가져와 사용한다. import {useNavigate} from 'react-router-dom'; 위의 코드를 사용하여 useNavigate를 사용할 수 있도록 한다., // useNavigate를 변수로 선언한다. let navigate = useNavigate(); useNavigate 함수를 변수로 선언한다. // 링크가 필요한 부분에 o..

Routes Routes 란 여러개의 route를 담는 태그이다. function App() { let [shoes] = useState(data); return ( // return 속에 Routes태그 를 선언한다. // 선언된 Routes태그 속에 Route태그를 선언하여 페이지를 나눈다. ... Route Route란 React router에 가장 중요한 부분으로 URL 세그먼트를 구성 요소, 데이터 로드 및 데이터 변형에 연결한다. Route는 Router 생성 기능에 전달되는 객체이다. Route들은 집합들로 인해 복잡한 애플리케이션 레이아웃과 데이터 종속성이 단순해지고 선언적이 된다. // path는 URL경로를 나타낸다. // element는 경로의 내용들을 나타낸다. Route 속성중 p..

React router React router 란 사용자가 입력한 주소(URL)에 따라 컴포넌트를 생성해서 보여주는 것이다. React 는 SPA(Single Page Application)방식을 적용해서 사용자가 입력한 주소가 변경되더라도 새로운 html 의 페이지를 보여주는것이 아니고 기존 html에서 컴포넌트를 보여주는 방식이다. React에서 router를 사용하기위해선 react-router-dom 라이브러리를 설치해야한다. npm install react-router-dom@6 터미널에서 프로젝트 디렉토리에 위와같은 명령어 npm install react-router-dom@6 를 입력하면 router 라이브러리가 설치된다. @6은 버전을 나타낸다. 이러한 문구가 나타나면 설치가 완료된것이다...

React Import & Export React 에서 export 또는 import 를 사용할때는 javascrpit export, import 사용방법이 같다. // data.js let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 } ] export default data; src 폴더에 data.js 파일을 생성 한 후 expo..

React Image React에서 이미지파일을 불러오기위한 여러 방법이있다. css 파일에서 불러오는 방법은 이러하다. // App.js import logo from './logo.svg'; import { Nav, Navbar, Container } from 'react-bootstrap'; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import MainBg from './img/bg.png' function App() { return ( My Shop Home Features Pricing // 이미지를 넣기위한 태그 설정 ); } export default App; .main-bg { height: 300px; back..