메인페이지 누르면 페이지 이동시키기 { history.push('/detail/0') }} /> 이렇게 해도 실행이 되지 않는다. 이유는 는 div가 아니기 때문에 onClick은 속성을 달아도 동작하지 않을 수 있다. 컴포넌트를 정의한 곳으로 가서 div에 직접 onClick을 달아주시면 문제 해결 function Contents(props) { let inventory = useContext(inventoryContext); let history = useHistory(); return ( { history.push("/detail/" + props.sticker.id); }} > 어쩌구 ); } /detail 뒷부분에 props.sticker.id로 동적으로 수정 장바구니 페이지 +/- 버튼 완성하..

지난 시간에는 redux를 저장하고 사용하는 방법을 알아봤다. 이번시간에는 수정하는 방법을 알아보자! redux를 사용하면서 state 데이터를 수정하고 싶을 때는 reducer 함수를 만들고 그곳에 데이터 수정하는 방법을 정의 원하는 곳에서 dispatch() 라는 함수를 써서 reducer에게 수정해달라고 요청 장바구니 품목에 + / - 버튼 만들기 (Cart.js) function Cart(props){ return ( # 상품명 수량 변경 { props.state.map((a,i)=>{ return ( {a.id} {a.name} {a.quan} { ??? }}> + ) }) } ) } map 반복문을 적용해서 장바구니 항목이 여러개면 을 여러개 생성 reducer 만들기 reducer는 func..

Redux 라이브러리? 모든 컴포넌트 , 파일 끼리 같은 값을 공유할수 있는 저장공간 생성 가능 Context API와 같지만 , 추가로 데이터 관리 기능을 제공한다. Redux사용 이유 - props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있게 만들어준다. 데이터를 보관하기 위한 redux 설치/셋팅 yarn add redux react-redux npm install redux react-redux redux를 사용하기 위해선 두개의 라이브러리( redux, react-redux) 설치! redux : 데이터를 엄격하게 관리하는 기능 react-redux : 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공 (index.js) import {Provider} from 'react-r..

이번시간에는 Tab 기능을 만들어 볼 것이다. 탭 만들기 탭 디자인은 react-bootstrap 홈페이지에서 Base Nav를 사용하였다. 그리고 각각 탭을 누르면 로 몇번째 탭을 눌렀는지 state에 저장한 후 state에 따라 보여준다. 즉 이런 원리이다. state가 0이면 0번 div를 보여줌 state가 1이면 1번 div를 보여줌 UI의 상태를 저장할 state를 만들어 준다. (Detail.js) function Detail(){ let [누른탭, 누른탭변경] = useState(0); return ( { 누른탭변경(0) }}>Active { 누른탭변경(1) }}>Option 2 내용0 내용1 내용2 ) } 이제 if문으로 state의 현재상태에 따라 UI를 보여주면 된다. 하지만 문제는 ..

지난 시간 컴포넌트 안의 컴포넌트 이렇게 중첩이 되어있으면 매우 복잡해진다. 따라서 조금 더 쉽게 구현할 수 있는 Context API문법을 이용할 것이다. Context API ? 리액트 내장 문법으로 모든 하위 컴포넌트들이 props 없이도 state(부모 값을) 사용가능하게 만들어주는 문법 Context 문법을 이용해 props없이 state 전송하기 App() 컴포넌트 밖에다가 코딩 (App.js) let 재고context = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12]); return ( ) } createContext()라는 함수를 이용해 변수 생성. 변수는 바로 특별한 가 된다! (App.js) let..

오늘은 상품의 재고가 몇개 남았는지 표시해볼 것이다. 일단 재고 데이터를 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! 이전..