55일차 시작....

📌 React

• React
  - Node.js 기반 자바스크립트 프레임워크

---

📌 React 설정 및 Node 서버 실행

• 설치
  1. Node.js 다운로드 ( v14 )
  2. 터미널 실행
  3. npm install -g yarn : node 실행 매니저 설치
  4. npm install -g create-react-app : 리액트 앱 생성 매니저 설치
  5. 리액트 앱을 만들 폴더로 이동
  6. create-react-app 프로젝트명
  
  
• node-modules 설치
  - npm install
  
  
• 서버 구동
  - yarn start
  
  
• Emmet 기능
  - 설정>Emmet>Trigger Expansion On Tab
  - 설정>Emmet>Emmet:Include Languages>key: javascript, value: javascriptreact 입력

---

📌 JSX (JavaScript Xml)

• JSX
  - JavaScript와 Xml 문법을 동시에 사용하는 것
  - () 키워드로 감싸서 사용한다.

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

---

📌 React 사용 시 필요한 패키지 설치 (in VSC)

• ES7+ React/Redux/React-Native snippets

---

📌 React 문법

• DOM 문법

- 클래스 부여 : className 속성 사용

<div className="container">

- 변수 사용 : {변수명}

<p>이름 : <strong>{myName}</strong></p>

- onClick 이벤트 : onClick={() => {}}
- onClick 이벤트 : onClick={alertBtn()}

<button onClick={() => {
  	alert("버튼1");
  }}>버튼1</button>

<button onClick={alertBtn}>버튼2</button>

function alertBtn() {
  alert("aa");
}

- img 파일 모듈화 : import img1 from './images/1.jpg'

import img1 from './images/1.jpg';

<img src={img1}/>

- inline style 오브젝트로 만들기

const myStyle = {
  color: "black",
  width: "100px",
  height: "100px",
  border: "1px solid yellow",
  backgroundColor: "blue"
};

<div style={myStyle}>div1</div>

• App 형식

- 클래스 기반 React
-> 기능이 많다.

import { Component } from "react";

class App2 extends Component{

    // render 메소드 리턴값은 DOM
    render() {

        return (
            <div className="container">

            </div>
        )
    }
}

// 클래스를 export 한다.
export default App2;

- 함수 기반 React
-> 리소스를 덜 차지해서 가볍다.

function alertBtn() {
  alert("aa");
}

function App() {
  return (
    <div className="container">
      <h1>hello React</h1>
      <p>이름 : <strong>{myName}</strong></p>
      <button onClick={() => {
        alert("버튼1");
      }}>버튼1</button>
      <button onClick={alertBtn()}>버튼2</button>
    </div>
  );
}

// 함수를 export 한다.
export default App;

---

📌 React 문법2

• DOM 문법

- 오브젝트 내부 변수 사용
- state : Component에서 상속받은 변수 저장용 오브젝트
- 변수 사용 방법 : this.state.키값
- value값 변경 방법 : 직접 바꾸기 안됨
-> this.setState({키값: value값}) : 함수 사용

state={
    myName:"김구라"
};

<p> 내이름은 : {this.state.myName}</p>

// 내부 작성 함수 사용해서 변수 바꾸기
<button onClick={()=>{
    //state 값을 직접 수정하면 안된다. 
    //this.state.myName = "원숭이";
    /*
        state 값을 수정하기 위해서는 Component 로 부터 상속받은 메소드
        setState() 를 이용해서 수정해야 한다.
    */
    this.setState({
        myName:"원숭이"
    });
}}>이름 바꾸기</button>

// 함수 사용해서 변수 바꾸기
<button onClick={this.changeClicked}>이름 바꾸기</button>

changeClicked = ()=>{
    console.log("changeClicked!");
    this.setState({
        myName:"원숭이"
    });
};

• ref 속성
  - ref 속성을 지닌 해당 요소의 참조값을 파라미터로 전달함
  - ref 속성값 = {(ref) => {로직....}}
  - this.inputMsg : 동적으로 필드를 만들어 해당 필드의 값이 해당 태그의 참조값을 얻도록 한다.

<input type="text" ref={(ref)=>{
    //함수의 인자로 전달된 input 요소의 참조값을 inputMsg 라는 이름의 필드에 저장하기
    this.inputMsg=ref;
}}/>

---