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

React Router React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 사용합니다. React Router는 주로 SPA에서 여러 화면을 보여줄 때 사용합니다. Routing(라우팅) : 경로에 따라 변경한다. // ReactRouter 라이브러리 | 역할 | Router 역할 | 의 묶음 | 경로를 매칭해주는 역할 | 경로를 변경하는 역할 # React Router 설치하기 npm install react-router-dom // example import React from 'react'; import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function App() { return ( Home M..

SPA 란? (Single-Page Application) 서버로부터 완전한 새로운 페이지를 불러오지 않고, 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트를 말합니다. SPA 등장 전 ● 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. ● 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜빡이는 현상이 발생한다. SPA 등장 후 장점 ● 변경할 부분을 갱신하는데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다. ● 변경할 필요가 없는 부분은 ..

JSX (JavaScript XML) JavaScript 를 확장한 문법입니다. DOM에서 JavaScript와 함께 사용하기 위해서는 JavaScript와 HTML를 연결하기 위한 작업이 필요합니다. 하지만 React에서는 JSX를 이용하여 DOM 코드보다 명시적으로 코드를 작성할 수 있고, JavaScript와 HTML를 연결하는 작업도 하지 않아도 됩니다. JSX 문법 ● 여러 element를 작성하는 경우, 최상위에서 와 로 감싸주어야 합니다. Hello World ● CSS Class 속성을 지정하는 경우, JS와 다르게 'className'으로 표기해야 합니다. (JS는 class) (class로 작성하는 경우 JS의 class로 인식합니다.) hello hello ● JSX에서 JavaScr..