@thsisno

12장 플럭스 아키텍처대규모 애플리케이션에서 일관된 데이터 관리를 쉽게 하기 위해 만들어진 단방향 데이터 처리 과정을 가지는 아키텍처 상태를 필요로 하는 컴포넌트에 스토어의 상태를 연결할 수 있으며, 부모 컴포넌트에서 자식 컴포넌트로 반복적이고 계층적으로 속성을 전달하지 않아도 됨 플럭스 아키텍처는 단일 디스패처를 사용하여 모든 데이터 흐름은 단일 디스패처를 거쳐 가므로 이곳에서만 모니터링과 로깅을 하면 모든 액션의 흐름을 볼 수 있으며, 액션에 의해 상태가 어떻게 변경되어가는지 쉽게 추적할 수 있음. 리덕스리덕스는 자바스크립트 애플리케이션을 위한 예측 가능한 상태 관리 컨테이너UI 상태와 데이터 상태를 관리하기 위한 효과적인 도구이다. 플럭스 아키텍처를 발전시켜 복잡성을 줄이도록 설계됨플럭스의 기능..

axiosHTTP 기반 통신을 지원하는 자바스크립트 라이브러리서버와 데이터를 주고받기 위한 요청/응답 처리 라이브러리axios 사용하려면 npm 패키지 설치해야 함 Promise와 async/awaitPromise 는 비동기 처리를 수행하는 패턴을 지원하는 ES6의 기능 axios.get() 함수 GET 요청 처리 // 사용 방법// url: 요청하는 백엔드 API 의 URL을 지정// config: 요청 시에 지정할 설정값들// 요청 후에는 Promise 를 리턴하며 처리가 완료된 후에는 response 객체를 응답 받음axios.get(url, config)// 사용 예시: Promiseconst requestAPI = () => { const url = "/api/todolist/gdhong"; ..

7장고차 함수고차 함수는 다른 함수와 컴포넌트를 인자로 전달받거나 리턴하는 함수컴포넌트 사이의 공통 로직을 분리하고 재사용하기 위해 리액트 훅과 고차 함수를 사용할 수 있음.==> 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수 고차 함수 예제import { useEffect, useState } from 'react'import DateAndTIme from 'date-and-time'export enum TimeFormatEnum { HHmmss = "HH:mm:ss", HHmm = "HH:mm", HHmmKOR = "HH시 mm분", HHmmssKOR = "HH시 mm분 ss초",}export const connectClockTime = ( TargetComponent: R..

6장1. useState 훅함수 컴포넌트에서 상태를 이용하기 위해 사용기본적인 사용 방법const [getter, setter] = useState(initialValue);// getter: 읽기 전용 속성// setter: 상태를 변경할 때 사용하는 함수// StateType: 상태 데이터의 타입// initialValue: 상태 초기값 예시import { ChangeEvent, useState } from 'react'const App = () => { const [msg, setMsg] = useState(""); return ( )=>setMsg(e.target.value)} /> 입력 메시지: {msg} ..

3장JSX(JavaScript XML) 주의 사항 1. 카멜표기법 ex. className, onClick 2. 속성명이 DOM API 기반실제 HTML 문자열이 아니라, React.createElement() 함수로 변환되어 DOM을 조작함 3. 보간법 { } 에는 표현식을 사용{ } 내에 보간된 HTML 문자열은 인코딩 됨. JS 값을 넣을 때는 반드시 { }로 감싸야함.const name = "홍경";return Hello, {name}! 속성 (Props, 프롭스) == 데이터 전달Props는 컴포넌트에 데이터를 전달하기 위해 사용되는 속성즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하는 방법프롭스는 컴포넌트 외부에서 전달되는 값이며, 읽기 전용이기 때문에 자식 컴포넌트는 데이터 변경이 불가..

1장리액트web UI를 작성하기 위한 자바스크립트 라이브러리MVC(Model, View, Controller) 중에서 V.. 컴포넌트 수준에서 상태 관리 기능을 제공한다. JSX자바스크립트 확장 문법 MPA멀티 페이지 어플리케이션화면 전환 시 새로운 HTML 페이지로 이동한다.사용자 인터렉션에 의한 화면 변화는 HTTP 통신으로 서버에서 데이터를 받아 JS 코드로 뿌린다. https://lite.tiktok.com/t/ZSHEaPsFVbWh5-JC1gk/ TikTok Lite를 다운로드하고 풍성한 리워드를 받아가세요!풍성한 리워드가 소진되기 전에 지금 바로 받아가세요!www.tiktok.comSPA단일 페이지 어플리케이션하나의 페이지가 하나의 애플리케이션임HTML 페이지 하나로 구성되지만 여러 화면으로 ..