MD 기록저장소

컴포넌트가 많아지면 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..

리액트를 사용하는 이유 중 데이터바인딩이 쉽다는 것이 있었습니다. 특히 state를 활용하여 데이터 바인딩을 하면 재렌더링도 자동으로 수월하게 되기 때문에 무척 편리했습니다. 그런데 state를 이용하여 데이터바인딩을 할 때 주의할 점이 하나 있습니다. 바로 부모 컴포넌트의 state는 바로 자식 컴포넌트에서 사용할 수 없다는 것입니다. 부모 컴포넌트와 자식 컴포넌트의 관계는 다음과 같습니다. 쉽게 말해서 큰 컴포넌트 안에 작은 컴포넌트를 집어넣으면 부모-자식 관계가 되는 것입니다. 이런 관계에서 자식 컴포넌트가 부모 컴포넌트의 state를 사용하기 위해서는 props를 이용해야합니다. ⭐️ props 사용법 props를 사용하기 위해서는 어떻게 해야될까요. 이것을 공부하기 위해 간단한 예제 코드를 보겠..

리액트에서도 반복문을 사용할 수 가 있습니다. 다만 일반적으로 반복문을 만들 때 사용하는 for는 사용할 수 없습니다. JSX { } 중괄호 안에서 for를 사용할 수 없기 때문입니다. 이를 극복하기 위해서 map 함수를 사용합니다. function App() { let [title, setTitle] = useState(['강남 우동 맛집', '강남 햄버거 맛집', '수원 갈비 맛집']); return ( ... { title.map( ()=>{ return ( { title[0] } 1월 20일 ) }) } ) }; map을 사용할 때도 중괄호 안에 넣어준 상태에서 해줘야 합니다. 위의 코드를 예시로 보면 현재 title이라는 state에는 자료를 세 개 가진 array가 들어가 있습니다. 따라서 반..

리액트에는 Component 라는 개념이 있습니다. 복잡한 HTML(JSX)을 간단하게 한 단어로 치환해서 사용하는 개념입니다. 이에 대해 공부해보겠습니다. function App() { return ( Title Date Content ) } modal이라는 UI를 만들기 위해 JSX를 작성했습니다. 그런데 이렇게 만드는 것은 조금 비효율적입니다. 쓸 때마다 저 코드를 반복해서 적어야 하므로 코드가 길어지기 때문입니다. 이를 보완하기 위해 컴포넌트를 사용해보겠습니다. function App() { return ( ) } function Modal() { return ( Title Date Content ) } 컴포넌트는 함수 형식으로 만듭니다. 그리고 return ( ) 소괄호 안에 자신이 적고 싶은 ..

리액트에서 state를 변경하는 방법에 대해서 공부해보겠습니다. 리액트에서 state를 변경할 때는 useState를 통해 데이터를 담을 때 같이 생성되는 변경에 사용되는 함수를 이용하면 됩니다. let [a, b] = useState('저장할 데이터'); a에는 저장할 데이터가 담기고 b에는 저장할 데이터를 변경하는 함수가 담긴다고 했습니다. state를 변경할 때는 b를 활용하면 됩니다. let [a, b] = useState(0); { b(a+1) } }>증가 { a } useState함수를 이용해서 초기 state에 0을 넣었습니다. 그리고 버튼을 클릭할 때마다 이 숫자가 하나씩 커지게 하고 싶습니다. HTML에서 이벤트리스너를 주듯이 JSX에서도 사용할 수 있습니다. 다만 onclick이 아니라..