TIL 2021.01.09
Component에 대해 선언적 사용이 가능한 JS 라이브러리
Single Page Application (SPA) 개발도구
서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. (Wikipedia)
Flux Architecture
JSX : JavaScript eXtension
npx create-react-app . --template=typescript
npm install -S styled-components react-router-dom dotenv
npm install --save-dev @types/styled-components babel-plugin-styled-components @types/react-router-dom
npm install -D gh-pages
npm audit fix
# npx 대신 npm install -g (전역) 도 ok
npx create-react-app <appname> --template=typescript
cd appname
npm start
// index.tsx
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
// ReactDOM이 위 태그들을 해당 root DOM에 Render한다.
// <App/> 실제로 화면에 나타나는 컴포넌트
//App.tsx
function App() {
return <div></div>; //JSX 방식
}
// button.tsx
import React from "react";
//* Props 타입 명시
// 컴포넌트가 상위 컴포넌트로 부터 어떤 속성을 전달받을 지에 대한 props 정의
interface ButtonProps {
children?: React.ReactNode;
width: number; //상위 요소가 버튼의 width를 수정할 수 있게함
onClick?: ()=> void;
}
const Button: React.FC<ButtonProps> = (props) => {
// React.FC (React의 함수형 컴포넌트)
const { width, children, onClick } = props; // props 객체
return (
<button
style={{
width: `${width}px`,
height: "30px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
onClick = {onClick}
>
{children}
</button>
);
};
export default Button
// App.tsx
import React from "react";
import Button from "./component/button";
function App() {
const alarm = () => {
alert("Hi~");
};
return (
<div>
<Button width={100} onClick={alarm}>
<div>This is Button</div>
</Button>
</div>
);
}
//* Props 전달
// App에서 Button으로 props 전달
// Button의 하위 요소로도 전달 가능
// 상위에서 하위로 전달되는 구조
// JSX로 작성