728x90 react21 리덕스 기초 리덕스는 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이며 전역 상태를 관리할 때 효율적이다. 리덕스를 사용하면 다음과 같은 장점이 있다 1. 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더 효율적인 관리가 가능하다 2. 컴포넌트끼리 상태를 공유해야 할때 여러 컴포넌트를 거치지 않아도 된다. 3. 미들웨어를 지원한다. 용어, 개념 정리 액션 상태에 어떤 변화가 필요하면 액션이 발생한다. 액션은 하나의 객체로 표현되며 액션의 이름 정도 되는 type필드를 반드시 가지고 있어야 한다. 1 2 3 4 5 6 7 { type: 'ADD_TODO', data: { id: 1, text: 'reduxs', } } cs 액션 생성 함수(action creator) 말 그대로 액션 객체를 만들어 준다. 필요할.. 2021. 7. 17. Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 필요하다. Context API를 사용하지 않는다면 최상위 컴포넌트에서 다른 여러 컴포넌트에서 공통적으로 필요한 state를 관리하고 필요시 props의 형태로 전달한다. 이때 컴포넌트의 구조가 복잡해지면 여러 컴포넌트에 걸쳐서 props를 전달한다. 이는 유지보수성의 저하를 야기하기 때문에 이를 보완하기 위해 Context API 또는 Context API를 기반으로 구현된 리덕스, MobX같은 상태관리 라이브러리를 사용한다. Context API를 사용하면 데이터의 전달을 위해 여러 컴포넌트를 거칠 필요 없이 Context를 만들어 한번에 원하는 값을 받아올 수 있다. /src/contexts에 다음과 같은 코드를 작성하자.. 2021. 7. 17. React에서의 onClick이벤트 리엑트는 HTML/JS처럼 유저가 애플리케이션의 인터페이스와 상호작용을 할때 함수를 호출하고 그에대한 액션을 발동한다. 이러한 상호작용은 이벤트를 발생시킨다 . 클릭 이벤트는 하나의 엘리먼트가 클릭 되었을 때 발동되며 onClick으로 정의된다. 이는 유저의 액션에 대해 작용하고 싶은 엘리먼트의 attribute로 정의 된다. Vanila와 React의 이벤트 헨들링 차이. 1. 바닐리와는 다르게 리엑트는 camelCase를 사용한다(js-onclick, react-onClick) 2. HTML의 요소가 클릭되어 이벤트 헨들러가 함수를 호출한다면 다음과 같이 호출된다. 1 2 3 4 //vanila js Do something; //react Do something; cs 위의 두 코드는 단순 문법 차이.. 2021. 7. 14. 외부 API 연동 axios를 설치하고 다음과 같은 코드를 작성하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import logo from './logo.svg'; import './App.css'; import React, {useState} from 'react'; import axios from 'axios'; function App() { const [data, setDate] = useState(null); const onClick = async () => { try{ // 가짜 API를 호출할 수 있는 사이트 const response = axios.get('https://jsonplaceholder.typ.. 2021. 7. 12. 이전 1 2 3 4 5 6 다음 728x90