하나씩 알아가기

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 태그를 사용하여 사용자로부터 정보를 입력받아 서버에 요청할 수 있습니다. HTML의 폼 엘리먼트는 그 자체가 내부 상태를 가집니다. 리액트에서는 이를 그대로 사용하기 보다 JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 합니다. Name: HTML 폼을 이용하려면 태그의 name이라는 속성에 담아야 제출할 수 있습니다. 하지만 이렇게 리액트 앱을 구현하는 경우 HTML 폼을 이용하는 경우는 많지 않다고 생각됩니다(왜냐하면 리액트는 CSR방식의 렌더링을 지향하기 때문에 하단 포스팅 참고). clearwater92.tistory.com/30 서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 틀린 부분..

오늘은 useReducer hook에 대해서 알아보겠습니다. useReducer는 추가적인 Hook으로 의미가 기본 Hook으로부터 파생되었습니다. useState를 대체할 수 있는 함수인데요. 먼저 useState를 이용하여 counter를 구현해보도록 하겠습니다. import React, { useState } from 'react'; const Counter = ({ initialCount }) => { const [count, setCount] = useState(0); return ( Count : {count} setCount(initialCount)}>RESET setCount((prevState) => prevState - 1)}>- setCount((prevState) => prevSta..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법입니다. 겉으로 보기에는 템플릿 언어같아 보이지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX를 리액트와 같이 쓰면 UI 관련 작업을 할 때 더 직관적인 코드를 작성할 수 있게 됩니다. 예를 들어, var element = React.createElement("h1", null, "Hello, ", name); 이렇게 HTML 태그를 만들어야 하는데 (물론 이것은 진짜 DOM element는 아니고 가상 DOM인 React element입니다) const element = Hello, {name}; 훨씬 직관적으로 코드를 작성할 수 있습니다. JSX에는 표..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 이번에는 React Redux에서 많이 사용되는 함수와 컴포넌트에 대해 정리하겠습니다. React Redux는 리액트에서 리덕스를 사용할 수 있게 해주는 패키지 입니다. Redux는 독립적인 상태관리 라이브러리이지만 React에서 많이 사용되는 이미지입니다(아닐 수도 있습니다) 그렇기 때문에 React에서 Redux를 사용하는 효용이 많기 때문에 이렇게 패키지가 등장하지 않았나라고 생각합니다. Provider Provider는 우리의 App이 Redux store에 접근할 수 있도록 해줍니다. import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'rea..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 리덕스 미들웨어란 무엇인가? 리덕스 미들웨어는 디스패치 함수를 결합해서 새 디스패치 함수를 반환하는 고차함수(higher-order)입니다. 이들은 비동기 액션을 액션으로 전환합니다. 미들웨어는 함수 결합을 통해 서로 결합할 수 있습니다. 이는 액션을 로깅하거나, 라우팅과 같은 부수효과를 일으키거나, 비동기 API 호출을 일련의 동기 액션으로 바꾸는데 유용합니다. 위 그림처럼 미들웨어는 리듀서와 액션 사이에 존재하며, 액션이 디스패치 되었을 때 이를 수정하여 리듀서에 전달되도록 하는 역할을 할 수 있습니다. type MiddlewareAPI = { dispatch: Dispatch, getState: () => State } type Middlewa..