728x90 react10 [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. 이전 1 2 다음 728x90
