-
프론트엔드 개발자를 위한 리액트 기초 part-3Javascript& React study 2021. 2. 24. 21:50728x90반응형SMALL
리액트에서 컴포넌트라는 것은 개념적으로 prop를 input으로 하고 UI가 어떻게 보여야 하는지 정해야 하는 React Element를 output으로 하는 함수를 뜻합니다. 그래서 합성을 이용해서 UI를 재사용할 수 있으며 또한 독립적인 단위로 쪼개서 생각을 할 수 있습니다 그래서 컴포넌트라는 것은 React.Component 를 상속받아서 정의를 할 수 있지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장합니다.
또한 UI를 구성하기 위해서는 화면에 컴포넌트를 그리면서 갱신하고 지워야 하는데 여기서 컴포넌트는 각 프로세스가 진행이 될 때 Lifecycle 함수로 불리는 특별한 함수가 실행이 됩니다. 여기서 개발자는 이를 재정의하면서 컴포넌트를 제어하게 됩니다.
리액트에서 컴포넌트 만들기
// App.js
import React from "react";
import "./App.css";
function App() {
return <div>Hello React!</div>;
}
export default App;터미널에서 npm start로 React코드를 실행시키면 된다.
이 코드는 App함수는 React에서 사용하는 하나의 큰 컴포넌트이다.
return에서 우리가 화면에 그리고자 하는 HTML을 작성하면 react가 HTML을 인식하고 브라우저에 그리게 된다.
import React from "react";
import "./App.css";
function App() {
return (
<div>
<div>Hello React!</div>
<button>button</button>
// 버튼 추가
</div>
);
}
export default App;JSX 가 무엇일까요?
function App() {
return <div>Hello React!</div>;
}- 여기서 <div>Hello React!</div>는 HTML을 다루는 방식으로 JSX라고 부릅니다.
- JSX는 React에서 HTML을 쉽게 사용할 수 있는 문법이라고 보면 된다.
- 브라우저는 HTML,CSS,Javascript만 이해할 수 있지만 어떻게 저런 문법을 사용할 수 있는것일까?
- 그것은 create react app으로 React앱을 최초 생성할 때 설치되는 라이브러리 babel이 JSX라는 문법을 이해할 수 있게 해줍니다.
- 이는 JSX로 HTML을 작성하면 React 파일을 실행하게 될 떄 babel이 자동으로 JSX를 코드를 브라우저가 이해할 수 있는 Javascript 코드로 변환해준다.
728x90반응형LIST'Javascript& React study' 카테고리의 다른 글
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자2 (1) 2021.10.08 [JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자 (2) 2021.10.07 프론트엔드 개발자를 위한 리액트 기초 part-2 (0) 2021.02.23 프론트엔드 개발자를 위한 리액트 기초 Part-1 (0) 2021.02.22 취업반 7주차 체크박스와 배열 (0) 2018.06.06