[React] node.js, spa, JSX, component, module, props

React

• 자바스크립트 라이브러리
  API는 라이브러리의 사용방법
• 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리
• 라이브러리들이 하나씩 합쳐져서 뼈대를 이루고 있는게 프레임워크
• 첫페이지만 가져와서 수정이 있으면 그 부분만 change 해줌 = 이런것을 react의 virtual dom이 해줌

React git에서 가져오기
node.js 설치하고 설치하고, git으로 pull 당긴 후,
npm install - node.js 만들기
npm start - node start로 시작

SPA

• Single Page Application - 화면 하나만 가지고 처리하는 구조
• 어떻게? 번들러(Webpack)가 해줌
  node.js를 통해 직접 설정할 수 있음. 그러나 리액트 프로젝트 생성시 자동으로 포함. 번들러는 종류가 많음

---

node.js 설치 및 사용

node.js 홈페이지

• 전역으로 사용해야 하기 때문에 경로 설정 따로 하지 않고 설치
• terminal 창에서 설치 확인
  node -v

• react 프로젝트 생성
  npm create react-app 프로젝트명

프로젝트 폴더 연결

프로젝트 루트를 잡아주기

• node.js 만들기
  npm install
• node.js 시작
  npm start
  ctrl + c : 나가기

JSX, Webpack Loader

쌤 티스토리

리액트 기본

• index.html의 id = root를 index.js로 얻어옴
• React.StricMode는 옛날 기능을 사용할때 경고를 출력하는 기능 (클래스형 컴포넌트)
• root의 render함수는 App컴포넌트를 화면에 그림
• App.js 안의 App함수에서는 return을  JSX 문법으로 완성시킴

---

component (컴포넌트)

• 화면을 구성하는 요소들
• 부분 부분을 사용하기 위해 상속으로 쪼개서 사용
• 컴포넌트 이름의 규칙은 첫번째 글자는 대문자, 카멜 표기법

컴포넌트는 모듈로 export, import 해서 사용

확인할 때 파일 4개 경로 확인

JSX 문법 규칙

1. 주석 alt + shift + a {/* 주석입니다, 반드시 중괄호를 달아야 한다는 아님 */}
2.  return 구문은 반드시 1개이어야 합니다. 반드시 하나의 태그를 리턴해야 함
3. div를 사용(하나의 태그로 묶으면 사용가능)하고 싶지 않으면 Fragment 컴포넌트를 사용
4. 함수 안에서 변수를 만들고 사용하고 싶으면 {name}를 사용
5. if문 대신에 3항 연산자를 사용
6. 화면에 그리고 싶은 내용이 없다면 null을 반환
7. undefined를 반환하는 상황을 만들면 안됨 ▶ 초기화가 안 된 경우
8. DOM에 직접 스타일을 하고 싶은 경우는 객체로 묶고 속성을 카멜표기법으로 사용 (단위 생략시 px)
9. class 속성 대신에 className을 사용
10. 홀로 사용하는 태그는 반드시 닫는 태그를 작성해야 함 (예: {/* <input /> <br /> */})

1. 함수형

• App 컴포넌트는 app.js에서 export하고, index.js에서 import해서 사용

여러개의 컴포넌트로 분리해서 사용 가능

• 함수의 return을 JSX문법으로 완성해서 export 해주고, import 하는 파일에서 태그처럼 사용 가능

app.js

import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';

function App() {

  const name = "홍길동"; //변수
  const age = 20;

  const myStyle = {color: 'red', backgroundColor: 'beige', fontSize: 15};


  return ( //JSX 문법
    <Fragment>
      <ul>
        <li>1. 주석 alt + shift + a {/* 주석입니다, 반드시 중괄호를 달아야 한다는 아님 */}</li>
        <li>2. return 구문은 반드시 1개이어야 합니다. 반드시 하나의 태그를 리턴해야 합니다.</li>
        <li>3. div를 사용(하나의 태그로 묶으면 사용가능)하고 싶지 않으면 Fragment 컴포넌트를 사용합니다.</li>
        <li>4. 함수 안에서 변수를 만들고 사용하고 싶으면 {name}를 사용합니다.</li>
        <li>5. if문 대신에 3항 연산자를 사용합니다.</li>
        <li>6. 화면에 그리고 싶은 내용이 없다면 null을 반환합니다.</li>
        <li>7. undefined를 반환하는 상황을 만들면 안됩니다. ▶ 초기화가 안 된 경우</li>
        <li>8. DOM에 직접 스타일을 하고 싶은 경우는 객체로 묶고 속성을 카멜표기법으로 사용합니다. (단위 생략시 px)</li>
        <li>9. class 속성 대신에 className을 사용합니다.</li>
        <li>10. 홀로 사용하는 태그는 반드시 닫는 태그를 작성해야 합니다. (예: {/* <input /> <br /> */})</li>
      </ul>

      <div className='App' style={myStyle}> {/* 첫번째 {} JSX문법 사용할거야, 두번쨰 {} 객체야 */}
        안녕하세요<br/>
        {name === '홍길동'? '홍길동입니다' : '홍길동이 아닙니다'}
        {name === '이순신'? <h3>이순신입니다</h3> : <h3>이순신이 아닙니다</h3>}
        {age === 30? <h3>20입니다</h3> : null} {/* 화면에 나타나는게 없음 */}
      </div>

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          안녕하세요?
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    
    </Fragment>
    

  );
}

export default App;

2. 클래스형

• class 속성 대신에 className 사용
• 리액트에서 제공하는 Component라는 모듈을 상속 받아야 함 (extends Component)
• 클래스형에서는 생성자를 작성할 때 반드시 props를 받고, super를 통해서 부모 컴포넌트에 연결해야 함
• 클래스형 컴포넌트를 render 함수 안에서 return문을 작성

app.js

import { Fragment } from "react";
import MyComponent from "./component/MyComponent";
import MyComponent2 from "./component/MyComponent2";
import MyComponent3 from "./component/MyComponent3";

/* ES6 문법 */
const App = () => {
    return (
        <Fragment>
        <h3>App.JS</h3>
        <MyComponent /> {/* 하나로 끝나는 태그, 재활용 가능 */}
        {/* <MyComponent /> 주석처리 가능 */}
        {/* props: 하위 컴포넌트로 전달되는 데이터 값 */}
        <MyComponent name={'홍길동'} age={20} email={'aaa@naver.com'} /> {/* (1) 상위 컴포넌트에서 값을 넣고 */}
        <MyComponent2 name={'이순신'} />
        <MyComponent2 name={'홍길자'}/>

        {/* 클래스형 props */}
        <MyComponent3 name={'세종대왕'}/>
        </Fragment>
    )
}

export default App;

MyComponent3.js

import { Component } from "react";


class MyComponent3 extends Component { /* 리액트에서 제공하는 Component라는 모듈을 상속 받아야 함 */
    /* 
        state는 생성자 안에서 초기화를 합니다.
        state의 접근은 this.state를 이용해서 접근합니다.
        state는 반드시 객체모형 이어야 합니다.

        클래스형에서는 생성자를 작성할 때 반드시 props를 받고, super를 통해서 부모 컴포넌트에 연결해야 합니다.
    */
    constructor(props) { //이렇게 해줘야 error를 피할 수 있음
        super(props);
        this.state = { //this.state는 반드시 객체 모형이어야 함
            a: 1,
            b: props.name //부모로부터 전달받은 name
        }
    }


    //클래스형 컴포넌트를 render 함수 안에서 return문을 작성
    render() {

        let {name} = this.props; //props
        console.log(name);
        
        return (
            <>
                <hr/>
                <div>아... 이건 클래스형 컴포넌트</div>
                state값: {this.state.a};
                state값: {this.state.b};
            </>
        )
    }

}

export default MyComponent3;

class 형 컴포넌트에서 받아오기

---

props [ 중요 ]

• 부모에게 자식으로 데이터 전달 가능
• 하위 컴포넌트로 전달되는 데이터 값

• src/index.js에서 두번씩 렌더링 될 때

 

1. 실습

• 첫번째 매개변수로 props를 받아서 찍어보면 객체가 나옴
• name, age, email을 설정 =  하위 컴포넌트에서 값을 뿌려줌

2. 실습 - 구조 분해 할당

3. 실습 - props하지 않고 직접 넣어서 사용

객체 사용

---

props의 기본값

props의 타입검증

---

오늘 하루

기억에 남는 부분

- 

- 

 

어려운 부분

- 

- 

 

문제 해결 부분

- 

-