리액트9 리덕스(Redux) 리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에.. 2023. 10. 15. 리액트 Context 리액트에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법에는 여러가지가 있음 React Context란? Context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공 React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공 Context는 전역 데이터를 관리하는 데 사용 ex) 전역 상태, 테마, 서비스, 사용자 설정 등 Context API란? 전역 데이터를 Context에 담아서 사용하려면 먼저 Context를 생성해야 함 const MyContext = React.createContext(defaultValue); Cont.. 2023. 10. 12. 리액트 기초(2) 이번에는 리액트를 사용해 디지니플러스 웹사이트를 만들 예정이다. 만들기 전에 필요한 기초 부분을 살펴보자. The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 Axios 사용방법 axios 모듈 설치: npm install axios --save Axios 인스턴스화 하는 이유 중복된 부분을 계속 입력하지 않아도 되기 때문에 cf) js파일에 'racfe' 치면 functional한 컴포넌트 바로 생성! Styled Component란? CSS-in-JS라고 하는 JS 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리 설치 방법 1. npm - n.. 2023. 10. 9. 이전 1 2 다음
