'2020/React'에 해당되는 글 12건

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"></Hello>
      <Hello color="pink"></Hello>
    </Wrapper>
  );
}
export default App;

Hello.js

import React from "react";

//첫번째 컴퍼넌트 생성
// function Hello(props) {
//   return (
//     <div
//       style={{
//         color: props.color
//       }}
//     >
//       안녕하세요{props.name}
//     </div>
//   );
// }
// 비구조화 할당시
function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color
      }}
    >
      {/* isSpecial값이 true면 * 추가 아니면 null*/}
      {isSpecial ? <b>*</b> : null}
      {/* {isSpecial && <b>*</b>} */}
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음"
};
export default Hello;

Wrapper.js

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: 16
  };

  return <div style={style}>{children} </div>;
}

export default Wrapper;

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: 30,
    padding: "1rem"
  };
  return (
    <>
      <Hello style={style} name={name} isSpecial />
      <div style={style}>{name}</div>
      <div className="gray.box"></div>
    </>
  );
}
export default App;

Hello.js

import React from "react";

//첫번째 컴퍼넌트 생성
// function Hello(props) {
//   return (
//     <div
//       style={{
//         color: props.color
//       }}
//     >
//       안녕하세요{props.name}
//     </div>
//   );
// }
// 비구조화 할당시
function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color
      }}
    >
      {/* isSpecial값이 true면 * 추가 아니면 null*/}
      {isSpecial ? <b>*</b> : null}
      {/* {isSpecial && <b>*</b>} */}
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음"
};
export default Hello;

InputSample.js

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  };
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

app.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
function App() {
  return <InputSample></InputSample>;
}

export default App;

node js: 브라우저 환경이 아닌 곳에서도 자바스크립트를 실행할 수 있도록 도와주는 런타임

yarn: 자바스크립트 도구를 매니징하는 도구 (npm 비슷한거.. npm보다 빠름)

VSCode

1. node js, yarn, VSCODE를 설치해주고 git bash 창을 열어 확인해 줍니다.

2. 자기가 원하는 폴더에 새로운 리액트 프로젝트를 만들어 봅시다. (저는 d: react-study폴더에 만들거에요)

cd d:

mkdir react-study

npx create-react-app begin-react

하면 begin-react 폴더가 만들어지고 생성이 됩니다. 

그 후에 vscode로 열어 줍니다.

3. git bash 에서 우리가 생성한 프로젝트 begin-react 폴더로 들어가서 yarn start를 해줍니다

cd begin-react

yarn start

4. 그러면

이러한 브라우저창이 뜨게 됩니다^^

개발 서버를 끄고 싶으시면 git bash창에서 ctrl + c를 하시면 서버가 꺼집니다.

vscode 내에 terminal 에서 서버를 켜고 싶으신 분들은 terminal 창에서 yarn start 하시면 실행이 됩니다.