MD 기록저장소

리덕스에 있는 state를 꺼내쓰려면 state를 props화 해주는 함수를 사용해야하는 등 코드가 조금 복잡해집니다. 이것을 간단하게 해주는 방법에 대해서 알아보겠습니다. 1️⃣ useSelector 훅 사용하기 우선 useSelector 훅을 사용하기 위해서는 우선 import를 해줘야 합니다. import {useSelector} from 'react-redux' 를 import 해주는 곳에 입력해줍니다. useSelector는 다음과 같이 사용합니다. const state = useSelector((state) => state); useSelector를 사용하면 그 자리에 redux state가 남게 됩니다. 그것을 변수에 할당해서 사용하는 것입니다. 콜백함수의 파라미터 자리에는 파라미터가 한 개..

리덕스에서는 state를 reducer 함수에 저장하고 그것에 대한 수정방법을 같이 저장해놓은 다음 state 수정 동작을 하는 곳에서 dispatch()를 이용해서 state를 수정했었습니다. 그런데 dispatch는 또 다른 기능을 할 수가 있습니다. 바로 dispatch 할 때 데이터를 전송하는 것입니다. 이에 대해 공부해보겠습니다. 1️⃣ dispatch 이용해서 데이터를 보내는 법 dispatch는 보통 이렇게 사용했습니다. props.dispatch({type: '추가'}) 그런데 이 기능에다가 추가해서 데이터를 보내는 방법은 무엇일까요? dispatch를 이용하여 데이터를 보내기 위해서는 다음과 같이 하면 됩니다. props.dispatch({type: '추가', payload: {name:..

리덕스를 사용하기 위해서는 state를 reducer에 넣고 reducer를 store에 저장했습니다. reducer에는 state를 수정하는 방법도 담겨져 있었습니다. 그렇다면 state를 하나가 아니라 여러 개를 만들고 싶다면 어떻게 해야될까요? 이에 대해 공부해보겠습니다. 1️⃣ state 하나 더 만드는 법 state를 처음에 만든 방법과 동일하게 만들면 됩니다. state를 변수에 담아서 하나 더 만들면 됩니다. useState 같은 것들을 사용하지 않아도 됩니다. 2️⃣ reducer 하나 더 만드는 법 state를 하나 더 만들었으니 reducer도 하나 더 만들어줘야 합니다. 리덕스에서 state와 reducer는 세트 개념이라고 생각하면 좋습니다. reducer를 하나 더 만드는 법도 역..

리덕스를 쓰는 이유는 크게 두 가지입니다. 첫째는 props를 사용하지 않고 데이터를 전송하기 위함입니다. 둘째는 오늘 공부해 볼 내용인 상태관리에 유용하기 때문입니다. 리덕스에서 상태관리를 하는 법에 대해서 공부해보겠습니다. 리덕스에서 데이터를 수정할 때는 useState를 사용했을 때 자동으로 생성되는 state 변경함수를 사용하지 않습니다. 리덕스를 통해 데이터를 수정하는 방법은 두 단계로 나뉘어져 있습니다. index.js 에 reducer 함수를 만들어 줍니다. 원하는 곳에서 dispatch 함수를 통해 reducer 함수에서 미리 정의한 데이터 수정방법을 불러옵니다. 1️⃣ reducer 함수 만들기 reducer함수는 index.js에 생성합니다. reducer 안에는 stated의 초기값과..

컴포넌트가 많아지면 props를 통해 데이터를 전달하기가 몹시 복잡해집니다. 이런 복잡함을 조금은 덜기 위해 Redux 라는 라이브러리를 사용합니다. Redux 라이브러리에 대해서 공부해보겠습니다. 1️⃣ Redux 세팅법 ① 우선 리덕스를 사용하기 위해서는 라이브러리를 설치해야합니다. 터미널에 yarn add redux react-redux 를 입력해줍니다. redux 와 react-redux 두 개의 라이브러리를 설치하는 명령어입니다. redux는 데이터를 엄격하게 관리하는 기능, react-redux는 리덕스를 리액트에서 사용할 수 있게 도와주는 기능을 제공합니다. ② 라이브러리 설치가 끝났다면 프로젝트 디렉토리에서 index.js 를 열어줍니다. 그리고 맨 상단에 다음과 같은 코드를 적어줍니다. ..

컴포넌트에는 LifeCycle이 있습니다. 어떤 사이클이 있냐면 1. 생성되거나 2. 삭제되거나 3. 업데이트 되거나 세 가지의 사이클이 있습니다. 이런 사이클 중간중간에 Hook을 걸어줄 수 있습니다. 이 때 Hook은 사이클 중간중간에 컴포넌트에게 새로운 동작을 수행하게 만드는 역할을 담당합니다. 이 때 걸어주는 Hook을 LifeCycle Hook 이라 부릅니다. 함수형 컴포넌트를 사용하는 시대가 되고부터 라이프사이클 훅을 사용할 때 useEffect 라는 것을 사용합니다. useState를 사용하기 전에 import 했던 방식과 동일하게 import를 해주고 사용하고 싶은 컴포넌트에 바로 사용해주면 됩니다. import React, { useState, useEffect } from 'react'..

리액트 라우터의 기능 중 url 파라미터 기능과 useParams 훅 사용법에 대해서 공부해보겠습니다. 라우터 기능을 이용해서 path를 통해 여러 페이지를 만들 때 path="/detail" 이런 식으로 입력해줬습니다. 그런데 만약 보여줘야 할 페이지가 100개라면 path="detail/0" , path="detail/1" 이런 식으로 100개를 코드를 적는 것은 굉장히 비효율적입니다. 이를 보다 편리하게 가능하게 해주는 것이 url 파라미터 입니다. 사용법은 다음과 같습니다. 라우터를 사용할 때 :id 를 붙여줍니다. id 자리에 어떤 것이 오더라도 그 id가 적힌 페이지로 이동하겠다는 의미입니다. 꼭 id 라고 적을 필요는 없고 자유롭게 작성하면 됩니다. import React from 'reac..

이번엔 리액트 라우터의 기능 중 Link, History에 대해 알아보겠습니다. ① 태그 사용법 Ex) Home 사용하고 싶은 태그 안에 태그를 넣어주면 됩니다. ② History 사용법 우선 History를 사용하기 위해서는 이 기능을 사용하고자 하는 js 파일 상단에 다음과 같은 코드를 넣어줘야 합니다. import { useHistory } from "react-router-dom"; useState를 통해 state를 만들 때와 유사합니다. react-router-dom이라는 라이브러리로부터 useHistory 훅을 사용하겠다는 코드입니다. 일단 이렇게 import를 해놓고 아무 변수에 useHistory() 함수를 저장하면 됩니다. let history = useHistory(); 그러면 이제 ..

리액트 라우터는 여러 페이지를 만들고 싶을 때 사용합니다. 이에 대해서 공부해보겠습니다. 1️⃣ 설치하기 리액트 라우터를 사용하기 위해서는 react-router-dom이라는 공식 라이브러리를 설치해야합니다. yarn add react-router-dom@5 -> yarn이 설치되어 있는 경우 npm install react-router-dom@5 -> yarn이 설치가 안 되어 있는 경우 이렇게 터미널에 입력해주면 react-router-dom이라는 라이브러리가 설치가 됩니다. 그리고 나서 이제 index.js 파일에 가서 다음과 같이 입력해줘야 합니다. import { BrowserRouter } from 'react-router-dom'; 그리고 ReactDom.render 부분도 다음과 같이 수정..

사용자가 입력한 input 역시 중요한 데이터이기 때문에 state에 보관하는 것이 일반적입니다. 그런데 입력하고 나서 그것이 저장되지 않는다면 아무런 의미가 없을 것입니다. 이번에는 사용자가 input에 입력한 값을 저장하는 방법에 대해 공부해보겠습니다. function App (){ let [inputVal, setInputVal] = useState(''); return ( ... ) } 우선 inputVal이라는 비어있는 state를 만들었습니다. 저렇게 비어있는 문자열을 이용하면 비어있는 초기 state를 만들 수 있습니다. 사용자가 input에 어떤 값을 입력했는지 알아내기 위해서는 onChange 이벤트핸들러를 이용하면 됩니다. onChange 이벤트핸들러를 input에 주게 되면 input..