2일차 | react2

---

yarn 설치
$npm i yarn --global

프로젝트 생성
$yarn create react-app begin
$yarn create react-app 폴더명

$npm install -g create-react-app

cd 프로젝트 폴더로 이동

$yarn start  실행

 

---

React 란?

리액트는 페이스북사에서 만든 자바스크립트 라이브러리입니다. 
페이스북에서 자체적으로 이용되고 있을 뿐 아니라 
많은 웹 어플리케이션이 리액트로 만들어졌습니다.

"리액트는 유저 인터페이스를 만들 수 있는 라이브러리입니다."
-> 사용자에게 보여지는 UI 만들고 사용자가 클릭을 하거나 이벤트가 발생하게 되면 그 이벤트에 맞게 반응하도록 만들어진 라이브러리입니다.

복잡한 웹 어플리케이션을 만들 때 MVC 패턴을 사용합니다.                            
                            MVC 패턴
                    
                           어플리케이션 
              
               Model           View        Controller
                           (React가 담당)

* 리액트는 사용자에게 UI를 보여주고 이벤트를 처리하는 일들을 할 수 있습니다.

React : 웹 어플리케이션 UI 개발
React Native : 모바일 어플리케이션
React + Electron : 데스크탑 어플리케이션

"리액트는 컴포넌트로 이루어져 있는 UI 라이브러리입니다"

컴포넌트 : 버튼과 같은 하나, 한 가지의 기능을 수행하는 UI 단위를 말합니다. 서로 독립적이고 재사용이 가능한 것을 의미합니다.

                                             Root(최상위)

                            header          content         footer

                          logo    menu   article     article    

각각의 독립적인 컴포넌트를 서로 조립해서 만들어 놓는 것을 리액트 애플리케이션이라고 합니다.


컴포넌트 코드

import React from 'react'

class MenuButton extends Component {
    state = {
        num: 0,
    };

    render(){
        return <button>
        {this.state.num}
        </button>;
    }
}
exprot default MenuButton;


state : 데이터를 나타내는 객체
render() : 사용자에게 현재 컴퍼넌트를 어떻게 보여줄지 나타내는 함수(jsx)

"리액트는 데이터가 변경 될 때마다 애플리케이션 전체를 다시 렌더링합니다."

개발자는 데이터가 변경이 되면 해당하는 부분을 업데이트 해야 하는 것을 걱정하지 않아도 됩니다. 리액트는 state에 맞게 render 함수에서 어떻게 표기될 것인지 한 번만 정의하면 알아서 render 함수를 다시 호출해주기 때문입니다.


리액트 공식 사이트
https://reactjs.org/docs/getting-started.html


Create React App을 위한 사이트
https://create-react-app.dev/docs/getting-started


리액트 툴

1. 노드
자바스크립트를 실행할 수 있는 환경

yarn
npm보다 성능을 개선하고 보안이슈를 해결한 페이스북에서 만든 새로운 패키지 매니저입니다.

yarn은 npm 위에서 동작하기 때문에 npm이 설치되어 있어야 합니다.

package.json 을 사용하면서 npm 호환하며 사용합니다.

npm i yarn --global

2. 터미널
운영체제에서 프로그램을 실행할 수 있는 환경

https://cmder.net/

cd 경로 : 해당 디렉토리로 이동
cd .. : 상위 디렉토리로 이동
c: : c드라이브로 이동

폴더 및 파일 삭제
rm -rf test

3. 깃
버전관리를 할 수 있는 툴

4. 크롬 브라우저
React Developer Tools
->앱->웹스토어

5. Visual Studio Code

Reactjs Code snippets
auto import

create react-app
페이스북에서 만든 리액트를 개발하는 개발자들이 공통적으로 사용하는 유용한 툴을 한번에 자동으로 설치할 수 있도록 도와주는 유용한 툴입니다.

yarn create react-app 프로젝트명
cd 프로젝트명
ls -al ---> 깃 설치 확인(숨김폴더 확인)

.gitignore
명시되어 있는 파일들은 깃에 저장하지 않습니다.

package.json
npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들이 명시되어 있습니다.

README.md
프로젝트에 대한 설명을 명시하는 파일입니다.

public 디렉토리
사용자에게 배포할 때 외부적으로 보여지는 리소스들을 포함하는 디렉토리입니다.

src 디렉토리
소스코드를 포함하는 디렉토리입니다.

숨겨진 툴

BABEL
자바스크립트 트랜스컴파일러입니다. 
ECMA Script 2015버전 코드를 이전 버전으로 변환해주는 툴입니다. 
Type Script, JSX같은 순수 자바스크립트가 아닌 문법을 브라우저가 이해할 수 있도록 자바스크립트 코드로 변환해주는 역할을 하기도 합니다.

Webpack
소스코드나 리소스 이미지들을 한 번에 묶어서 번들단위로 사용자에게 제공할 수 있도록 도와주는 툴입니다. 또한 자바스크립트 코드를 줄여주고 긴 변수나 함수의 이름을 해커들이 알아볼 수 없도록 변경해주는 역할도 합니다.

ESLint
코드에 잘못된 점이 있으면 경고를 표시해주는 툴입니다.

Jest
코드를 작성할 때 유닛 테스트를 할 수 있도록 해주는 툴입니다.

PostCSS
css 전처리기 중 하나입니다. 정해진 프레임워크에 따라 css를 작성하면 그 css를 브라우저가 이해할 수 있는 css코드로 변환합니다. 
sass나 less와 비슷하지만 PostCSS는 다양한 플러그인이 있어서 확장성이 좋습니다.

새 프로젝트 만들기

$yarn create react-app begin

cd begin
yarn start


JSX
리액트와 마찬가지로 페이스북에서 개발한 확장 구문입니다. 

- 태그는 꼭 닫혀야합니다.
- 두개 이상의 태그는 무조건 하나의 태그로 감싸야 합니다.
    불필요한 div를 사용하고 싶지 않다면 <> 사용하면 됩니다.
- 주석은 { /* */ } 표현합니다.

- CSS 속성은 스네이크 표기법 -> 카멜표기법(낙타 표기법)
background-color -> backgroundColor

 

.gitignore
명시되어 있는 파일들은 깃에 저장하지 않습니다.

package.json
npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들이 명시되어 있습니다.

README.md
프로젝트에 대한 설명을 명시하는 파일입니다.

public 디렉토리
사용자에게 배포할 때 외부적으로 보여지는 리소스들을 포함하는 디렉토리입니다.

src 디렉토리
소스코드를 포함하는 디렉토리입니다.

[숨겨진 툴]

BABEL
자바스크립트 트랜스컴파일러입니다. 
ECMA Script 2015버전 코드를 이전 버전으로 변환해주는 툴입니다. 
Type Script, JSX같은 순수 자바스크립트가 아닌 문법을 브라우저가 이해할 수 있도록 자바스크립트 코드로 변환해주는 역할을 하기도 합니다.

Webpack
소스코드나 리소스 이미지들을 한 번에 묶어서 번들단위로 사용자에게 제공할 수 있도록 도와주는 툴입니다. 또한 자바스크립트 코드를 줄여주고 긴 변수나 함수의 이름을 해커들이 알아볼 수 없도록 변경해주는 역할도 합니다.

ESLint
코드에 잘못된 점이 있으면 경고를 표시해주는 툴입니다.

Jest
코드를 작성할 때 유닛 테스트를 할 수 있도록 해주는 툴입니다.

PostCSS
css 전처리기 중 하나입니다. 정해진 프레임워크에 따라 css를 작성하면 그 css를 브라우저가 이해할 수 있는 css코드로 변환합니다. 
sass나 less와 비슷하지만 PostCSS는 다양한 플러그인이 있어서 확장성이 좋습니다.

---

App.jsx

import React from 'react';
// import Counter from './component/counter';
// import Input from './component/Input';
// import MutiInput from "./component/MutiInput";
import UserList from "./component/UserList";

function App() {
  return (
    <>
      {/* <Counter/> */}
      {/* <Input/> */}
      {/* <MutiInput/> */}
      <UserList/>
    </>
  );
}

export default App;

counter.jsx

import React, {useState} from "react";



function Counter() {

    // const [현재상태변수, 설정함수r] = useState(초기값); 
    const [number, setNumber] = useState(0) //배열에 따른 비구조 할당


    const plus = () => {
        setNumber(number + 1);
         console.log("1더하기");
    }
    const minus = () => {
        setNumber(number - 1);
         console.log("1빼기");
    }

    return (
      <div>
            <h2>{ number }</h2>
        <button onClick={plus}>1더하기</button>&nbsp;&nbsp;
        <button onClick={minus}>1빼기</button>
      </div>
    );
}

export default Counter;

Input.jsx

import React, {useState} from "react";



function Input() {
    const [text, setTest] = useState('');
    
    const onChange = (e) => {
        setTest(e.target.value);
    }
    const onReset = () => { 
        setTest('');
    }

    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>지우기</button>
            <div>
                <b>값 : ${text} </b>
            </div>
        </div>
    );
}

export default Input;

 

MutiInput.jsx

import React, {useRef, useState} from "react";


function MutiInput() {
    const [inputs, setInputs] = useState({ //초기값을 설정
        userid: '',
        name: ''
    });
    
    const useridInput = useRef(); //Dom 객체를 선택하는 함수

    const { userid, name} = inputs;//비구조화 할당을 통해 값을 전달

    const onChange = (e) => {
        const { value, name} = e.target // 이벤트가 일어난 input 태그에 name속성과 value 속성 e.target에 가져옴
        setInputs({//초기값에서 변하는 값을 설정
            ...inputs,//이벤트가 일어난 input태그에 내용 복사
            [name] : value //복사된 input 태그와 동일한 name 키에 복사한 내용을  value 로 설정
        });
    }
    const onReset = () => { 
        setInputs({
          userid: "",
          name: "",
        });
        useridInput.current.focus();
    }

    return (
      <div>
        <input
          name="userid"
          onChange={onChange}
          value={userid}
                placeholder="아이디"
                ref={useridInput}
        />
        &nbsp;
        <input
          name="name"
          onChange={onChange}
          value={name}
          placeholder="이름"
        />
        &nbsp;
        <button onClick={onReset}>지우기</button>
        <div>
                <b>아이디 : {userid},      </b>
                <b>이름 : {name}      </b>
        </div>
      </div>
    );
}

export default MutiInput;

UserList.jsx

import React, {useRef, useState} from "react";


function User({ user}) { //users 배열을 화면에 출력할 형식을 설정
    return (
      <div>
        <b>{user.username}</b>
        <span>{user.email}</span>
      </div>
    );
}

function UserList() { 
  const users = [
    {
      id: 1,
      username: "김사과",
      email: "apple@apple.com",
    },
    {
      id: 2,
      username: "오렌지",
      email: "orange@orange.com",
    },
    {
      id: 3,
      username: "반하나",
      email: "banana@banana.com",
    },
    {
      id: 4,
      username: "이메론",
      email: "melon@melon.com",
    },
    {
      id: 5,
      username: "배애리",
      email: "berry@berry.com",
    },
  ];

    return (
      <>
        {/* <div>
          <User user={users[0]} />
        </div>
        <div>
          <User user={users[1]} />
        </div>
        <div>
          <User user={users[2]} />
        </div>
        <div>
          <User user={users[3]} />
        </div>
        <div>
          <User user={users[4]} />
        </div> */}

        {/* 위를 한꺼번에 불러오는 방법 */}
        {users.map((user, index) => (
          <User user= {user} key = { index}/>
         ))}
      </>
    );
}

export default UserList;