반응형

분류 전체보기 231

Context API로 전역 상태 관리하기

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)..

Front/React 2024.03.20

타입스크립트 개요 및 개발 환경 구성

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

Front/React 2024.03.19

useReducer - React 배우기

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

Front/React 2024.03.19

React Typescript Layout 구성하기 - react-router-dom, emotion, tailwind

리액트 타입스크립트 레이아웃 구성 - emotion, tailwindcss 리액트 타입스크립트를 이용한 레이아웃 구성 & Route 설정 1. 프로젝트 생성 npx create-react-app react-ts --template typescript cd react-ts-layout npm start 2. 컴포넌트(Components) 생성 - Header 컴포넌트 생성 src/components/layout 디렉토리에 Header.tsx 파일을 생성한다. // src/components/layout/Header.tsx import { Link } from 'react-router-dom' type HeaderProps = { name: string } const Header: React...

Front/React 2024.03.18

할 일 관리 앱 만들기 - react 기능 모음

할 일 관리 앱 만들기 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 ( 📝 ..

Front/React 2024.03.14

useEffect, 생명주기 - React 배우기

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

Front/React 2024.03.11

React 카운터 앱 만들기 - component, useState

카운터 앱 만들기 리액트를 이용한 숫자를 증가시키거나 감소시키는 앱을 만들어보자. 1. 프로젝트 생성 npx create-react-app counter-app cd counter-app npm start 2. 컴포넌트(Components) 생성 src 디렉토리에 Viewer.js 파일을 생성한다. // src/Viewer.js import React from 'react' function Viewer() { return ( 0 ) } export default Viewer src 디렉토리에 Counter.js 파일을 생성한다. // src/Counter.js import React from 'react' function Counter() { return ( + - ) } e..

Front/React 2024.03.04

React(리액트) 기본 기능 정리

리액트 기본기능 첫 컴포넌트 만들기 App.js 파일에 Header, Body, Footer 컴포넌트를 만들어보자. import React from 'react' const Header = () => { return ( Header ) } const Body = () => { return ( Body ) } const Footer = () => { return ( Footer ) } function App() { return ( ) } export default App 컴포넌트 분리하기 Header, Body, Footer 컴포넌트를 따로 파일로 분리해보자. // Header.js import React from 'react' const Header = () => { retu..

Front/React 2024.02.29

비동기 처리 - javascript 실전

비동기 처리 비동기 처리란, 작업을 동시에 처리하는 것을 말한다. 자바스크립트는 싱글 스레드 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 하지만, 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 동기와 비동기 동기처리의 예: 은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것 비동기처리의 예: 커피 주문 시 앞번호가 먼저 나오는 것, 동시에 처리되는 것 - 동기 처리 동기 처리란, 작업을 순차적으로 처리하는 것을 말한다. 자바스크립트 코드는 기본적으로 동기적으로 처리된다. 동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다. 하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 ..

Front/Javascript 2024.02.29
반응형
티스토리 친구하기