리액트 기본 정리

JSX

• html의 class는 예약어이기 때문에 className으로 대체한다.

<div className="fruit"></div>

• style은 객체를 이용한다. '-' 문자가 있는경우 CalmelCase를 이용한다

<div style={{
        color : "red",
        backgroundColor : "green"
    }}
>abcd</div>

• 변수를 dom에 사용할 수 있다.

function App(){
    const text = 'abcd';
    return(
        <div>{text}</div>
    );
}

• 객체를 dom에 사용할 수 있다.

function App(){
    const site = {
        name : "mysite",
        url : "localhost:3000"
    };
    <a href={site.url}>{site.name}</>
}

• 특정 컴포넌트에 특정 css파일만 import해서 쓰기
  • 파일명을 모듈명.module.css로 생성한다.
  • 다음처럼 import할 수 있다.
  • className은 다른 방식으로 사용해야한다.

import styles from "${path}/Name.module.css";
//클래스 이름
<div className={styles.name}></div>

event

• 함수를 이용한 onClick 이벤트

function App(){
    function alertEvent(){
        alert("이벤트발생");
    }

    return(
        <button onClick={alertEvent}></button>
    );
}

• 직접 onClick에 이벤트 작성

  function App(){
    return(
        <button onClick={
            () => {
                alert("이벤트발생");
            }
        }>alert</button>
    );
  }

• input onChange 이벤트

function App(){
    function changeEvent(e){
        console.loe(e.target.value);
    }

    return(
        <input type="text" onChange={changeEvent}/>
    );
}

state

• useState import

import {useState} from "react";

• javascript 구조분해를 이용해서 변수값을 바꾸면 자동으로 렌더링된다.
  • [변수,변경에 사용할 함수] = useState(초기값);

export default function Hello(){

    let [num,setNum] = useState(100);

    function changeNum(){
        setNum(num++);
    }

    return(
        <h1>{num}</h1>
        <button onClick={changeNum}>버튼</button>
    );
};

props

• props를 이용해서 컴포넌트에 변수를 전달할 수 있다.
• 상위 컴포넌트

///컴포넌트에 값 전달
<Hello price={100}/>

• Hello 컴포넌트

export default function Hello(props){
    //props의 값은 컴포넌트 내부에서 변경할 수 없다.'
    //변경하려면 props를 다시 만들어야한다.
    let [price,setPrice] = useState(props.price);

    console.log('d',props.price);
    return(
      <h1>{props.price}</h1>
    );
};

map을 이용한 반복

wordList.map(word => (
    <Word word={word} key={word.id}/>
))

page이동

• router dom 설치
  • npm install react-router-dom

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App(){
    render(
        <div className="APP">
            <BrowserRouter>
                <Header />  //Switch 바깥은 항상 보여준다.
                <Switch>
                    <Route exact path="/">  //exact를 안적어주면 위에부터 일치하면 보여주기 때문에 /sub에 들어오지 않음.
                        <MainContents />
                    </Route>
                    <Route path="/sub">
                        <SubContents />
                    </Route>
                <Switch/>
                <Footer />  //Switch 바깥은 항상 보여준다.
            </BrowserRouter>
        </div>
    );
}

• Link를 이용한 클릭 이동

import {Link} from "react-router-dom";
export default function MainContents(){
    return (
        <ul className="a">
            <Link to="/sub">
                move
            </Link>
        </ul>
    );
}