Before you learn ● React State ● JSON ● Express ● fetch ● promise Loading Indicator (= 로딩 화면) 네트워크 요청을 통해 데이터를 가져올 때까지 로딩 화면을 통해 네트워크 요청중이라는 표시를 하여 유저의 이탈을 방지하고, 화면이 멈춘 상태가 아님을 나타내므로, 로딩 화면의 구현은 필수적이다. 예제를 보며 익혀봅시다! // example import { useEffect, useState } from 'react'; const [isLoading, setIsLoading] = useState(false); const [flightList, setFlightList] = useState([]); // 생략, LoadingIndicator, ..

VScode Extensions 소개 Styled Components를 사용할 때 템플릿 리터럴을 사용해서 작성하기 때문에 문자열로 인식된다. 즉, 자동완성이 지원되지 않기에 많이 불편하다. 위의 Extensions을 사용하면 CSS 파일에서 작성하는 것처럼 자동완성 기능을 지원해준다. 설치하기 # with npm $ npm install --save styled-components@latest # with yarn $ yarn add styled-components 불러오기 // 전역 스타일 import { createGlobalStyle } from "styled-components"; // 지역 스타일 import styled from "styled-components" 문법 전역 스타일 전역 스타..

Before you learn ● JavaScript Event Event React에서 이벤트는 camelCase(카멜 케이스)를 사용합니다. (ex : onChange, onClick) JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러) 자체를 전달합니다. Event onChange // example import React, { useState } from "react"; function NameForm() { const [name, setName] = useState(""); const handleChange = (e) => { setName(e.target.value); } return ( {name} ) }; onClick // example import React, { ..

State 컴포넌트의 상태(state)를 의미합니다. state는 컴포넌트 내에서 변할 수 있는 값입니다. React에서 제공하는 useState hook을 사용하여 state를 관리할 수 있습니다. state hook Hook 사용 규칙 ● 리액트 함수의 최상위에서만 호출해야한다. - 조건문, 반복문, 중첩된 함수 내에서 Hook을 호출하면 안된다. // example if (counter) { const [sample, setSample] = useState(0); } // Error 발생 // Error // React Hook "useState" is called conditionally. // React Hooks must be called in the exact same order in eve..