odada

Chakra-ui로 스타일링하기 0. Tailwind CSS vs Chakra UI - Tailwind CSS Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다. - Chakra UI Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. - Tailwind CSS와 Chakra UI를 함께 사용 Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리..

1. styled-reset styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다. styled-reset 사이트 - 설치 npm install styled-reset yarn add styled-reset - 사용법 // src/App.js import React from 'react' import Routers from './components/Routers' import { Reset } from 'styled-reset' const App = () => { return ( {/* 초기화 */} ) } export default App 2. styled-components styled-components는 CS..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..

github url 수업내용 url : https://github.com/oddoddo/react-edu-0323.git 웹사이트 만들기 : https://github.com/oddoddo/-react-router-tailwind 커리큘럼 회차 세부내용 비고 1 수업소개, 실습 환경 구축, js기본, 컴포넌트 만들기, Props 2 Event, State 3 React Router DOM, styled-reset, styled-component, tailwind 4 Create, Update, Delete 5 Context API, useReducer 6 React-redux, 리덕스 툴킷, Next.js 7 감정 일기장 앱 만들기 8 감정 일기장 앱 배포 목차 리액트란 무엇인가? https://oda..

Context API란 Context API란 컴포넌트 트리 전체에 데이터를 제공하는 것입니다. 전역 상태를 관리할 때 사용합니다. Context API를 사용하면 컴포넌트 간에 데이터를 전달할 때, 중간 컴포넌트를 거치지 않고 데이터를 전달할 수 있습니다. Context 문법 React.createContext 함수를 사용하여 Context를 생성합니다. Context.Provider 컴포넌트를 사용하여 Context를 제공합니다. Context.Consumer 컴포넌트를 사용하여 Context를 소비합니다. Context 사용하기 React.createContext 함수를 사용하여 Context를 생성합니다. const MyContext = React.createContext(defaultValue)..

타입스크립트란? 2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로, 자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어! 타입스크립트의 특징 정적 타입의 컴파일 언어 자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인 타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인 자바스크립트로 변환(컴파일) 후 브라우저에나 Node.js 환경에서 동작 개발환경 구성 ts-test 디렉토리 생성 프로젝트 생성 npm init -y 패키지 설치 parcel : 웹 애플리케이션 번들러 npm i -D parcel typescript { "name": "ts-test", "version": "1.0.0", "description": "", // "main": ..

useReducer useReducer 란? useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다. 컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있고, 상태 로직을 컴포넌트 바깥으로 빼내어 재사용할 수 있습니다. useReducer 사용법 useReducer 는 다음과 같이 사용합니다. const [state, dispatch] = useReducer(reducer, initialState) state : 현재 상태 dispatch : 액션을 발생시키는 함수, 액션을 발생시키면 리듀서 함수가 호출되어 상태가 변경됩니다..

할 일 관리 앱 만들기 1. 컴포넌트 구조 설계하기 - App 컴포넌트 만들기 // src/App.js import React from 'react' import TodoHd from './TodoHd' import TodoEditor from './component/TodoEditor' import TodoList from './component/TodoList' export default function App() { return ( ) } - Header 컴포넌트 만들기 // src/TodoHd.js import React from 'react' export default function TodoHd() { return ( 📝 ..

라이프 사이클 (생명주기) 이해하기 React에서 컴포넌트의 생명주기를 관리하는 것은 앱의 성능과 유지보수성에 중요한 영향을 미칩니다. 특히, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 관리 작업을 수행합니다. - 예제로 알아보는 라이프 사이클 데이터를 불러와 화면에 표시하는 간단한 뉴스 목록 컴포넌트를 생각해볼 수 있습니다. 이 컴포넌트는 useEffect 훅을 사용해 컴포넌트가 마운트될 때 뉴스 API에서 데이터를 한 번만 불러오고, 이 데이터를 컴포넌트의 상태로 저장하여 화면에 뉴스 목록을 렌더링합니다. 만약 사용자가 특정 카테고리를 선택하면, 해당 카테고리에 맞는 뉴스 데이터를 다시 불러와 업데이트할 수 있습니다. 이렇게 useEffect를 사용하면 API 호출 타이밍을 정확히 ..