JAEJAE imojeomo

- props를 보냈는데 출력이 안된다거나, 이미지를 넣었느데 안보이는 버그같은 게 생긴다면 - 개발자 도구를 켜서 Elements 탭 살펴보면 되는데 여기선 내가 짠 코드를 실제 html css로 변환되어서 보여진다. - 그게 싫고 컴포넌트로 미리 보고 싶으면 리액트 개발자도구를 설치해서 켜보면 된다. ✏️ 크롬 확장프로그램: React Developer Tools https://chrome.google.com/webstore/ Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com - 크롬 웹스토어 들어가면 확장프로그램 설치가 가능하다. - 여기서 React developer Tools 설치하면 Compoents 탭이 생기..

✏️ 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...