리덕스 미들웨어 액션을 패치 했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러가지가 있습니다. - 전달받은 액션을 단순히 콘솔에 기록 - 전달받은 액션 정보를 기반으로 액션을 취소 - 다른 종류의 액션을 추가로 디스패치 *실제 미들웨어를 직접 만들어 사용할 일은 많지 않습니다. => 다른 개발자가 만들어 놓은 미들웨어를 사용하기 때문 const loggerMiddleware = (store) => (next) => (action) => {}; export default loggerMiddleware; 미들웨어 만들어 보기 // lib/loggerMiddleware..

웹 애플리케이션에서 라우팅이라는 개념 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 라우팅 시스템 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해서 프로젝트를 관리하기 위해 필요 리액트에서 라우트 시스템 구축 - 리액트 라우트 - Next.js - react-location - rakkas 리액트 라우트 (React Router) - 컴포넌트 기반으로 라우팅 시스템을 설정 할 수 있습니다. - 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. Next.js - 리액트 프로젝트의 프레임워크 - 리액트 프로젝트 설정 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능 제공 - 라우팅 시스템은..

create-react-app을 사용해서 프로젝트를 생성합니다. npx create-react-app todo-app sass를 사용해서 스타일을 꾸며 주도록 하겠습니다. npm add sass classnames react-icons classnames는 조건부 스타일링을 좀 더 편하게 하기 위함 react-icons는 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리 => https://react-icons.netlify.com/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include..

코드 이해하기 import "./App.css"; function App() { return ( Hello, I'm Jetty! ); } export default App; import구문 - 특정 파일을 불러오는 것을 의미 - 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있음 - import는 Node.js에서 지원하는 기능. Node.js에서는 require라는 구문으로 패키지를 불러옴 * Node.js - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경 - 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용 대표적인 번들러로 웹팩, Parcel, browserify라는 도구가 있으며, 각 도구마다 ..

props란 컴포넌트 속성을 설정 할 때 사용하는 요소 부모 컴포넌트에서 자식 컴포넌트로 props를 전달 가능 properties의 줄임말 (속성) // App.js import React from "react"; import ChildrenComponent from "./ChildrenComponent"; const App = () => { return ; }; export default App; // ChildrenComponent.jsx import React from "react"; const ChildrenComponent = (props) => { return name : {props.name}; }; export default ChildrenComponent; -- 결과값 -- defaul..

React Native란? (리액트 네이티브) React의 방식으로 동시에 iOS와 Android 모바일 애플리케이션 개발을 할 수있는 페이스 북의 오픈 소스 프레임 워크 *bridge : IOS, Android 네이티브 코드에 접근할 수 있는 일종의 다리 역할을 수행 1. 직접 작성하는 리액트 코드(리액트 웹 코드와 매우 흡사한) 파트 2. 작성한 코드가 시스템에서 해석된 자바스크립트 파트 3. “브릿지"라고 불리는 요소들의 집합 파트 4. 네이티브 파트

일반적인 Lifecycle *mount : 컴포넌트가 처음 실행되는시기를 의미합니다. Mounting - 컴포넌트가 실행되고 constructor이 가장먼저 실행됨 - render가 되고 DOM과 refs가 업데이트됨 - componentDidMount가 실행됨 Updating - New props, setState, forceUpdate()가 실행됨 - render가 되고 DOM과 refs가 업데이트됨 - componentDidUpdate가 실행됨 Unmounting - componentWillUnmount가 실행됨 React Hook Lifecycle Mounting 함수가 실행되면 결과를 반환합니다. (만약 useMemo로 되어있는 함수라면 내부에서 발생하는 연산을 최적화합니다.) DOM과 refs..

useState 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 useEffect - 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook useContext - 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있음 useReducer - useState 보다 컴포넌트에서 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook useMemo - 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 useCallback - 렌더링 성능을 최적화 useRef - 함수형 컴포넌트에서 ref 를 쉽게 사용 할 수 있게 해줌