React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

Component-based : 컴포넌트 기반

컴포넌트를 조합해서 웹 페이지를 나타낸다.

문법은 JSX문법.

---

cmd 들어가서

cd React -> 해당 프로젝트 폴더에 들어간다.

-프로젝트 설치
yarn create react-app <프로젝트 이름>

-프로젝트 실행
해당 프로젝트 폴더로 이동하여 yarn start 입력

---

function App() {

//함수형 컴포넌트

}

---

JSX 문법

장점 : 일반 자바스크립트 보다 간편하다, 가독성이 좋다.
html과 코드가 비슷하기 때문에 html을 안다면 JSX를 작성하는데에 문제가 없다.

1. 부모 요소로 무조건 감싸줘야한다. like div태그 아님 저스트 <>만 있어도 된다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>리액트!</h1>
    </div>
  )
}

export default App;

2. 자바스크립트 표현식을 사용하려면 {}로 감싸줘야한다.

import React from 'react';

function App() {
  const name = "코딩온";

  return (
    <div>
      <h1>{name} 리액트!</h1>
    </div>
  )
}

export default App;

3. 조건부 연산자(IF문) X -> jsx 밖에서 사용하거나 중괄호를 사용.

{ 조건식 ? (true) : (false) }

import React from 'react';

function App() {
  const name = "코딩온";

  return (
    <>
      { name === "코딩온" ? (<h1>코딩온입니다.</h1>) : (<h2>코딩온이 아닙니다.</h2>)}
    </>
  )
}

export default App;

false일 때 아무것도 보고싶지않으면 null 적기

import React from 'react';

function App() {
  const name = "코딩온";

  return (
    <>
      { name === "홍길동" ? (<h1>코딩온입니다.</h1>) : null }
    </>
  )
}

export default App;

&&연산자 -> 조건식이 참이면 그 뒤에 코드 실행 아니면 아무것도 실행 X

import React from 'react';

function App() {
  const name = "코딩온";

  return (
    <>
      { name === "코딩온" && <h1>코딩온입니다.</h1> }
    </>
  )
}

export default App;

4.카멜표기법(background-color를 backroundColor 이렇게 표기)

import React from 'react';

function App() {
  const name = "코딩온";
  const style = {
    backgroundColor : "orange",
    color : "black",
    fontSize : "40px",
    fontWeight : "bold"
  };

  return (
    <>
      <div style={style}>
        {name}
      </div>
    </>
  )
}

export default App;

이런식으로 그냥 넣어줄 수도 있음

import React from 'react';

function App() {
  const name = "코딩온";
  const style = {
    backgroundColor : "orange",
    color : "black",
    fontSize : "40px",
    fontWeight : "bold"
  };

  return (
    <>
      <div style={{
          backgroundColor : "orange",
          color : "black",
          fontSize : "40px",
          fontWeight : "bold"
      }}>
        {name}
      </div>
    </>
  )
}

export default App;

주석은

/* */

5. CSS는 className으로 사용.

import React from 'react';
import './App.css';

function App() {
  const name = "코딩온";

  return (
    <>
      <div className="test">
        {name}
      </div>
    </>
  )
}

export default App;

.test{
  background : blue;
  color: ivory;
  font-size: 40px;

}

6. 태그는 무조건 닫아줘야한다.

---

컴포넌트

함수형 컴포넌트

클래스형 컴포넌트

import React from 'react';
import {Component} from 'react';

class App extends Component {
  render() {
	return(
    
    )
  }
}

export default App;

다른 컴포넌트를 불러오기

#App.js


import React from 'react';
import {Component} from 'react';
import Test from "./Test";

class App extends Component {
  render() {
    return(
      <Test />
    )
  }
}

export default App;

#Test.js


import React from 'react';
import {Component} from 'react';

class Test extends Component {
    render() {
        return(
            <div>
                안녕하세요
            </div>
        )
    }
}

export default Test;

컴포넌트 속성값 : properties => props

#함수형 컴포넌트


import React from 'react';

const Test = () => {
	return(
    
    )
}

export default Test;

---

import React from 'react';

const Test = props => {
    return(
        <div>안녕, 난 {props.hello}이야!</div>
    )
}

export default Test;

import React from 'react';
import {Component} from 'react';
import Test from "./Test";

const App = () => {
  return(
    <Test hello="코딩온이지롱"></Test>
  )
}

export default App;

태그 사이의 값을 가져오는 것 : children

import React from 'react';
import {Component} from 'react';
import Test from "./Test";

const App = () => {
  return(
    <Test hello="코딩온이지롱">하하하하</Test>
  )
}

export default App;

import React from 'react';

const Test = props => {
    return(
        <>
            <h1>안녕, 난 {props.hello}이야!</h1>
            <br />
            <h2>children의 값은 {props.children}</h2>
        </>
    )
}

export default Test;

props를 앞에서 미리 선언하는 것도 있음

import React from 'react';

const Test = props => {
    const { hello, children } = props;

    return(
        <>
            <h1>안녕, 난 {hello}이야!</h1>
            <br />
            <h2>children의 값은 {children}</h2>
        </>
    )
}

export default Test;

props 자리에 넣어줘도 됨

import React from 'react';

const Test = ({ hello, children }) => {
    return(
        <>
            <h1>안녕, 난 {hello}이야!</h1>
            <br />
            <h2>children의 값은 {children}</h2>
        </>
    )
}

export default Test;

---

클래스형 컴포넌트 props 불러오기

import React from 'react';
import {Component} from 'react';
import Test from "./Test";

const App = () => {
  return(
    <Test name="코딩온">하하하하</Test>
  )
}

export default App;

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Test extends Component {
    render() {
        const { name, children } = this.props;

        return(
            <>
                <div>안녕하세요, 제 이름은 {name}입니다.</div>
                <br />
                children 값은 {children}입니다.
            </>
        )
    }
}

export default Test;

---

CDN 링크

#REACT 라이브러리 삽입

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

<body>
	<div id="root"></div>
</body>

<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
-> <h1>Hello, world!</h1>

//append()와 유사.
ReactDom.render(element, rootElement); //rootElement에 element 삽입.
</script>

<body>
	<div id="root"></div>
</body>

<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children : "Hello, world!" });
const element2 = React.createElement("p", null, "Bye bye!");
const element3 = React.createElement("h3", null, "Bye world!");
const form = React.createElement("div", null, [element, element2, element3]);
-> <div>이 태그 사이에 element들이 들어가서 나타남</div>

ReactDom.render(element, rootElement);
</script>

---

state 상태값

-클래스형 컴포넌트가 가지고있는 state
-함수형 컴포넌트가 가지고있는 useState

클래스형 컴포넌트

import React, {Component} from 'react';

class Enter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            enter: 0
        };
    }

    render() {
        const { enter } = this.state;

        return (
            <div>
                <h2>입장한 사람 수 : {enter}명</h2>
                <button onClick={() => {
                    this.setState({ enter : enter + 1});
                }}>
                    입장
                </button>
            </div>
        )
    }
}

export default Enter;

import React, {Component} from 'react';

class Enter extends Component {
    state = {
        enter: 0
    };
    
    render() {
        const { enter } = this.state;

        return (
            <div>
                <h2>입장한 사람 수 : {enter}명</h2>
                <button onClick={() => {
                    this.setState({ enter : enter + 1});
                }}>
                    입장
                </button>
            </div>
        )
    }
}

export default Enter;

함수형 컴포넌트

import React, { useState } from 'react';

const Lan = () => {
    const [ msg(현재상태), msg_change(행동하는 함수) ] = useState("");
    const KorEnter = () => msg_change("안녕안녕??");
    const EngEnter = () => msg_change("hello hello??");

    return(
        <div>
            <h1>{msg}</h1>

            <button onClick={KorEnter}>한국어</button>
            <button onClick={EngEnter}>영어</button>
        </div>
    )
}

export default Lan;