React_실시간 랜더링

export default function App(){

  let number = 0;

  function onIncrease(){

    number += 1;

    console.log(number)

  }

  function onDecrease(){

    if(number == 0){

      number = 0

    } else {

      number -= 1;

    }

    console.log(number)

  }

  return (

    <>

      <h1>{number}</h1>

      <button onClick={onIncrease}>+</button>

      <button onClick={onDecrease}>-</button>

    </>

  )

}

콘솔창에서는 증감이 보이나, 랜더링은 0에서 멈춰 있음

 

import {useState} from 'react';                 //1. import {useState} from 'react'

export default function App(){

  /* state: 사용할 데이터가 변경되면 자동으로 재랜더링 */

  /* 초기화:  일반적인 방법으로는 초기화를 해도 랜더링이 다시 안 됨(App은 한번만 불러오기 때문)

              const[변수명 num, 변경 시 호출될 함수명(ex: setNum)] = userState(0)    //현재 num = 0

              setNum(num + 1);        + 화면이 재랜더링됨                            //현재 num = 1

              배열과 json은 재생성하고 저장하는 방법을 통해 set함

  */

  const[number, setNumber] = useState(0);       //2. const[변수명, 변수가 사용할 떄 쓸 함수명] = usestate

  function onIncrease(){        //변경은 함수가 다 돌아간 다음에 진행

    setNumber(number + 1);                      //3. 함수명(변수명을 포함해 사용 - 변수명 변경)

    console.log(number)

  }

  function onDecrease(){

    setNumber(number === 0 ? 0 : number - 1);

    console.log(number)

  }

  return (

    <>

      <h1>{number}</h1>

      <button onClick={onIncrease}>+</button>

      <button onClick={onDecrease}>-</button>

    </>

  )

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

App.js

import {useState} from 'react';

import TabButton from './components/TabButton';

export default function App(){

  const [x, setX] = useState("");

  function handelEvent(selectedButton){

    console.log("hello BTN", selectedButton)

    setX(selectedButton);

  }

  return(

    <>

    <TabButton onSelect={(e) => handelEvent("JAVA")}>java</TabButton>

    <TabButton onSelect={(e) => handelEvent("SQL")}>sql</TabButton>

    <TabButton onSelect={(e) => handelEvent("REACT")}>react</TabButton>

    <TabButton onSelect={(e) => handelEvent("VUE")}>vue</TabButton>

    <br></br>

    {x}

    </>

  )

}

 

TabButton.js

export default function TabButton({children, onSelect}){

    console.log(children);

    console.log(onSelect);

    return(

        <>

            <button onClick={onSelect}>{children}</button>

        </>

    )

}

 

 

 

 

 

data.js

export const CORE_JOB = {

    intern: {

        name: "홍길동",

        age: 20,

        address:"서울"

    },

   

    manager: {

        name: "이순신",

        age: 30,

        address:"전라"

    },

    assistant: {

        name: "유관순",

        age: 10,

        address:"경기"

    }

}

App.js

import { CORE_JOB } from "./data/data"                    /* 데이터값이 저장된 곳 */

import { useState } from "react"                          /* 실시간 랜더링 */

/* *****수정된 부분***** */

import TabButton from "./components/TabButton";

/* *****수정된 부분***** */

/* ******함수 제거****** */

export default function App(){

  const [selectedName, setSelectedName] = useState();     /* useState를 활용한 초기화 */

  //1. 비동기

  function handleSelect(selectedButton){                  /* () => handleSelect("selectedButton") */

    setSelectedName(selectedButton);                      /* useState를 통해 실시간 랜더링 */

   

    /* 현재 값 */

    console.log("handSelect: ", selectedButton);

    //setSelectedName이 바로 적용 안 되고 스케줄링(배치)로 실행되기 때문에 이전값이 출력됨

    console.log(selectedName);

  }

  let tabContent = <p>이름을 선택하세요</p>;              /* 맨 처음 초기값 */

 

  if(selectedName){                                      /* 상황에 따라 다르게 뿌려줄 태그 */

    tabContent = (                                       /* data.js에서 직종에 따라 다르게 뿌리는 JSON */

      <div id="tab-content">

        <p>{CORE_JOB[selectedName].name}</p>

        <p>{CORE_JOB[selectedName].age}</p>

        <p>{CORE_JOB[selectedName].address}</p>

      </div>

    )

  }

  console.log("App호출");

  return (

    <>

    <h1>1. 비동기</h1>

    <TabButton

      /* *****수정된 부분***** */

      isSelected = {selectedName === "intern"}                            

      onSelect={() => handleSelect("intern")}>INTERN</TabButton>

 

    <TabButton

      /* *****수정된 부분***** */

      isSelected = {selectedName === "manager"}

      onSelect={() => handleSelect("manager")}>MANAGER</TabButton>

 

    <TabButton

      /* *****수정된 부분***** */

      isSelected = {selectedName === "assistant"}

      onSelect={() => handleSelect("assistant")}>ASSISTANT</TabButton>

    <hr></hr>

    {tabContent}

    </>

  )

}

 

TabButton.js

 

/* *****수정된 부분***** */

import "./TabButton.css"

/* *****수정된 부분(isSelected 추가)***** */

export default function TabButton({children, onSelect, isSelected}){      /* 화면에 출력할 내용 */

   

    return(                                                              

        <li>                                                              {/* {onSelect} = 작동시킬 내용 */}

            {/* 버튼을 통해 동적으로 스타일 지정(className 사용) */}        {/* () => handleSelect("직종") */}

            <button

                    /* *****수정된 부분***** */

                    className={isSelected ? "active" : undefined}

                    onClick={onSelect}>{children}</button>

            {/* *****수정된 부분({children} 추가)***** */}

            {children}                                                     {/* {children} = innerText(대문자 직종) */}

        </li>

    )

}