천천히 알아가는 세상

안녕하세요. 이번에는 1개의 컴포넌트를 재사용하면서 활용하는 방법을 해보겠습니다. 그리고 재사용되는 컴포넌트의 내부 데이터 값이 다르게 설정하는 방법도 알아보겠습니다. 기존 HTML에서는 기존의 것과 동일한 코드가 있어도 모두 작성해야만 했습니다. EJS에서는 include로 불러와서 사용했지만, React에서는 컴포넌트로 활용할 수 있습니다. 1. 중복되는 부분 컴포넌트로 불러와서 사용하기 App.js import './App.css'; import List from './components/List'; function App() { return ( ); } export default App; components/List.jsx import React from 'react' import Modal fr..

React.Fragment를 간략하게 사용하는 방법입니다. 우선 components 폴더의 component 작성 시 wrapping 태그가 필요합니다. return 할 때 최상위 태그 1개에 묶여 있어야 합니다. 태그로 묶여 있는 코드 return ( inEnglish()}>영어로! {teacher} ); 방법 1 div, span 등 return ( your code ); 방법 2 == 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다. return ( your code ); 방법 3 Fragment 사용하는 경우에는 import가 필요합니다. 해당 코드의 경우에는 콘솔 검사를 할 때 방법1의 처럼 남아있지 않습니다 import { Fragment } from 'react'; ..

안녕하세요. 이번에는 React의 Component에 대하여 알아보겠습니다. 그전에 VSCode에서 작업할 때 있으면 편리한 확장 프로그램을 설치하도록 하겠습니다. 1. VSCode 확장 프로그램 ES7 + React/Redux/React-Native snippets v4.4.3 React 관련 snippets 제공 2. Component Virtual DOM의 핵심이다. 기존의 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지의 전체를 리로딩 해야한다. React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다. 독립적으로 구성하여 재사용이 편리 합니다. 데이터는 속성(props) 으로 받고, 상태(state)에 따라 V..