React란
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
SPA를 전제로 하고 있고 virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에 렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다. SPA 싱글페이지 어플리케이션은 서버에서 html 페이지를 일일이 다운 받는게 아니다 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시 . 사용자가 페이지 리로딩 할 필요가 없다 . 매끄러움
자바스크립트는 변경사항이 있을때 마다 레이아웃 단계와 페인트 단계를 초래하게 된다.
virtual DOM - 가상돔
Component 는 외부에서 사용할 있도록 export 해주어야함 / export 된 Component 를 가져와 사용하려면 import 해주어야함
Component를 만들때는 반드시 가장 첫 글자를 대문자로 만들어야함!!!!
컴포넌트는를 외부에서 사용할 수 있도록 export 해줘야하고
export된 Component를 사용하려는 경우에는 임포트를 해주면 된다!!!
Component를 부모자식 관계로 설정할 수 있다.
const handleClick = () => {
alert("클릭!");
};
<button onClick={handleClick}>클릭!</button>
호출 할때 () 생략 {} 사용함
부모 자식 태그 연결
// src/App.js
import React from "react";
function Child() {
return <div>연결 성공!</div>;
}
function Mom() {
return <Child />;
}
function GrandFather() {
return <Mom />;
}
function App() {
return <GrandFather />;
}
export default App;
JSX Component에 생김세를 정의
1.태그는 꼭 닫아야함. / <——
2.jsx는 한개의 태그로 묶어줘야함 한개의 엘리먼트만 반환 가능하기 때문에
3.jsx 자바스크립트를 사용하려면 중 괄호를 반드시 써야함
4.class 대신 className를 써야함
5.Html 태그에 스타일을 직접 넣을 수 없다
