[React] 리액트시작하기 ( props,state 사용법)

React 패키지 설치하기 

create-react-app 설치하기 

create-react-app란? 

react를쉽게 사용할수있게 셋팅해준다. 

주의:생성하는폴더명을대문자로시작하면안된다.한글폴더명안된다. 

 

 

npx create-react-app <생성해야 하는 폴더명> 

만약에선택한폴더에사용할경우에는‘.’을입력한다. 

node_modules:reactmodules이이곳에모여있다. 

Public :브라우저에서로딩이되는

기본되는파일들이 있는 곳이다. 

Src:소스파일이자리를잡고있다. 

react 실행 기본 명령어 

npm start 

현재작업을로컬호스트를통해브라우저에실행시킨다. 

npm run build 

App완성시업로드되는압축화일을만들어준다. 

npm test 

작업을테스트작업시사용한다. 

 

 

react실행하기 

1.cd폴더명 

2.npm start 

 

*파일수집이있을경우자동으로loading된다.

이런경우를hotreloading이라한다. 

1. Import React form ‘react’; 

2. Import App from ‘./App’ ; 

3. ReactDOM.render(<App />, document.getElementById(‘root’)); 

4. index.html의 id=“root”에 로딩된다. 

 5. 브라우저에 자동 loading 된다. 

 

2. 기본 셋팅하기 

필요소스가져오기 

 

App.js새로운 폴더를 만들어서 import 할 경우

import from "./";

export default function App(){
    return(
        <>
        < />
        </>
    );
}

 

index,js

 

import React from "react";
import ReactDom from "react-dom/client";
import App from './App';

const root = ReactDom.createRoot(document.querySelector('#root'))
root.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
)

props 사용법

 

function ReactBook(props){
    console.log(props)
    return(
        <dl>
            <dt>title:{props.title} </dt>
            <dd>price:{props.price} </dd>
            <dd>level:{props.level} </dd>
        </dl>
    )
}


//부모쪽에 넣는다

export default function Test02(){
    return(
        <ReactBook 
        title =  'react'
        price =  '10,000원'
        level =  '5'
        />
    )
}

 

state 사용법 

const [변수, 매서드명] = uewState(변수의 초기값)

 

import { useState } from "react"



//const [변수, 매서드명] = useState(변수의 초기값) 
export default function Test04(){
    const [count,setCount] = useState(0);
    //function play(){}
    return(
        <div>
            <h1>count :{count}</h1>
            <p></p>
            <button type="button" 
            //onClick={play}
            onClick={() =>{setCount(count + 1 )}}>
            click</button>
        </div>
    )
}

 

.map() 사용해서 반복문 만들기 예제

 

const allColor = [
    'red','blue','yellow','orange','violet']


function ProColor({color}){
    function optionColor(){
        return(
        color.map((item,index) =>(
        <option value={item} key={index}>{item}</option>))
        )
    }
    return(
        <p>
            <label htmlFor ='color'>color</label>
            <select id= 'color'>
                {optionColor()}
            </select>
        </p>
    )
}


export default function Test07_1(){
    return(
        <ProColor
        color = {allColor} 
        />
    )
}

cdn 으로 사용하기

 

CDN 링크 – React

 

Babel

bable 의 3번 usage <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 가져온다 

그리고 

index.js 파일안에 

스크립트 파일과 바벨 링크를 첨부하고

jsx 사용인 

script src = "" type="text/babel" 을 꼭 넣어줘야 한다