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, { ..

Props 컴포넌트의 속성(property)을 의미합니다. props는 변하지 않는 외부(부모 혹은 자식 컴포넌트)로부터 전달받은 값이며, 객체 형태입니다. props는 변하지 않는 값이기에 읽기 전용(read-only) 객체입니다. // example function Parent() { return ( I'm the parent ); } function Child(props) { console.log("props : ", props); // {text: "I'm the first child"} return ( // {text: "I'm the second child"} {props.text} // I'm the parent ); // I'm the first child } // I'm the secon..