React 배우기 part.2
react로 html styling입히기
- html 코드에 보통 class="" 이렇게 명시하고 css 통해서 styling하지만, react코드 내에서의 html은 아래와 같이 표시해야함
<h1 className="heading"></h1>
ReactDOM.render(
<div>
<h1 className="heading">My Favourite Foods</h1>
</div>,
document.getElementById("root")
);
React로 작성한다는 걸 html에 표기하는법
- type에 text/javascript 대신 text/JSX로 기입함
<script src="../src/index.js" type="text/JSX"></script>
inline styling
- contentEditable을 통해 실제웹페이지에서 글자 수정 가능
- spellCheck을 통해 spelling동시에 확인하는걸 허락할지 안할지 확인 가능
<h1 className="heading" contentEditable="true" spellCheck="false">
My Favourite Foods
</h1>
- 이미지를 넣으려면 꼭 클로징 /> 을 붙여줘야함
<img
className="food-img"
src="https://www.theworktop.com/wp-content/uploads/2019/03/Brioche-French-Toast-1x1.jpg"
/>
const img = "https://picsum.photos/200"
ReactDOM.render(
<img src={img}/>
image
- react에서는 무조건 alt ="" 설명을 달아줘야함. 그래야 틀렸다는 red squiggly line 이 사라짐
<img src={img + "?grayscale"} alt=""/>
color change
- { } 안에 넣어야 하기때문에 아래와 같이 할수있음
ReactDOM.render(<h1 style={{color : "red"}}>Hello World!</h1>, document.getElementById("root"));
- variable을 설정해서 안에 넣을 수 있음
const customStyle = {
color: "red",
fontSize: "20px",
border: "1px solid black"
}
ReactDOM.render(<h1 style={customStyle}>Hello World!</h1>, document.getElementById("root"));
시간대와 날짜에 맞추어 글짜 색 바꾸기
import React from "react";
import ReactDOM from "react-dom";
const currentDate =new Date();
const currentTime = currentDate.getHours();
let greeting;
const customStyle = {
color: ""
}
if(currentTime <12) {
greeting = "Good Morning"
customStyle.color="red"
}
else if (currentTime>12 && currentTime<18) {
greeting = "Good Afternoon"
customStyle.color="green"
} else {
greeting = " Good Evening"
customStyle.color="blue"
}
ReactDOM.render(
<h1 className="heading" style ={customStyle}>
{greeting}
</h1>
, document.getElementById("root"));
React Components (별개의 jsx파일에 코딩하고 링크하기)
import React from "react";
import ReactDOM from "react-dom";
import Heading from "./Heading";
ReactDOM.render(
<div>
<Heading />
<h1>My Favourite Foods</h1>
<ul>
<li>Bacon</li>
<li>Jamon</li>
<li>Noodles</li>
</ul>
</div>,
document.getElementById("root")
);
import React from "react";
function Heading() {
return <h1>MY FAVORITE FOODS</h1>;
}
export default Heading;
- 별도 파일은 ~~.jsx로 저장하고 파일의 내용 상단에도 꼭 붙여줌
import React from "react";
- 보통 일반적으로는 App.jsx 라는파일을 만들어 한번에 관리함
- index.js는 이렇게 App만 import 하고
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />
, document.getElementById("root")
);
- App.jsx는 heading과 list를 링크하고
import React from "react";
import Heading from "./Heading";
import List from "./List";
function App(){
return <div>
<Heading />
<List />
</div>;
}
export default App;
- Heading과 List는 각각 아래와 같이 표현해줌
-------------------------------(Heading)
import React from "react";
function Heading() {
return <h1>MY FAVORITE FOODS</h1>;
}
export default Heading;
-----------------------------(List)
import React from "react";
function List() {
return <ul>
<li>Bacon</li>
<li>Jamon</li>
<li>Noodles</li>
</ul>;
}
export default List;
다른 js 파일 import 하기 (function 포함)
- 먼저 새로운 js파일을 만들어 준뒤 아래와 같이 적용하고,
const pi = 3.141592;
function doublePi () {
return pi*2;
}
function triplePi () {
return pi*3;
}
export default pi;
export {doublePi, triplePi};
- 원래 index.js 에 아래와 같이 import 해준다
import React from "react";
import ReactDOM from "react-dom";
import pi, {doublePi, triplePi} from "./math.js"
ReactDOM.render(
<ul>
<li>{doublePi()}</li>
<li>{pi}</li>
<li>{triplePi()}</li>
</ul>,
document.getElementById("root")
);
- 만약 math.js에 있는 모든걸 다 가져오고 싶다면
import React from "react";
import ReactDOM from "react-dom";
import * as pi from "./math.js"
ReactDOM.render(
<ul>
<li>{pi.default}</li>
<li>{pi.doublePi()}</li>
<li>{pi.triplePi()}</li>
</ul>,
document.getElementById("root")
);