HB HB

목차 1. redux 기본 설정 2. redux 사용하기 : createStore, Provider, useSelector, useDispatch 1. redux 기본설정 npm i redux npm i react-redux // 리액트 외부 라이브러리인 redux를 리액트와 연결해주기 위해서 npm i react-devtools-extension // 개발단계에서 크롬에서 리덕스 개발자도구 사용하기 위해서 필요한 파일 1. useStore.jsx 2. reducer.js (보통 rootReducer와 +@로 나눠서 씀) 3. index.js (최상단에 Store 컴포넌트 삽입) 2. redux 사용하기 1. createStore를 사용하여 전역상태관리를 할 수 있는 store 객체를 생성함 create..

목차 1. react-router-dom 기본설정 2. 컴포넌트 작성 3. useNavigate 사용해보기 1. react-router-dom 기본설정 (1) 터미널에서 react-router-dom을 설치한다. npm i react-router-dom 컴포넌트 구조는 아래와 같다 index.js > App.jsx > Header.jsx(여기 페이지를 이동할 메뉴링크 삽입) + 페이지 별 최상위컴포넌트.jsx (2) App.jsx에서 react-router-dom 가져오기 import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom' 라우터를 나누는데 필요한 BrowserRouter, Routes, Route 를 가져온다. ..

1. 커스텀훅이란? 리액트에서 함수형 컴포넌트를 쓸 때 상태관리나 생명주기관리 등을 위해서 사용하는 것이 리액트에서 제공하는 useState, useEffect와 같은 내장 훅이다. 이런 훅을 개발자가 자기의 입맛대로 커스텀해서 사용하는 것을 커스텀 훅이라고 한다. 자주 사용하는 패턴이 있을 때 코드의 중복을 피하기 위해서는 각 패턴별로 필요한 처리를 별도의 파일로 빼두었다가 필요한 곳에서 import해서 사용하는 것이 효율적이기때문에 커스텀훅을 사용하는 것이 좋다. 이때문에 커스텀훅을 만들 때 가장 중요한 것은 재활용성이 높도록 작성을 하는 것이다. 오늘 배운 form 컴포넌트로 예를 들어보면 회원가입, 로그인, 글쓰기, 글수정 등등.. form엘리먼트를 사용하는 곳이라면 어디든 불러와 활용할 수 있게..

https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 목차 1. 리액트의 개념 1-1. 리액트란? 1-2. 기본 세팅 2. 리액트 시작하기 2-0. ReactDOM.render() 2-1. 컴포넌트 만들기(1) : Class 2-2. 컴포넌트 만들기(2) : Function 2-3. Props & State 2-4. lifecycle 1. 리액트의 개념 1-1. 리액트란? 자바스크립트 라이브러리... 이지만 프레임워크라고 해도 됨. 페이스북에서 만든 오픈소스 프로젝트 프론트엔드에서 사용자 인터페이스(UI)를 만드는데 사용됨 ..