#3-1 / React 문법 (조건문 ,반복문,배열)

🤷‍♂️❓ 알아두쇼 - 함수 종류

일반함수, 선언적 함수 , 익명함수, 대입형함수 => hoisting, arguments,

즉시실행함수, 화살표함수, 명명함수, return함수

중첩함수 , callback함수 , 로드함수 , 전역함수(eval)

 

  👀 조건문 , 반복문  

- App.js

import './App.css';
import { Route,Routes } from 'react-router-dom'; //페이지 분리
import {Login} from "./Login";
import {Main} from "./Main"
import {Top} from "./Top" //하단 페이지
import {Footer} from "./Footer" //하단 페이지

import {Oop} from './Oop'; // 요거 추가

function App() {
  return (
    <>
      <Top />
      <Routes>
        <Route path="/" element={<Main/>}></Route>
        <Route path="/Login" element={<Login/>}></Route>
        <Route path="/Oop" element={<Oop />}></Route> //추가
      </Routes>
    </>
  );
}

export default App;

 

 

- Oop.js

import React,{ useState } from "react";

//if문 , 반복문
export let Oop = function(){
    //if문에 사용하는 변수값
    var [result1,resultdata1] = useState('1')
    //if문으로 설정하는 함수(조건에 맞는 HTML 태그를 출력)
    var if_data = function(result1){
        var htmlcode = []; //html code가 담길 변수(배열에 html 태그 담을거임)
        //key : unique key (React가 구분하기 위한 설정 속성값 / 한 조건 안에 두번 사용 불가)
         //key 사용안하면 출력은 되지만 console에 에러가 엄청뜸ㅎ
        if(result1=="1"){
            htmlcode.push(<li key={result1}>출력</li>);
        }else if(result1=="2"){
            htmlcode.push(<li key={result1}>미출력</li>);
        }
        return htmlcode; //조건에 맞는 값을 셋팅 후 결과를 return 시킴
    }


    //반복문에 사용하는 key배열
    var [result2,resultdata2] = useState(20); 
    let for_data = function(){
        var htmlcode = [];
        for(var a=1; a<=result2; a++){
            htmlcode.push(<li key={a}>{a}</li>);
        }
        return htmlcode; //결과값 return
    }


    //해당 조건문 함수를 호출하여 결과값 return받아서 랜더링을 함
    return(
        <section>
            <ol>
                {if_data(2)}
            </ol>

            <ul>
                {for_data()}
            </ul>
        </section>
    );
}

 

요렇게 출력

 

  👀 배열 

- App.js

Route, import에 Array 추가 

 

- Array.js

import React,{ useState } from "react";


//1차 원시배열
let data = function(){
    var html = []; //HTML 태그를 담는 배열 변수
    var arr = [1,2,3,4,5]; //{},[],key배열 등 모든 배열 가능
    arr.forEach(function(a,b,c){ //배열 전용 반복문
        html.push(
            <li key={b}>{a}</li>
        )
    });

    return html;
}

let data2 = function(){
    var html = [];
    var arr = [
        {id : "hong" , name : "홍길동" , age : "25"},
        {id : "kim" , name : "김유신" , age : "35" }
    ];

    arr.forEach(function(a,b,c){
        html.push(
            <li>
                <label key={b}>
                    <input type="checkbox" />아이디 :  {a.id} / 고객명 : {a.name}<br />
                </label>
            </li>
        )
    })

    return html;
}

export let Array = function(){
    return(
        <section>
            <ul>
                {data()}
            </ul>

            <ol>
                {data2()}
            </ol>
        </section>
    );
}

 

요렇게 출력 ㅎ