[WEEK 14] 나만의 무기 만들기 - React 기초

신호정 벨로그·2021년 11월 5일
React
0

Today I Learned

목록 보기
75/89

React 기초 0강: React를 사용하는 이유

웹 애플리케이션(Web-app)을 쉽게 만들 수 있다.

웹 애플리케이션의 장점:

  1. 모바일앱으로 발행이 쉽다.
  2. 앱처럼 뛰어난 UX
  3. 웹사이트보다 비즈니스적 장점

React 기초 1강: Node.js 사용법

node.js를 설치한다.

npx create-react-app blog -> cd blog -> npm start

src/app.js 파일에 코드를 입력한다.

node.js 설치하면 npm 툴이 사용 가능하다.

npm을 통해 create-react-app 사용한다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

app.js는 메인 페이지에 들어갈 HTML을 작성하는 파일이다.

public/index.html이 메인 페이지이다.

src/app.js에 작성한 코드를 src/index.js 파일을 통해 public/index.html에 띄운다.

node_modules 폴더는 라이브러리를 모아 놓은 폴더이다.

public 폴더는 static 파일들을 보관한다.

package.json 파일은 설치한 라이브러리의 목록이다.

React 기초 2강: JSX 사용법

src/app.js 파일에 코드를 작성한다.

src/index.js 파일이 src/app.js에 포함된 HTML 코드를 public/index.html 파일에서 띄운다.

src/app.css 파일에 CSS를 입력한다.

  • 리액트는 JSX라는 문법을 사용한다.
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  font-family: 'nanumsquare';
}

.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px; 
}
  • 리액트는 데이터 바인딩이 쉽다.

데이터 바인딩은 데이터를 HTML에 대입하는 것을 말한다.

React 기초 3강: useState

리액트에서는 데이터를 변수에 저장하거나 state에 저장한다.

import React, { useState } from 'react';

리액트의 내장함수 useState를 사용하여 데이터 저장공간 state를 만든다.

  • ES6 destructuring 문법

var [var1, var2] = [100, 200];

let [var1, var2] = useState('REACT 기초');

var1과 var2에는 각각 [state 데이터, state 데이터 변경 함수]가 저장된다.

  1. state는 변수 대신 사용하는 데이터의 저장공간이다.

  2. useState() 함수를 사용해 만들어야 한다.

  3. 문자, 숫자, array, object 모두 저장 가능하다.

state에 데이터를 저장하는 이유는 웹을 앱처럼 동작하게 만들기 위해서이다.

state는 변경되면 HTML이 자동으로 재렌더링 된다.

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [postTitle, changeTitle] = useState(['REACT 블로그', 'REACT 포스트1', 'REACT 포스트2', 'REACT 포스트3']);

  return (
    <div className="App">
      <div className="black-nav">
        <div>{ postTitle[0] }</div>
      </div>
      <div className="list">
        <h3>{ postTitle[1] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[2] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[3] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

React 기초 4강: addEventListener

onClick={ 클릭 시 실행할 함수 }
onClick={ () -> { 실행할 내용 } }

/* eslint-disable */

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [postTitle, changeTitle] = useState(['REACT 블로그', 'REACT 포스트1', 'REACT 포스트2', 'REACT 포스트3']);
  let [upCount, changUpCount] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <div>{ postTitle[0] }</div>
      </div>
      <div className="list">
        <h3>{ postTitle[1] } <span onClick={ () => { changUpCount(upCount + 1) } }> 따봉 </span> { upCount } </h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[2] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[3] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

React 기초 5강: state 변경

Array, Object state 데이터 수정 방법: 변경함수(대체할 데이터)

/* eslint-disable */

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [postTitle, changeTitle] = useState(['REACT 포스트1', 'REACT 포스트2', 'REACT 포스트3']);
  let [upCount, changUpCount] = useState(0);
  
  function funcTitle() {
    var newTitle = [...postTitle];
    newTitle = ['REACT 포스트111', 'REACT 포스트222', 'REACT 포스트333'];
    changeTitle( newTitle );
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>REACT 블로그</div>
      </div>
      <button onClick={ funcTitle }>BUTTON</button>
      <div className="list">
        <h3>{ postTitle[0] } <span onClick={ () => { changUpCount(upCount + 1) } }> 🙆🏻‍♂️  </span> { upCount } </h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[1] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[2] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

React 기초 6강: 컴포넌트

HTML을 한 단어로 줄여서 쓸 수 있는 방법은 리액트의 컴포넌트 문법을 사용하는 것이다.

컴포넌트의 이름은 대괄호여야 하면 return() 안에 하나의 태그로 묶어야 한다.

/* eslint-disable */

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let [postTitle, changeTitle] = useState(['REACT 포스트1', 'REACT 포스트2', 'REACT 포스트3']);
  let [upCount, changUpCount] = useState(0);
  
  function funcTitle() {
    var newTitle = [...postTitle];
    newTitle = ['REACT 포스트111', 'REACT 포스트222', 'REACT 포스트333'];
    changeTitle( newTitle );
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>REACT 블로그</div>
      </div>
      <button onClick={ funcTitle }>BUTTON</button>
      <div className="list">
        <h3>{ postTitle[0] } <span onClick={ () => { changUpCount(upCount + 1) } }> 🙆🏻‍♂️  </span> { upCount } </h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[1] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ postTitle[2] }</h3>
        <p>2021년 11월 5일</p>
        <hr/>
      </div>
      <Modal/>
    </div>
  );
}

function Modal() {
  return (
    <div className="modal">
        <h2>postTitle[4]</h2>
        <p>postDate</p>
        <p>postContents</p>
      </div>
  )
}

export default App;
profile
신호정 벨로그
hello world
이전 포스트

[WEEK 14] 나만의 무기 만들기 - HTML, CSS, JavaScript 기초

다음 포스트

[WEEK 14] 나만의 무기 만들기 - React 교과서

0개의 댓글