코딩왕랄프👊🏻

이번에는 redux 와 redux-toolkit 을 사용하는 방법을 알아보겠습니다. 1. 리덕스 및 리덕스 툴킷 설치 npm install @reduxjs/toolkit react-redux 2. 리덕스 경로 설정 /store 폴더 생성 /store 내 /slices 폴더 생성 3. 리듀서 생성 slices 폴더 내 propertyTypeSlice 생성 import { createSlice } from '@reduxjs/toolkit'; const initialState = ''; export const propertyTypeSlice = createSlice({ name: 'propertyType', initialState, reducers: { setPropertyType(state, action) ..

Redux란 ? Redux 는 React에서 주로 사용하는 상태 관리 라이브러리 입니다. Redux 를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다. 다음은 Redux에서 주로 접하게 되는 키워드 들에 대해 알아보겠습니다. Action 액션 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데 액션 객체는 다음과 같은 형식으로 이뤄져있습니다. 액션은 type 필드는 필수로 가지고 있어야 하고, 그 외에는 자유롭게 넣을 수 있습니다. { type: "CHANGE_INPUT", text: "안녕하세요" } { type: "ADD_TODO", data: { ..

1. brew isntall nginx 2. vim /usr/local/etc/nginx/nginx.conf 3. brew services restart nginx 4. localhost:3000에 접근

컴퓨터에서 실행한 React 프로젝트를 휴대폰이나 테블릿으로 확인하는 방법을 알아보자. 우선 npm start를 통해 리액트를 실행하고, 포트 번호를 확인한다(보통은 3000) 그리고, 윈도우에서는 cmd를 켜서 ipconfig로 검색 -> IPv4주소를 확인한다. 맥북에서는 터미널을 켜서 ipconfig getifaddr en0을 검색 -> ip주소를 확인한다. 주소창에다가 " http://ip주소:포트번호 " 검색하면 리액트 실행화면을 확인할 수 있다.

React에서 Fontawesome 을 사용하는 방법에 대해 알아보자. 1. font-awesome 설치 다음은 무료 아이콘들 종류를 모두 모아 놓은 것이다. npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons 2. 파일에 import 하기 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSearch } from "@fortawesome/free-sol..

React에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트는 다음과 같이 작성될 수 있다. const MyComponent = () =>{ return hello } export defalt MyComponent;