728x90 Frontend/React12 [React] Redux(2) [payload] Payload란? 이전에 Redux를 이용해 counter를 만들었습니다. 그때는 정해진 숫자만 더하고 빼기만 했었는데 이번에는 임의의 값을 넣어 더하고 빼는 counter를 만들어 보려고 합니다. 이때 임의의 값이라는 목적어가 생기게 되고 그 목적어도 액션객체에 담아 같이 보내줘야 합니다. 이렇게 액션객체에 같이 담아 보내주는 것을 Payload라고 합니다. export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; ⭐반드시 payload라는 이름을 통해서 보내야 하나요? 리덕스는 굉장히 유연한 라이브러리이기 때문에 많은 것들이 “표준화”되어 있지 않습니다. 때문에 자신만의 방식으로 프로그래밍 할 수 있는 유연성을 .. 2022. 12. 14. [React] Redux(1) [count 만들기] Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. Redux 기본 키워드 1. 액션( Action ) 상태에 어떠한 변화가 필요하게 도리 때, 액션이란 것을 발생시켭니다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 합니다. { type : "PLUS_ONE" } 2. 액션 생성함수( Action Creator ) 액션 생성함수는, 액션을 만드는 함수입니다. 액션 생성함수를 만들어서 사용하는 이뉴는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서.. 2022. 12. 13. [React] 절대 경로 (Absolute Imports) Absolute Imports란? React로 프로젝트를 개발하다보면 ../../../../components/Basic과 같은 import 지옥이 되는 경우가 잦습니다. 절대경로는 이름 그대로 어떤 상황에서도 변하지 않는 경로를 의미합니다. import를 선언하는 페이지의 위치와는 상관 없이 일관성 있는 경로를 작성하기 때문에 추후 파일 위치가 이동해도 import를 다시 맞추지 않아도 되는 장점이 있습니다. 적용 방법 CRA(create-react-app)으로 프로젝트를 만들었다고 가정했을 때 보통 src 파일안에 소스코드가 있기 마련입니다. 그러니 jsconfig.json을 통해서 이 src 폴더를 루트 폴더로 지정하기만 하면 됩니다. JavaScript 프로젝트라면 jsconfig.json파일을 .. 2022. 8. 19. [React] React useState 공부하기! useState란? [ State ] 우선 State란 컴포넌트가 가질 수 있는 상태를 말한다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 변할 경우에는 상태를 관리하는 것이 필요하다. React 16.8버전부터 함수형 컴포넌트(Functional Component)에서도 상태(State)를 관리할 수 있게 되었다. 그것이 useState( )함수이다. 1. Import React Hooks의 useState는 컴포넌트의 state를 간편히 생성하고 업데이트 시켜줄 수 있게 해주는 도구를 제공한다. useState를 사용하기 위해선 먼저 React에서 useState를 import 받아야 한다. import { useState } from 'react'; 2. 변수 선언 state의 생성과 동시.. 2022. 8. 18. [React] React Hooks 공부하기! Hook이란? Hook은 React 버전 16.8부터 React요소로 새로 추가되었다. Hook을 이용하여 기존 Class바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있도록 만든 라이브러리이다. Function 컴포넌트를 Class 컴포넌트처럼 사용할 수 있다. Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. Hook의 규칙 1. 최상위에서만 Hook 호출 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. early return이 실행되기 전에 항상 React 함수의 최상위에서 Hook을 호출해야 한다. 잘못된 Hook 사용방법 export defaul.. 2022. 8. 13. [React] React란? 서론 이번 프로젝트를 통해 React를 접하게 되었습니다. 지금부터 React란 무엇인지, 정의와 특징에 대해 간략하게 정리해 보겠습니다!! 팀원과 함께 React를 통해 웹 페이지를 개발하게 되었는데, 정확하게 React가 무엇인지, 어떤 특징이 있고, 어떤 장점이 있는지 잘 모르기 때문에 저를 위해 정리를 해 보겠습니다. React란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 출처 : 위키백과 1. 단일방향 데이터 흐름 & Flux React에선 데이터가 단일방향으로만 흐릅니다. 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줍니다. Flux는 데이터가 단일방향으로 흐르는것을 유지해주는 패턴입니다. 2. .. 2022. 7. 29. 이전 1 2 다음 728x90
