코딩애플

React : Lifecycle, useEffect (사용법)

Lifecycle mount (장착) 컴포넌트가 있는 페이지로 들어갔을 때 컴포넌트가 mount(장착)된다. update (업데이트) 컴포넌트 안에서 state가 조작되는 등 재랜더링되어 업데이트가 일어난다. unmount (제거) 다시 홈으로 돌아가면 Detail 컴포넌트가 unmount(제거)된다. Lifecycle hook (간섭) 그리고 위 Lifecycle들이 일어나는 시점에 코드를 실행할 수 있다. 사용법 - 옛날 class 문법 class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 }..

React : styled-components (설치 , 사용, 장단점), css파일 js에 종속시키기

styled-components 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다. 설치 터미널에 아래 코드를 입력한다. npm install styled-components * 현재 version6 이후 해당 명령어 입력 시 문제가 발생하고 있어서, npm install styled-components@5.3.10로 입력했다. 그리고 사용하고 싶은 컴포넌트 맨 위에 import해온다. import styled from 'styled-components' 사용 import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey; `; let YellowBtn = styled.button` backgrou..

React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())

가나다정렬되어도 끄떡없는 상세페이지 불러오기 조건 배열의 순서가 변경되기 전과 후가 같은 상품으로 이동되도록 만든다. 풀이 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); let selectedShoes = props.shoes.find(function(shoe){ return shoe.id === parseInt(id); }) return ( {selectedShoes.title} {selectedShoes.content} {selectedShoes.price} 주문하기 ) } export default Detail; find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 ..

React : URL 파라미터 (useParams)

URL 파라미터 상세페이지가 데이터에 따라 수백개가 필요한 상황이 생길 수 있다. 이 경우에 URL 파라미터를 사용하면 된다. 부모페이지 path 작명에서 '/:작명'을 입력하면 아무 문자를 뜻한다. 주소창에 /detail/작명 입력했을 때 컴포넌트를 보여달라는 것이다. 자식(연결)페이지 import { useParams } from 'react-router-dom' function Detail(){ let {id} = useParams(); return (

React : 리액트 라우터 (navigate, 404페이지, nested routes, outlet)

navigate navigate 사용하는 법 1. react-router-dom에 import한다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; 2. 변수에 함수를 할당하고 원하는 위치에 onClick 이벤트로 걸어둔다. function App() { let navigate = useNavigate() return ( { navigate('/cart') } }>장바구니 { navigate('/detail') } }>상세보기 ); } 재밌는 기능 navigate 안에 -1을 넣으면 뒤로가기, 2를 넣으면 앞으로 두번 가기 이런 기능들이 있다고 한다. { navigate('-1') } }>뒤로가기 { navigate..

React : 리액트 라우터 (설치, 세팅, 이동버튼) 및 외부라이브러리 사용법

리액트에서 페이지 나누는 법 리액트를 쓰지 않으면 페이지를 나누고 싶을 때 html을 여러개 만들지만, 리액트는 html 파일을 하나만 사용해도 된다. 컴포넌트를 만들어서 상세페이지 내용을 채운다 /페이지로 접속하면 해당 컴포넌트를 보여준다 react-router-dom이라는 라이브러리를 쓰면 위 작업을 쉽게 할 수 있다. 설치 터미널에 아래 코드를 입력한다. (뒤 6은 버전명이다.) npm install react-router-dom@6 그리고 index.js에 import를 삽입하고, 태그를 감싸는 코드를 입력한다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementBy..