#TIL (May 20th, 서른다섯번째 이야기)

Jung Hyun Kim·2020년 5월 20일
0

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"; //import 로 받는다 

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"; //heading.jsx 파일의 내용

function Heading() {
  return <h1>MY FAVORITE FOODS</h1>;
}

export default Heading; // export로 보내주고 
  • 별도 파일은 ~~.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}; //아래 function 을 export 해준뒤 
  • 원래 index.js 에 아래와 같이 import 해준다
import React from "react";
import ReactDOM from "react-dom";
import pi, {doublePi, triplePi} from "./math.js"
//doublePi와 triplePi는 함수기 때문에 아래 ()를 뒤에 붙여줌

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")
);

profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글