React (18) 썸네일형 리스트형 [React] 리덕스의 작동원리 : 이론 리덕스는 어떤 원리로 작동되는가? 이것을 알아보기전에 한 가지 알아야 할 것이 있다면, 리덕스는 Central Data Store(중앙 데이터 관리실)를 가진다는 것이다. 리덕스를 사용하는경우 하나 이상의 Store를 가지지 않는다는 점을 유의하자. 그렇다면, 우리는 이 하나의 스토어를 가지고 무엇을하는가? 우리는 Store를 가지고 무얼하는가? : 결론적으로 말하자면, 이 스토어안에 데이터를 저장하고, 다른 컴포넌트들은 이 스토어안에 있는 데이터를 받아와서 사용한다. 이렇게 스토어에 있는 데이터를 컴포넌트가 받아와서 사용하는 행위를 Subscription이라고 한다. 컴포넌트는 스토어에 Subscription 을 하고, 이렇게 했을 경우 스토어안에 있는 데이터가 변경될 때마다, 스토어는 구독중인 컴포넌.. [react] state의 3가지 정의, 리액트 콘텍스트의 2가지 단점 [내가 보기 위해 정리하는 강의자료] 리덕스란 무엇일까? A state management system for cross-component or app-wide state. 스테이트에는 3가지 정의가 있다. local State, Cross-Component State, App-Wide State. local State : 하나의 컴포넌트가 바뀌는데에 영향을 미치는 데이터이다. 이것은 하나의 컴포넌트에 종속되어 있다. 우리는 이런 state를 useState와 useReducer를 통해서 조작할 수 있다. Cross-Component State : 이것은 여러가지 컴포넌트에 영향을 미치는 state이다. 이것을 사용하기 위해서는 prop chains혹은 prop drilling을 활용해서 데이터를 부모 .. [React] 라우팅이란 라우팅이란 무엇일까? 라우팅을 이야기하기전에 먼저 알아야 할 것이 있다. 바로 SPA(single page application)이다. 이것은 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이다. 그러니까 하나의 페이지만 가지고서 그 안에서 다양한 모습을 보여주는 방식인 것이다. 여기서 궁금증이 생길만한 부분이 있다. 왜 굳이 하나의 페이지만 가지고 이용을 하려고 하는 것일까? 전통적인 웹사이트의 경우, 다양한 페이지들을 로드한다. 로그인 페이지를 예로 들어보자. 만약에 로그인 내용을 입력하다가 잠시 뒤로 가기를 다녀오면, 기존에 적었던 내용들이 다 사라져버린다. 이것은 로그인페이지와 그 전 페이지가 다른 html파일로 이루어져 있기 때문이다. html을 다시 불러오기 때문에, 모든 내용들이 .. [React] ref사용하기 일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다. [출처 : React] ref는 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우, 그리고 어떤 일이 일어나게 할 때 사용될 수 있다. 일반적으로 useRef를 사용하는 방법은 1)ref를 생성하고 2)요소에 ref를 적용하고 3)ref에 원하는 메.. [React] 리덕스 훅 useSelector, useDispatch //Bucket.js import {useSelector,useDispatch} from "react-redux"//리덕스 훅을 가져온다. const BucketList = (props) => { const bucket_list = useSelector(state => state.bucket.list); //useSelector를 이용해서 리덕스에 저장된 값을 직접가져온다. } 리덕스를 사용하면 전역에서 데이터를 가져와서 사용할 수 있다고 했다. 그렇게되면 메인 컴포넌트가 아닌 다른 곳에서도 props를 이용하지 않고서도 데이터를 가져올 수 있게 된다. 이것을 위해서 리덕스 훅을 사용한다. [React] 리덕스에서 만든 데이터를 컴포넌트에서 사용하기 리액트를 공부하면서 배운 것이 있다면, 순서의 중요성이다. 데이터를 컴포넌트에서 사용하려 할 때에도 우리가 지켜줘야 할 순서가 있다. 리덕스 모듈과 connect 함수를 불러온다. 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다. (dispatch를 사용하겠다는 말이다) connect로 컴포넌트와 스토어를 엮어준다. 콘솔에 this.props를 찍어본다. (스토어에 있는 값이 잘나왔는지 확인한다) this.state에 있는 기존의 값을 지우고 스토어에 있는 값으로 바꿔보자. 1.리덕스 모듈과 connect함수를 불러온다 : connect함수는 우리가 리덕스에서 만든 데이터와 컴포넌트를 연결시켜주는 역할을 하는 함수이다. 우선 리덕스로부터 connect함수를 가져온다. import {c.. [React] 리덕스- Store 만들고, 사용하기 1)import해와야 되는 내용들을 import하기 리덕스에서 기본적으로 제공하는 틀이 있다. import {createStore, combineReducers} from "redux"; //리덕스에서 제공하는 기능들을 가져온다. import bucket from "./modules/bucket"; // 우리가 만든 모듈에서 요소를 가져온다. 맨 위에 이렇게 리덕스에서 기본적으로 제공하는 기능을 가져오고, 우리가 만들었던 모듈의 요소를 가지고 온다. 2)Reducer를 하나로 합쳐서 Store에 넘겨주기 스토어를 만들때는 우리가 지켜줘야 할 원칙이 있다. 한 스토어에는 하나의 리듀서만 들어갈 수 있다는 것이다. 그렇다면, 만약 여러개의 리듀서가 있다면 어떻게 해야하는 걸까? 여러개의 리듀서를 하나로 합쳐.. [React] export와 export default의 차이 export default : 컴포넌트를 다른 곳에서 사용하기 위해서 export default를 한다. 이렇게 하면 다른 곳에서 사용할 때, 중괄호 없이 가져온다. 아래의 코드는 Bucket.js라는 컴포넌트에서 App.js 컴포넌트로 보낸 예시이다. import해올 때, 중괄호가 없다는 것을 알 수 있다. 특징이 있다면, 하나만 가지고 올 수 있다는 것이다. -> Bucket.js export default Bucket -> App.js import Bucket from "./Bucket.js" export : 그냥 export만 사용한 경우에는 중괄호를 통해서 가져올 수 있다. 아래에서는 Bucket.js라는 컴포넌트에서 만든 함수 withBucket를 export해주었고, 그것을 App.js에서 .. 이전 1 2 3 다음
