기존의 리덕스를 사용한 소스코드를 Redux ToolKit을 적용한 형태로 변경해보자. 설치 해당 프로젝트 폴더에서 yarn add 명령어를 통해 툴킷 패키지를 설치한다. yarn add @reduxjs/toolkit Redux 소스코드 수정하기 src/redux/config/configStore.js import { configureStore } from "@reduxjs/toolkit" import counter from "../modules/counter"; const store = configureStore({ reducer : { counter : counter, } }) export default store 스토어 소스코드 수정 Toolkit을 사용하면 스토어, 루트리두스를 한번에 설정할 수 ..

CRA를 통한 리액트 프로젝트 생성 Redux설치 Duck패턴을 적용한 Redux 사용하기 설치 프로젝트를 생성하고자 하는 경로에서 해당 명령어를 통해 리액트 프로젝트를 생성한다. yarn create react-app [프로젝트명] 생성된 프로젝트 디렉토리로 이동한다. cd [프로젝트명] yarn add 명령어를 통해서 해당 프로젝트에 리덕스와 react-redux 라이브러리를 설치한다. yarn add redux yarn add react-redux 프로젝트 구조 리액트에서 Duck패턴으로 리덕스를 적용할때 보다 알아보기 쉽게 하기 위해 프로젝트 폴더를 정리해 보았다. . ... ├── src │ ├── components │ │ └── Counter.jsx │ ├── redux │ │ ├── con..

useEffect 란 컴포넌트의 라이프사이클에 따라 Mount(랜더링), Update(리랜더링), Unmount(화면에서 사라짐)에 따라서 특정 로직을 수행하고 싶을 때 사용한다. 인자로 콜백함수와, 의존성배열(dependency Array)을 받는다. 의존성 배열에 값을 어떻게 넣어주는가에 따라 특정 라이플 사이클에만 동작하도록 실행조건을 제어 할 수있다(마운트 될때만, 특정값이 변경될 때만…) 인자 내 콜백함수의 return 작성을 통해 수행한 동작에 대한 클린이 가능하다. /* 콜백 함수만 받는 형태 */ useEffect(()=>{ /* 로직 */ }) /* 콜백함수와 의존성 배열을 받는 형태*/ useEffect(()=>{ },[/* 빈 배열, 혹은 상태값이 담긴 배열*/]) React 에서 u..

useState 란 가장 기본적인 Hook 함수형 컴포넌트도 가변적인 상태값을 가질 수 있도록 한다. React 에서 useState 사용하기 import 하기 import React, {useState} from 'react' // 시작은 import 부터 해주어야 합니다. // 코드에서 useState를 사용하면 대부분 에디터에서 자동으로 import 됩니다기본 사용방법 import React, { useState } from 'react'; // 변수선언자, 구조분해할당, 초기값설정 입니다. // const [값을 담을 변수명, 값을 변경할 함수명] = useState(초기값) // useState는 배열을 리턴합니다. 리턴된 배열을 구조분해 할당을 통해 값을 할당합니다..

CSS in JS CSS 스타일을 JavaScript 코드 안에서 정의하고 관리하는 방식을 말한다! CSS 클래스 이름이나 인라인 스타일을 직접 작성하는 대신, JavaScript 객체를 사용하여 스타일을 정의하고 관리할 수 있다. 컴포넌트별 스타일 관리 : 컴포넌트별로 스타일을 관리할 수 있다. 이를 통해 스타일의 재사용성을 높이고, 스타일 충돌 문제를 해결할 수 있다. JavaScript의 기능 활용 : JavaScript의 기능을 활용하여 동적으로 스타일을 변경할 수 있다. 코드 유지 보수성 : 스타일을 정의하는 코드와 해당 스타일을 사용하는 코드가 함께 있어서 코드 유지 보수성이 높아집니다. 리액트에서 CSS in JS를 구현하는 방법으로는 다양한 라이브러리가 있다. 대표적으로 Styled Com..

state란 리액트에서 데이터를 다루는 대표적인 방법으로 props와 state가 있다. props는 부모 컴포넌트에서만 수정 가능하며 자식 컴포넌트는 읽기만 가능한 단방향 데이터 메커니즘이다. 반면 state는 컴포넌트 내부에서 변경 가능한데이터이다. 단어 그대로 상태값을 의미하는데 기존의 자바스크립트나 개발언어에서도 필요하다면 다양한 상태값을 선언하고 사용하였다. 하지만 리액트에서는 상태라는 개념은 가상돔 개념과 연결되면서 상태의 변경이 발생할 경우 UI를 리 랜더링 하게 되는 기준값이 되었다. 즉, state는 컴포넌트 내부에서 변경 가능한 값이며, 변경이 일어날 경우 화면이 리랜더링 되도록 하는 기준값이라는 것. 함수형 컴포넌트에서 state 사용하기 리액트 이전 버전에서는 클래스형 컴포넌트에서만..