props와달리 계속 props->props해서 안쓰고 좀더 다른방식으로 사용할 수 있는 방법 컴포넌트 > 컴포넌트 > 컴포넌트 이렇게 있을때 겉에 감싸주기만 하면 사용할 수 있다. import React,{useContext, useState} from 'react'; useContext를 가져와서 let 재고context = React.createContext() function App() { let [shoes,shoes변경] = useState(Data) let [재고,재고변경] = useState([10,11,12]) ......... 이와같이 context를 만들어준다 그리고 아래와같이 context.Provider로 감싸주고, 안에 useState에서 선언한 변수를 넣어준다. {/* 이안에서..
배포는 매우간단 요약 1.리액트를 빌드해서 브라우저가 해석할 수 있는 html,css,js로 만들어줘서 배포해야한다. 2.간단 테스트는 깃허브에해도되지만 여타 웹호스팅에하려면 결국 빌드한후 build/index.html을 보여주면된다. 3.package.json에 "homepage":"http://flykimjiwon.dothome.co.kr/shop" 이와같이 추가해준다. 4. npn run build yarn build 이와같은 명령어를 터미널에 입력하면 10초정도 걸리고 빌드가 완료된다. 그럼 build안에 있는 파일만 업로드하면끝 1)깃허브에하는경우 -본인아이디.github.io라는 레포지토리를 만든다. - build파일을 그대로 올린다. -본인아이디.github.io/index.html로 접속하..
- Component중첩 컴포넌트1 > 컴포넌트2 > 컴포넌트3 이런식으로 있으면 중첩으로 props를 계속 전달해주면된다. 컴포넌트1에 있는 state를 컴포넌트3에서 쓰고싶다? 그리고 변경함수까지 전부 props->props로 계속 전달할 수 있다. 대체방식으로는 redux같은것이 있지만 우선 알아두자 이런식으로 컴포넌트 1에있는 재고를 컴포넌트3에서 관리한다고 생각해보자 컴포넌트1-> 컴포넌트2 로 props 컴포넌트2-> 컴포넌트3 으로 props하면 될것이다. let [재고,재고변경] = useState([10,11,12]) 첫번째에 컴포넌트에 선언된, 가장상위 App컴포넌트에 선언된자료 그 안에있는 두번째 컴포넌트 Detail에 state랑 state변경함수 둘다 props로 전송해준다. {찾..
Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.제이쿼리 - $.ajax() 2.axios - axios.get() 3.자바스크립트 - fetch() 등을 사용한다. React는 axios 라이브러리를 사용한다. 요청종류 GET : 특정페이지 / 자료읽기 ->브라우저 URL에 넣으면 그냥 get요청임 POST: 로그인같은 서버로 중요 전보 전달할 때 yarn add axios npm install axios ps. 아래와같이 전부 ""로 되어있는 자료는 json형이라고한다. 오브젝트 자료형이 아님 하지만 출력은 다시 object로바뀜 [ { "id": 3, "title": "Flowey", "content": "only 5 inches", "price": 120000 }, { "id": 4, ..
- Lifecycle이라는 개념 컴포넌트는 1.생성 2.삭제 3.관련 state의 변경으로인한 재렌더링(업데이트)가 가능함 이와 관련해 Hook을 사용할 수 있다. 컴포넌트의 생성,사라짐,업데이트에 따라 여러 명령어를 사용할 수 있다는것 이러한것을 Lifecycle Hook이라고한다. class에서 사용할 수 있는데 이와같은기능을 신 문법에서는 useEffect를 사용할 수 있다. 아래와같이 useEffect를 불러오면 위에서 알아서 import를해온다. 안에는 콜백함수를 넣어서 사용하면 된다. let [alert,alert변경] = useState('my-alert3') // 나는 display none으로 되게하긴했음 let [alert2,alert2변경] = useState(true) let [in..
기본적으로, 리액트에서도 클래스네임을 사용해서 원래 사용하던방식으로 CSS스타일링을 할 수 있다. 하지만 리액트만의 편리함이나 방식도 기록하자 먼저 설치부터 리액트의 styled-conponents를 이용하기위해 yarn add styled-components npm install styled-components 둘중하나로 설치를하고 import styled from 'styled-components' 이와같이 상단에 불러온다. 사용하고싶은 컴포넌트 상단에 불러오면 된다. let 박스 = styled.div` padding:20px; ` let 제목 = styled.h4` font-size:25px; color:${props=>props.색상} ` 사용법은 이와같이 `` 를 사용하면되고 저 박스와 제목이..
이와같은 창에서 각 상품별로 상세페이지를 이동할때 라우팅을 사용하면 매우좋다. 부드럽게 작동하기도하고 별도의 페이지를 만들기보다 컴포넌트 형태로 이동할 수 있다. 리액트 라우터를 사용하려면 설치부터해야한다! npm install react-router-dom@5 yarn add react-router-dom@5 둘중 하나 사용해주면된다, 구글 검색하면서 세팅하도록하자 그리고 index.js에서 아래와같이 세팅해줘야함 import { BrowserRouter } from 'react-router-dom' // 이거 하나를 불러와 줘야한다. /같은 경로없이 불러오는건 라이브러리다. // import { HashRouter } from 'react-router-dom' // 이와같이해도된다. 이건 주소에 #기..
위와같은결과물을 만들기위해 간단한 부트스트랩사용이후 상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 이게 데이터정보 import Data from './data.js' function App() { let [shoes,shoes변경] = u..