상태관리 라이브러리 Reducx

Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다. Redux를 설치하면 JS 파일 하나에 state를 보관할 수 있는데, 이걸 모든 컴포넌트가 직접 꺼내 쓸 수 있다. 그래서 props 문법이 필요없어진다. 설치하기 https://ko.redux.js.org/introduction/getting-started/ Redux 홈페이지에서 설치하면 된다. 설치하기 전 확인사항 1 Redux를 설치하기 전, package.json에서 react와 react-dom의 버전을 확인해야 한다. 이 2가지 버전이 모두 18.1.X 이상이어야 Redux 사용이 가능하다. "react": "^18.1.0", "react-dom": "^18.1.0", 설치하기 전 확인사항 2 Red..

2022.11.12

React Axios

Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. 1. XMLHttpRequest 라는 옜날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 (추천) Axios를 설치해보자 https://axios-http.com/kr/docs/intro 터미널 열어서 npm 명령어를 입력한다. npm install axios Ajax GET 요청하는 법 1. axios를 상단에 import 하고 2. axios.get(url) 로 요청을 한다. 3. 가져온 데이터를 사용한다. import axios from '..

2022.11.12

Lifecycle과 useEffect

Component의 인생 Component는 Lifecycle이라는 개념이 있다. 이 Lifecycle에 맞춰 코드를 실행할 수 있다. 1. 생성 mount 2. 재 렌더링 update 3. 삭제 unmount Component 인생에 간섭하는 법 Detail 컴포넌트 등장 전에 이것좀 해줘 Detail 컴포넌트 사라지기 전에 이것좀 해줘 Detail 컴포넌트 업데이트 되고 나서 이것좀 해줘 이렇게 컴포넌트 라이프 사이클에 맞춰 코드를 실행해달라고 간섭할 수 있는데, 간섭은 갈고리를 달아서 한다. 갈고리는 영어로 hook, 그래서 이것을 Lifecycle hook 이라고 부른다. Lifecycle hook 사용법, useEffect() 상단에서 useEffect를 import 한다 콜백함수를 추가해서, ..

2022.11.12

react-router-dom URL parameter

URL parameter react-router-dom URL parameter를 이용하면 URL에 입력한 파라미터 값을 가져올 수 있다. 상품페이지 3개를 만든다고 생각해보자. 아래와 같이 Route를 3개 만드는 방법을 쓸 수 있다. 하지만 상품이 100만개라면..? URL parameter 문법을 사용하자! 링크걸기 페이지를 여러개 만들고 싶으면 URL parameter 문법을 사용할 수 있다. path 작명할 때 /:작명 이렇게 사용하면 /detail/작명 으로 접속했을때 해당 컴포넌트를 보여준다. URL parameter 가져오기 (참고) path 작명시 url 파라미터는 몇번이고 사용가능합니다. detail/:어쩌구/:저쩌구 가능 // 주소/detail/3 으로 접속한 경우 import { u..

2022.11.11

react router dom

/detail 로 접속하면 상세페이지를, /cart 로 접속하면 장바구니 페이지를 보여주자. 1. React에서 페이지를 나누는 방법 1. 컴포넌트를 만들어서 상세페이지 내용을 만든다. 2. /detail 로 접속하면 그 컴포넌트를 보여준다. 3. React-router-dom 라이브러리로 쉽게 구현할 수 있다. 2. React-router-dom 설치 https://v5.reactrouter.com/web/guides/quick-start 해당 사이트에서 제공하는 문서를 보고 설치하자. 찾기가 어렵다 npm install react-router-dom npm install react-router-dom@6 3. 셋팅하기 src/index.js 파일로 가서 로 을 감싸면 된다. // src/index.j..

2022.11.11

public, src 이미지 사용 시 경로, 사용법

React 에서 이미지 파일 사용하기 JSX에서 src폴더 내의 이미지를 사용하려면 상단에서 미리 import 해야 한다. public 폴더 내의 자료들은 절대경로로 자유롭게 사용할 수 있다. CSS 내에서 사용할때는 기존처럼 JSX 안에서 src 폴더의 이미지 사용 미리 import 해야 한다 import bg from './bg.png' function App () { return ( ) } JSX 안에서 public 폴더의 이미지 사용 절대 경로로 사용한다. 권장방법 하지만 아래와 같은 방식이 권장된다. 왜냐하면 배포 시 root가 아닌 특정 폴더 내에 배포할 경우 경로에 문제가 발생할 수 있다.

2022.11.11