본문 바로가기

Programing375

React.js에서 꼭 알아야 하는 패턴 리액트 프로젝트에서 자주 사용되는 주요 문법 패턴을 정리해보겠습니다. 이 패턴들은 대부분의 리액트 프로젝트에서 거의 항상 등장하며, 리액트 개발자라면 익숙해져야 할 요소들입니다.1. 함수형 컴포넌트 (Functional Components)함수형 컴포넌트는 간단하게 함수로 정의된 컴포넌트입니다. 상태와 훅을 사용할 수 있습니다.import React from 'react';const MyComponent = () => { return ( Hello, World! );};export default MyComponent;2. 상태 관리 (State Management) with useStateuseState 훅을 사용하여 컴포넌트의 상태를 관리합니다.import React, { u.. Programing/React 2024. 5. 29.
032. [코딩애플] [part2] Redux 2 store에 state 보관하고 쓰는 법 Redux store에 state 보관하기아래는 store 기본 세팅import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) 여기에서 createSlice import 추가.import { configureStore, createSlice } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) store에 state 만들기import { configureStore, createSlice } from '@reduxjs/toolkit'// 여기에 아래 규격으로 state를 만듦.// name과 initialState는 .. Programing/React 2024. 5. 28.
031. [코딩애플] [part2] Redux 1 Redux Toolkit 설치 Redux 사용법패키지 설치하기npm install @reduxs/toolkit react-reduxstore.js 파일 만들기이름은 자유 작명이나 일반적으로 store로 만들고,확장자는 jsx 불가. js 문법임.일반적으로 redux나 store 폴더를 만든 뒤 거기에 위치시킨다.// src/redux/store.jsstore.js 파일 기본 세팅아래 내용을 복붙한다.import { configureStore } from '@reduxjs/toolkit'export default configureStore({ reducer: { }}) main.jsx에서 최상위 컴포넌트 감싸기 및 store.js 파일 import 하기import React from 'react'import ReactDOM from .. Programing/React 2024. 5. 28.
048. React - Context API 상태관리 Context란?React의 상태를 관리하는 방법 중 하나.나오게 된 이유는, 리액트에서 상태를 전달하는 특성 때문인데, 리액트에서 정의한 state는 부모->자식으로 전달이 가능하고 만약 부모->자식->자식 으로 손주까지 내려가려면 부모에서 바로 손주로 내려갈 수 없고 바로 위의 부모에 한 번 전달한 뒤 다시 그 바로 위 부모로부터 전달을 받아야 한다. 이런 현상을 props drilling이라 한다. 컴포넌트가 조금만 많아지더라도 매우 복잡하기 때문에 context가 생겼다.context는 상태를 저장하는 보관소 느낌이다. 만들어 둔 상태들을 context에 저장해두고 필요한 곳에서 꺼내어 쓰면 되기 때문에 자식의 자식의 자식으로 타고타고 뚫고 들어가는 프롭스 드릴링을 하지 않아도 되어 편리하다.기본.. Programing/React 2024. 5. 28.
2024-05-28 스탠다드 과제 - props-drilling을 context API 활용 리팩토링 하기 context API로 texts state 리펙토링 하기원본import React, { useState, useEffect} from "react";import TextInput from "./components/TextInput";import TextList from "./components/TextList";function App() { // TODO: texts 를 context api 로 리팩터링 하세요. const [texts, setTexts] = useState(() => localStorage.getItem("texts") ? JSON.parse(localStorage.getItem("texts")) : [], ); useEffect(() => { lo.. Programing/TIL 2024. 5. 28.

티스토리툴바