분류 전체보기
-
[Redux] state와 reducer가 더 필요한 상황에서 접근 방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 11:05
다른 정보도 state로 만들고 싶다면? 변수를 만들어서, reducer 함수에 기본값으로 전달하는 것은 동일하고, createStore에 넣을 때 주의해야한다. let store = createStore(combineReducers({reducer, reducer2})); combineReducers를 이용해 object 자료형으로 넣어준다. combineReducers는 상단에 import해와야 한다. import { createStore, combineReducers} from 'redux'; reducer를 몇개 합치면 store 데이터 뽑아쓸 때 주의해야한다. redux store에 온갖 데이터 저장을 하지 않는다는 것이 중요하다! 공통으로 사용되는 데이터를 저장해야한다. 컴포넌트 하나에서만 쓰..
-
[Redux] Reducer 셋팅법, dispatch로 데이터 수정방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 00:44
Reducer 셋팅법 let defaultState = [ { id: 0, name: 'White and Black', quantity: 2 }, { id: 2, name: 'Grey Yordan', quantity: 5 }, { id: 3, name: 'Flowey', quantity: 3 } ]; const reducer = (state = defaultState, action) => { if() { return 수정된 state } else { return state } } let store = createStore(reducer); 이런 식으로 앞에 코드를 변경해준다. Reducer는 수정된 state를 뱉어주는 함수이다. 인자에 값을 입력하지 않으면 ,default 값을 줄 수 있도록 state..
-
[Redux] redux 용도 및 설치방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 21. 23:12
Redux는 Context API와 비슷한 역할을 하며, 복잡한 하위컴포넌트를 만들 때 props 전송없이 바로 state 데이터 접근해서 사용할 수 있다. props전송없이도 모든 컴포넌트들이 state 사용할 수 있게 해준다. redux 용도 1. props 전송귀찮아서! 깊은 하위컴포넌트들도 props 여러번 전송없이 state를 직접 가져다가 쓸 수 있다. 컴포넌트 많은 사이트에서 편리하다! 2. 데이터 관리 용이 redux에서는 state 데이터의 수정방법을 미리 정의한다. 설치방법 1. yarn add redux react-redux 2. index.js에 다음 명령어 설치 import {Provider} from 'react-redux'; 3. 로 감싸기 Provider로 감싼 모든 컴포넌트..
-
[React] props 대신 context API 사용하기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 20. 15:54
하위 컴포넌트들이 props 없어도 부모의 값을 사용가능하다. 방법 1. React.createContext() context 만들기 createContext는 같은 변수값을 공유할 범위를 생성해준다. 2. 같은 값을 공유할 HTML을 범위로 싸매기 3. useContext(범위이름)로 공유된 값 사용하기 간단한 데이터 전송은 간단한 props를 쓰고, 컴포넌트 안에 컴포넌트 안에 컴포넌트 .. 이런 경우에는 context가 도움될 수 있다. 다른 파일에 값을 공유하고 싶으면, export와 import를 사용한다. Redux라는 라이브러리 : 모든 컴포넌트파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능하다. + state 데이터 관리 기능
-
[React] Component 중첩 시 state 전달🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 19. 22:46
컴포넌트 중첩 시 state 전달 중요한 데이터들은 상위컴포넌트에 모아놓는 것이 좋다. 위에서 밑으로 데이터가 흐르기 때문이다! 밑에서 위로 데이터가 가는 건 좋지 않다. 하위까지 props로 전달했었는데 하위의 하위도 props로 전달한다. 주문하기 버튼을 누르면 재고 state에서 1을 빼려면? - 재고변경() 함수를 부모컴포넌트 App.js가 가지고 있으므로 props로 전송해줘야한다. 정리 하위 컴포넌트가 몇개든 데이터를 전송하려면 props를 쓴다. 하위 컴포넌트가 상위 컴포넌트 state 변경하려면 state 변경함수 쓴다. => 그게 상위 컴포넌트에 있으면 props로 전송한다. => 컴포넌트 개수만큼 앱이 복잡해진다. => Context API나 redux로 데이터 전송이 아니라, 부모 컴..
-
[React] Ajax란? Ajax 요청방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 19. 13:53
Ajax 서버에 새로고침없이 요청을 할 수 있게 도와준다. 서버는 누군가 페이지 요청하면 페이지를 가져다준다. 요청 2가지 방법 1. 주소창에 url 입력 => GET요청 (특정 페이지 / 자료 읽기) 2. POST (중요정보 전달) ex) 아이디, 비번 => 원래 GET/POST 요청할 때마다 항상 새로고침된다. but, Ajax는 새로고침 없이 요청할 수 있게 해준다. 사용방법 1. jQuery 설치 $.ajax() 2. axios 설치 axios.get() (리액트, 뷰에서 주로 사용) 3. 순수자바스크립트 fetch() axios 라이브러리 설치 1. yarn add axios 2. import axios from 'axios'; 3. axios.get(데이터 요청 Url) // 서버 개발자에게 ..
-
[React] 컴포넌트의 Lifecycle🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 18. 07:34
배경 컴포넌트의 인생.. 컴포넌트는 어떻게 살다가 죽을까? 생성되었다가 다른 페이지로 넘어가면 삭제되기도 한다! state가 바뀌면 업데이트(재렌더링)가 되기도 한다! 중간중간 Hook을 걸 수 있다. (삭제전에 이거 해줘! 이 컴포넌트 등장 전에 이거해줘!) => Hook으로 컴포넌트 인생 중간에 명령을 줄 수 있다. 예전에 class로 컴포넌트 만들었을 때! 주로 쓰는 라이프사이클 훅은 아래와 같았다. class Modal extends React.Component { componentDidMount() { // Modal 컴포넌트가 Mount(등장)했을 때 실행할 코드 ex) ajax 주로 사용한다 } componentWillUnmount() { // Modal 컴포넌트가 사라지기 직전에 실행할 코..
-
[오류처리] node-sass 설치오류, version 문제 해결🔥𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆/🌊𝗧𝗜𝗟 2021. 9. 17. 21:36
에러 상황 1. yarn add node-sass로 설치했는데 6.0.1 버전은 지원하지 않고 4.0.0이나 5.0.0을 써야한다고 나왔다. 2. yarn remove node-sass했으나 명령이 듣지 않았다. package.json이 아니다? 이런식으로 나왔다. 3. 검색후 나온 방법인 yarn add node-sass@5.0.0 을 쳤더니 아래와 같은 에러가 나왔다. (너무 길어서 아래 부분만 올렸다) 1 error generated. make: *** [Release/obj.target/binding/src/binding.o] Error 1 gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stac..