1. 컴포넌트를 페이지에서 렌더링하기 App.js import "./App.css"; const Header = () => { return ( header ); }; function App() { return ( ); } export default App; 리액트는 다른 컴포너트를 태그로 감싸 사용한다. 이때 App처럼 다른 컴포넌트를 return문 내부에 포함하는 컴포넌트를 '부모 컴포넌트'라고 하며, App의 return문에 포함된 컴포넌트를 '자식 컴포넌트'라 한다. Index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const r..
프론트엔드/React
1. 엘리먼트(Element)란? 엘리먼트는 리액트 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술한다. const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. 하지만 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이며 상대적으로 DOM 엘리먼트가 리액트 엘리먼트에 비해 많은 정보를 담고 있어서 크고 무겁다. 1) 엘리먼트 렌더링 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다. 이 코드는 root라는 id를 가진 태그이다. 이 안에 들어가는 모든 엘리멘트는 리액트 DOM에서 관리하기 때문에 이것..
1. 리액트(React) 란? React는 사용자 인터페이스를 구축하기 위한 자바스크립트(JavaScript) 라이브러리이며, “컴포넌트”라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 사이트의 규모가 커지면 커질수록 필요한 수많은 페이지를 잘 만들어 관리한 다는 것은 쉬운 일이 아니다. 따라서 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트라 할 수 있다. 2. JSX란? JSX는 자바스크립트의 확장 문법이다. JSX의 대표적인 코드는 아래와 같다. const element = Hello, world!; const element 까지는 자바스크립트에서 흔히 사용하는 변수 선언이다. 하지만 그 옆을 보면 HTML 코드가 등장하는 것을 볼 수 있다. 즉 ..
