'2020'에 해당되는 글 497건

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 />;
}
export default App;

InputSample.js

import React, { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });
  const { name, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    //객체 상태를 업데이트 할때에는 객체를 복사하고 나서 덮어씌우고 업데이트 해줘야 한다.

    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
  };
  return (
    <div>
      <input name="name" onChange={onChange} placeholder="이름" value={name} />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: 닉네임</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

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 <Counter />;
}
export default App;

Counter.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 (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}></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;

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 하시면 실행이 됩니다.

html

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<h1> 안녕하세요</h1>
	<p>환영합니다.</p>
	<button id="open"> 모달 열기</button>
	<div class="modal-wrapper" style="display: none">
		<div class="modal">
			<div class="modal-title">
				안녕하세요
			</div>
			<p> 모달 내용</p>
			<div class="close-wrapper">
				<button id="close"> 닫기</button>
		</div>

	</div>

	<script src="src/index.js">
	</script>
</body>

</html>

css

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 15px;
  width: 300px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.close-wrapper {
  text-align: right;
}

JS

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");

open.onclick = () => {
  modal.style.display = "flex";
};

close.onclick = () => {
  modal.style.display = "none";
};