본문 바로가기

ALL

(119)

리덕스(Redux)에 대해 알아보자 리덕스(Redux) 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리 글로벌 상태 관리 => Context API, useReducer와 유사 리덕스를 사용하는 것과 Context API를 사용하는 것의 차이 리덕스는,,, 미들웨어 유용한 함수(connect)와 Hooks(useSelector, useDispatch, useStore) 하나의 커다란 상태 (모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어 사용) concat: 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있다. useSelector, useDispatch, useStore: 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 있다. 리덕스는 언제 써야 할까? 프로젝트의 규모가 큰가? Y..

React 공부하기(5) - 리액트 라우터 react-router를 통한 리액트 싱글 페이지 어플리케이션 만들기 1. 기본적인 사용법 $ yarn add react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기 import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; // * App 을 BrowserRouter 로 감싸기 ReactDOM.render( , document.getElementById(..

React 공부하기(4) - API 연동하기 1. API 연동의 기본 $ yarn add axios GET: 데이터 조회 POST: 데이터 등록 PUT: 데이터 수정 DELETE: 데이터 제거 import axios from 'axios'; axios.get('/users/1'); axios.get('https://jsonplaceholder.typicode.com/users'); axios.post('/users', { username: 'blabla', name: 'blabla' }); useState와 useEffect로 데이터 로딩하기 useState: 요청 상태 관리 요청의 결과 로딩 상태 에러 useEffect: 컴포넌트가 렌더링되는 시점에 요청을 시작 import React, { useState, useEffect } from 'rea..

React 공부하기(2) - styled-components 🎉 벨로퍼트와 함께하는 모던 리액트 CSS in JS $ yarn add styled-components import styled from 'styled-components' [polished의 스타일 관련 유틸 함수 사용하기] lighten() darken() $ yarn add polished import { darken, lighten } from 'polished'; import React from 'react'; import styled from 'styled-components'; import { darken, lighten } from 'polished'; const StyledButton = styled.button` /* 공통 스타일 */ display: inline-flex; outli..

React 공부하기(2) - CSS Module 🎶 벨로퍼트와 함께하는 모던 리액트 확장자 : .module.css 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정할 필요가 없다. * classnames 사용 안 할 시 import React from 'react'; import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; import styles from './CheckBox.module.css'; function CheckBox({ children, checked, ...rest }) { return ( {checked ? ( ) : ( )} {children} ); ..

React 공부하기(2) - Sass 💖 벨로퍼트와 함께하는 모던 리액트 Syntactically Awesome Style Sheets ! 확장자 : .scss / .sass $ yarn add sass sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } [classnames] $ yarn add classnames import classNames from 'classnames'; imp..

React 공부하기(1) - Hooks 종류편 🌹 벨로퍼트와 함께하는 모던 리액트 ~ for 성능 최적화 ~ useMemo : 연산한 값 재사용 useCallback : 함수 재사용 React.memo : 컴포넌트 리렌더링 방지 7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 import React, { useState } from 'react'; const [number, setNumber] = useState(0); 상태의 기본값을 파라미터로 넣어서 호출 호출하면 배열이 반환, 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수 11. useRef로 특정 DOM 선택하기 import React, { useRef } from 'react'; const nameInput = useRef(); ... nameInput.current..

React 공부하기(1) - 상태관리 中 배열편 🔥 벨로퍼트와 함께하는 모던 리액트 불변성 !!!! push, splice XXX concat, filter, map OOO 11. 배열 렌더링하기 map() : 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 줌 각 원소들마다 고유한 key 값을 설정해줘야 됨 => 그래야지, 수정되지 않는 기존값은 그대로 두고 원하는 곳에 내용을 삽입하고 삭제함 import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.c..

이전 1 ··· 5 6 7 8 9 10 11 ··· 15 다음

티스토리툴바