JAEJAE imojeomo

✏️ localStorage - 새로고침하면 브라우저는 html css js 파일들을 처음부터 다시 읽기 때문에 모든 state 데이터는 리셋된다. - 이걸 해결하기 위해서는 state 데이터는 서버로 보내 DB에 저장하거나 LocalStorage에 저장하는데 - 오늘 배울 내용은 LocalStorage에 관해서이다. - LocalStorage는 쉽게 말해 유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간인데 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있다. - 사이트마다 5MB 정도의 문자열을 저장할 수 있고 - object 자료와 비슷하게 key/value 형태로 저장한다. ✏️ localStorage 문법 - 그냥 js 파일 아무데서나 다음 문법을 쓰면 localStorage에 ..

1️⃣ 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } // 또는, 아래와 같이 쓰면 else 생략 가능 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } - return + JSX 전체를 뱉는 if문 2️⃣ JSX 안에서 쓰는 삼항연산자 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } // 아래와 같이 중첩 사용도 가능, 하지만 가독성이 좋지 않다. function Component() { return ( {..

💁‍♀️ 장바구니 페이지 만들기 // Cart.js import { Table } from 'react-bootstrap' let state = useSelector((state)=> state) # 상품명 수량 변경하기 { state.cart.map((a, i)=> 1 {state.cart[i].name} {state.cart[i].count} 안녕 ) } ✏️ Redux ✏️ Redux 쓰면 좋은 점 - props 없이 편리하게 state 공유할 수 있게 도와주는 라이브러리 ! 간단한 거 만들 때, 컴포넌트가 몇 개 없을 때 → props 쓰는게 더 이득임 - 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데, 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있음. - 그래서 귀찮은 props 전..

💁‍♀️ 탭 UI 만들기 1. html css로 탭 디자인 미리 완성하기 { 탭변경(0) }} eventKey="link0">버튼0 { 탭변경(1) }} eventKey="link1">버튼1 { 탭변경(2) }} eventKey="link2">버튼2 내용0 내용1 내용2 2. UI의 현재 상태를 저장할 state 하나 만들기 function Detail(){ let [탭, 탭변경] = useState(0) (생략) } 3. state에 따라서 UI가 어떻게 보일지 작성 function Detail(){ let [탭, 탭변경] = useState(0) return ( ) } function TabContent(props){ // detail 안에 있는 state 사용하기 위해 props if (props...

✏️ Lifecycle ✏️ 컴포넌트의 Lifecycle - 컴포넌트는 mount(생성), update(재렌더링), unmount(삭제) 될 수 있고 - 컴포넌트의 Lifecycle에 hook을 이용한 간섭(특정 코드 실행)이 가능하다. ✏️Lifecycle hook import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 -> lifecycle hook console.log('안녕') }); return (생략) } 💁‍♀️ 예시 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=..