오늘은 상품의 재고가 몇개 남았는지 표시해볼 것이다. 일단 재고 데이터를 state에 저장해보자 let [inventory,inventoryChange] = useState([10,11,12]) 저장한 state는 Detail.js가 아닌 App.js에서 만들어야 한다. 이유는 중요한 데이터들은 상위 컴포넌트에 보관하는것이 중요하다!! 모든 데이터는 위에서 밑으로 흐르기 때문! 다시 Detail.js에서 컴포넌트로 UI를 만들어 보자! function Info() { return 재고; } 이렇게 되면 컴포넌트 구조는 다음과 같다. 이제 아까 만든 재고 state 데이터를 바인딩 해야한다. App → props → Detail Detail → props → Info props 를 두번 사용하여 전송한다...

Ajax? 서버에게 요청을 하는데 새로고침 없이 할 수 있게 도와주는 코드 요청에는 여러 종류가 있다. 첫번째 , GET요청 주소창에 URL 입력하는 요청 특정 페이지의 자료를 읽기! 두번째, POST 요청 정보를 숨겨서 서버에 전달하고 싶을 때 사용 읽기보단 서버로 중요 정보 전달 Ajax를 사용하는 방법은 세가지가 있다. JQuery 설치 후 $.ajax() axios 설치 후 axios.get() 자바스크립트 fetch() 리액트나 뷰가 많이 사용하는 라이브러리는 axios를 많이 사용한다. 설치 yarn add axios npm install axios import axios from 'axios’ 블로그의 더보기 버튼을 구현해보자! axios.get() 이라고 작성하면 GET요청을 새로고침 없이..

이전 시간 오류 잡기 cannot appear as a descendant of 오류 발생! 원인 : a태그 안에 a태그 넣으면 안된다 Home 따라서 이렇게 수정해준다. Home 여기서 as 는 react-bottstrap 문법으로 기본 a태그 대신 사용할 HTML태그 혹은 컴포넌트를 집어넣을 수 있다. Lifecycle & Hook 컴포넌트의 Lifecycle은 인생이다. 😯 컴포넌트가 생성이 되고, 변경이 되면 업데이터가 되고, 삭제가 될 수 있다. 우리는 Lifecycle 중간중간에 hook을 걸 수 있다. hook? 컴포넌트의 인생 중간중간에 뭔가 명령을 줄 수 있다. 🧐 컴포넌트가 생성되기 전에 hook! (그전에 이것좀 해줘!) 을 걸 수 있다. 또는 컴포넌트가 삭제되기 전에 hook! 이전..

component가 많아지면 다양한 파일에 분리가 되어있으면, css 작성 고민이 많아진다. 한곳에 css를 다 모아놓으면, 중복 문제도 발생하게 된다. 이를 해결하기 위해 class선언 없이 컴포넌트에 css를 직접 장착하는 것을 styled-components(=CSS in JS)라고 한다. styled-components 설치 yarn add styled-components npm install styled-components styled-components 사용하기 Detail.js import styled from 'styled-components' let 박스 = styled.div` padding : 20px; `; function Detail(){ return ( ) } 박스라는 컴포넌트를..

routing : 설치 라우팅 ? 페이지를 여러개 만드는것 라우팅은 react-router-dom 라이브러리 이용해야한다 yarn add react-router-dom@5 npm install react-router-dom@5 @5를 붙여야한다! index.js 셋팅 이 파일은 App.js에 있는 컴포넌트를 index.html에 꽂아주세요~ 뭐 이런 작업을 시키는 파일이다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {BrowserRouter} from 'r..

yarn을 이용한 새로운 프로젝트 설치 yarn이란? npm이나 npx를 대체해서 이용할 수 있게 도와주는 라이브러리로 npm보다 속도와 안정성을 자랑한다. npx create-react-app 실행 시 자동으로 yarn이 구동되어 빨라진다. npm install ~ 보다 yarn add ~ 라고 사용하시면 더 빠르게 설치할 수 있으며, npm run start를 yarn start로 대체할 수 있다. React Bootstrap 라이브러리 설치하기 https://react-bootstrap.github.io/ npm install react-bootstrap bootstrap yarn add react-bootstrap bootstrap 둘중에 하나를 골라 설치해주면 된다. 특정 스타일을 사용할 때는 ..

오늘의 포스팅은 리액트의 옛날 문법 배우기이다. 예전 버전 리액트의 문서들은 어렵게 표현되어있다. 이 문법을 배우는 이유는 리액트를 다룰 때 자주 사용했던 코드들은 대부분 class를 이용한 컴포넌트를 사용했다. class Profile extends React.Component{ constructor(){ super(); } render(){ return ( 프로필입니다. ) } } 위 코드는 컴포넌트를 만드는 기본 문법이다. 컴포넌트를 사용하는 방법은 로 동일하다. 클래스란 ❓ 변수와 함수 보관의 덩어리를 의미한다. extend란 ❓ react의 성질을 물려받아서 이런 클래스를 만들어주겠다! 라는 의미이다. 이때 세부설정이 필요한데, state는 constructor함수 안에 supter을 써주고 그..

이번 시간에는 글 발행 기능을 추가해볼 것이다! 글을 입력 하고 저장버튼을 누르면 상단에 발행된 글이 뜨게 된다. 대신 영구 저장은 못한다! 왜냐면 서버와 DB가 없으니까 간단하게 자바스크립트 변수, state로 저장하는 기능을 만들어 볼 것이다. 🤔 내가 짠 코드 function TextEnroll(text) { var newArray = [...글제목]; newArray.unshift(text); 글제목변경(newArray); } let [글제목, 글제목변경] = useState([ "난곡 돈까스 맛집! 오츠카도", "신대방 온정 돈가스 너무 매워", "강남 토끼정, 맛집이다 ", ]); let [inputText, changeText] = useState(null); { TextEnroll("추가는..