본문 바로가기

React44

React context API 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에서 선언한 변수를 넣어준다. {/* 이안에서.. 2022. 1. 16.
React 배포(build) 배포는 매우간단 요약 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로 접속하.. 2022. 1. 16.
React Component중첩, props, state - 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로 전송해준다. {찾.. 2022. 1. 15.
React Ajax 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, .. 2022. 1. 15.
React useEffect - 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.. 2022. 1. 15.
React Style(CSS,SASS) 기본적으로, 리액트에서도 클래스네임을 사용해서 원래 사용하던방식으로 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.색상} ` 사용법은 이와같이 `` 를 사용하면되고 저 박스와 제목이.. 2022. 1. 14.

티스토리툴바