"react-router-dom": "^6.3.0" 기준 $ npx create-react-app 프로젝트명 $ yarn add react-router-dom Router 를 사용하기 위해 두개의 페이지를 만들어주자 components> Home.js import React from "react"; function Home() { return ( 홈 이곳은 홈이에요. 제 집이죠 ); }; export default Home; About.js import React from "react"; function About () { return ( 소개 리액트 라우터를 연습해보자 ); } ; export default About; src > Router.js 생성 (위치는 마음대로지만ㅇㅇ..) import Rea..

TodoHead 남은 할일 > done이 false 인것의 갯수를 출력 import React from "react"; import styled from "styled-components"; import {useTodoState} from "./TodoContext"; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-right: 24px; padding-left: 32px; border-bottom: 1px solid #e9ecef; h1 { margin: 0; font-size: 36px; color: #343a40; } .day { margin-top: 4px; color: #868e96; font-siz..

앞의 게시글과 이어지는 context API reducer 를 만들겠음ㅇ TodoContext.js import React, {useReducer} from "react"; const initialTodos = [ { id: 1, text: '프로젝트 생성', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done: false }, { id: 4, text: '기능 구현하기', done: false }, ] function todoReducer(state, action) { switch (action.type) { case 'CREATE': return state.concat(action.tod..

기능 구현하기 전 UI 를 만들자 프로젝트 생성 $ npx create-react-app 프로젝트명 icons, styled-componest 라이브러리 설치 $ yarn add react-icons styled-components 만들 컴포넌트 목록 TodoTemplate - 레아이웃 TodoHead - 날짜 , 남은 해야할일 TodoList - 할 일의 정보 TodoItem - 할 일의 정보 렌더링 TodoCreate - 할 일 등록 1. 배경 색 설정 글로벌 스타일 설정, createGlobalStyle 사용 App.js import './App.css'; import {createGlobalStyle} from "styled-components"; const GlobalStyle = createG..

styled-components 는 CSS in JS 관련 리액트 라이브러리중 하나 시작하기 전에... Tagged Template Literal 의 문법을 짚고 넘어가면 styled-components 를 잘 이해 할 수있다 Template Literal - 일반 문자열 / 숫자열 const name = 'react'; const message = `hello ${name}`; console.log(message); // "hello react" - 객체 const object = { a: 1 }; const text = `${object}` console.log(text); // "[object Object]" - 함수 const fn = () => true const msg = `${fn}`; co..

https://react-icons.github.io/react-icons/#/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 각 아이콘들을 하나의 컴포넌트 형태로 사용가능

CSS Module을 사용하면 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다 CRA로 만든 프로젝트에서 CSS Module을 사용할 땐 CSS 파일의 확장자를. module.css로 설정 .Role { background: black; color: white; padding: 2rem; } 이런 식으로 하나 만들게 되면 해당 CSS 파일을 불러올 때 선언한 클래스 이름들이 모두 고유해진다 고유 CSS 클래스 이름이 만들어지는 과정에서는 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용될 수 있다 className을 설정할 때에는 import로 불러온 styles 객체 안에 있는 값을 참조해야 함 import React from "react"; import styles from "./Box...

리액트 컴포넌트 스타일링 Sass 는 CSS pre-processer 두가지의 확장자가 있음 .sass / .scss 보통 .scss 문법이 더 많이 사용된다. 솔직히 걍 JSP에 사용하는 부트스트랩처럼 antd 나 머터리얼 mui 같은 프론드엔드 프레임워크를 쓰는게 정신건강에 좋긴한데 기본적은것은 알고 가야할거 같아서 배워본다. .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..

useReducer 의 장점 로직 분리로 인해 다른곳에서도 재사용 가능 import React, { useEffect, useReducer, useState } from 'react'; import axios from 'axios'; function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data: null, error: action.err..

일단 axios 를 설치하자 둘중에 하무거나 npm 쓰면 npm yarn 하면 yarn npm install axios yarn add axios 설치후 package.json 에 설치가 잘 되어 있는지 확인하자~ useState 와 useEffect 로 데이터 로딩 요청에 대한 상태를 관리 할 때에는 총 3가지 상태를 관리해 줘야한다 1. 요청의 결과 2. 로딩 상태 3. 에러 일단 컴포넌트에 Users.js 생성 import React, { useEffect, useState } from 'react'; import axios from 'axios'; function Users() { const [users, setUsers] = useState(null); const [loading, setLoad..

리액트에서는 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해야함 예를 들어 // 잘못된 코드 const object = { a: 1, b: 2 }; object.b = 3; console.log(object); 이렇게 하면 안됌 이렇게 해야함 spread 연산자 ... 를 사용해서 새로운 객체를 생성 // 이렇게 사용 (불변성을 지켜주어야함) const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; console.log(nextObject); 배열도 마찬가지임 push, slice 등의 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되고 concat, filter, map 등의 함수를..

이때까지 만들었던 것들은 App 컴포넌트에서 onToggle, onRemove 가 구현되어 있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에 전달이 되고 있음 그중 UserList 컴포넌트는 onToggle과 onRemove를 전달하기 위해서 다리 역할만 하고 있음 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에 전달하는 작업은 리액트로 개발을 하다 보면 자주 발생하는 작업인데 컴포넌트 한 개 정도는 괜찮지만 여러 개가 된다면 번거로운 상황이 발생할 것임 그럴 때 Context API와 dispatch를 함께 사용하면 복잡한 구조를 해결할 수 있다 Context API를 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음 여기서 값은 상태 일 수도 함..