React
-
Redux state와 reducer 더 만들기React 2022. 3. 23. 15:47
state 와 reducer을 더 만드려면 import { combineReducers, createStore } from 'redux'; let alert초기값 = true; function reducer2(state = alert초기값, 액션){ return state } let 기본state = [ { id : 0, name : '멋진신발', quan : 2 }, { id : 1, name : '멋진신발2', quan : 1} ]; function reducer(state = 기본state, 액션) { if ( 액션.type === '수량증가' ) {//수량증가라는 데이터수정방법을 정의한 것 let copy = [...state]; copy[0].quan++; return copy } else if..
-
Redux reducer와 dispatch로 데이터 수정React 2022. 3. 23. 15:17
redux를 쓰는 두번째 이유는 state의 데이터 관리가 가능하다. redux에선 state 데이터의 수정방법을 미리 정의한다. 먼저, 셋팅을 해보면, let 기본state = [ { id : 0, name : '멋진신발', quan : 2 }, { id : 1, name : '멋진신발2', quan : 1} ]; function reducer(state = 기본state, 액션) { //state=기본state에서 기본state는 default parameter문법인데, 등호를 붙여서 파라미터에 //뭘 입력하지 않으면 기본으로 담아진다. 즉, state초기값을 기본state자리에 넣으면 된다. return state } let store = createStore(reducer); 위처럼, 기본stat..
-
Redux (props 하기 귀찮을 때)React 2022. 3. 23. 14:08
App.js파일에서 Cart.js라는 파일로 데이터를 옮길 때 props가 귀찮으면 redux가 있다. Redux란 props 없이 모든 컴포넌트가 state를 갖다쓰기 가능하게 한다. 먼저, 설치를 해보자 npm install redux react-redux //yarn add redux react-redux 설치한 후에, index.js에 들어가서 기본 셋팅을 해주어야 한다. import {Provider} from 'react-redux'; import { createStore } from 'redux'; let store = createStore(()=>{ return [{ id : 0, name : '멋진신발', quan : 2 }] }); ReactDOM.render( , document.ge..
-
Tab UI / AnimationReact 2022. 3. 22. 19:19
Tab UI는 밑에 처럼 만들어서 첫 버튼을 누르면 첫 div가 두번째 버튼을 누르면 두번째 div가 보여지게 만든다 {/* tab기능만들기 */} 만드는 방법은 몇번째 버튼 눌렀는지 state로 저장해두고, state에 따라 UI를 보이게 안보이게 한다. 위의 버튼말고 부트스트랩을 이용해서 만들어보자. import {Nav} from 'react-bootstrap'; function Detail() { return ( Active Option 2 Option 3 ) } 이렇게 UI를 만들어보고 기능을 구현해보자 Nav의 defaultActiveKey="link-0"은 기본으로 눌러진 버튼의 eventKey를 뜻한다. 페이지를 방문했을 때 기본으로 눌러진 키를 뜻한다. 그리고 각각에 eventKey="l..
-
props 대신 Context APIReact 2022. 3. 22. 17:18
App.js의 state를 하위 컴포넌트 안에 있는 컴포넌트에서 쓰려면 props활용이 많아서 복잡해진다. props 대신 context를 쓰면 하위 컴포넌트들이 props 없이도 부모의 값을 사용가능하다. context만드는 방법은 먼저, React.createContext()를 App함수 위에 만들어준다. let 재고context = React.createContext(); //let 작명 = React.createContext(); createContext는 같은 변수값을 공유할 범위를 생성한다. 그리고 여기선 그 범위 이름을 재고context라고 지었다. 그리고나서, 같은 값을 공유할 HTML을 범위로 싸매야한다. import { useContext } from 'react'; let 재고cont..
-
만든 리액트 사이트 build해서 github배포React 2022. 3. 22. 16:00
먼저, 터미널에 build를 해주어야 한다. npm run build //또는 yarn build 를 적어 build해준다. 우리가 작성한 컴포넌트 props문법들은 브라우저가 해석할 수 없으므로 그대로 배포할 수 없다. 그래서 이런 문법들을 전통 css, html, js으로 바꿔주는 작업이 필요하다. 그런 다음, 깃허브에 로그인하고 우측상단에 New Repository를 눌러 노란 곳(Repository name)에 자기아이디.github.io를 입력하고 README파일 생성도 체크한 뒤에 생성해준다. 마지막으로, repository 에 build폴더가 아니라 build폴더 안의 내용물을 드래그 앤 드롭하고, http://자기아이디/github.io로 들어가면 사이트가 보인다. 그리고 만약, 다른 ht..
-
component가 3개 중첩되면 state전달React 2022. 3. 21. 21:59
App.js가 있고 Detail.js가 있어서 state를 받아올 수 있다. 여기서 Detail.js에 또 컴포넌트를 만들면 App.js에서 3번째 컴포넌트로 state를 어떻게 전달할까? //App.js function App() { let [재고, 재고변경] = useState([10,11,12]); return ( ) };//App의 state를 작명해서 내보냄 //Detail.js function Detail(props) { return ( //재고라고 작명하고 props.재고로 받아서 내보냄 ) } function 재고(props) { return ( 재고 : {props.재고[0]} ) }; 이렇게 props로 계속 보내서 사용할 수 있다. 받아온걸 props로 다시 작명해 보내고 다시 pro..
-
리액트에서의 ajaxReact 2022. 3. 21. 19:25
리액트와는 axios가 호환이 잘 맞아서 사용해보도록 하자. npm install axios //또는 yarn add axios 로 먼저 axios를 설치해준다. import axios from 'axios'; 그러고, 상단에 axios를 import 해온다. 버튼을 누르면 데이터를 가져오는 코드를 예제로 만들어보자 { axios.get('https://codingapple1.github.io/shop/data2.json') .then((result)=>{ console.log(result.data);//result는 성공시 성공한 이유와 등등 가져옴 따라서 .data적어주기 })//성공시 .catch(()=>{ console.log('실패했어요'); })//실패시 } }>더보기 이렇게 버튼에 onCli..