본문 바로가기

Programing/React72

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.
112. [MAX] Styled-Components 기본 사용법 Styled-Components란?리액트로 넘어오면서 CSS를 설정할 때 기존의 방식은 사용이 불가능하고, CSS를 객체 형태로 만들어야 하기 때문에 CSS의 값을 문자열로 설정한다든지, background-color 등을 대쉬를 빼고 camelCase 등의 방식으로 backgroundColor처럼 명명해야 한다든지 불편한 점이 있어 등장한 패키지이다. CSS를 별도의 CSS 파일에서 지정하지 않고, 컴포넌트 내에서 바로 작성이 가능하도록 도와준다.사용 방법패키지 설치하기 npm install styled-componentsimport 하기import { styled } from 'styled-components';스타일링 하기함수형 컴포넌트가 선언된 곳 위, Import문 아래에서 바로 스타일링을 하면.. Programing/React 2024. 5. 23.
043. React - useEffect useEffect란?리액트에서 컴포넌트의 사이드 이펙트를 제어하는 훅.사이드 이펙트는 직역하면 '부작용'이고, 리액트에서 표현하는 사이드 이펙트는 어떤 기능에서 '의도하지 않은 부수적인 효과', 내지 '파생되는 효과' 정도의 개념이다.사용방법import하기// state import 하기import { useEffect } from "react";원형 작성하기const [count, setCount] = useState(0);useEffect(()=>{},[]);// 두 개의 인자를 받는데 첫번째는 콜백함수, 두번째는 의존성 배열(Dependency Array)// 해석은 Deps의 값이 변경되면 콜백함수가 실행됨.위와 같이 useState 훅과 동시에 사용 가능. 카운트 앱에서 사용되는 count st.. Programing/React 2024. 5. 23.

티스토리툴바