useState, 이벤트, hook

자식에게이벤트전달패턴

 

import React from 'react';
import TabButton from './assets/components/TabButton';
function App() {
//부모에서 자식 이벤트 핸들러 구현

function handleEvent(){
  console.log("hellobutton");
}
//App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨
console.log("App Component")

return (
  <div>
    {/*onSelect 대신에 임의의 값 사용가능
    자식 호출 시 이벤트 함수 를 전달함
매우 많이 사용되는 중요한 패턴임*/}
    <TabButton onSelect={handleEvent}>Java</TabButton>
    <TabButton onSelect={handleEvent}>SQL</TabButton>
    <TabButton onSelect={handleEvent}>SPRING</TabButton>
    <TabButton onSelect={handleEvent}>SpringBoot</TabButton>
    <TabButton onSelect={handleEvent}>Vue</TabButton>
  </div>
);
}
export default App;

import React from 'react';

function TabButton({children, onSelect}) {
    console.log("TableButton Component");
    return(
        <div>
            <button onClick={onSelect}>{children}</button>
        </div>
    );
}

export default TabButton;

 

 

 자식에게이벤트전달패턴2동적처리_화면갱신은안됨

 

import React from 'react';
import TabButton from './components/TabButton';
function App() {
  var x ="버튼을 선택하세요";
//부모에서 자식 이벤트 핸들러 구현

function handleEvent(selectedButton){
  console.log("hellobutton",selectedButton);
  //일반적인 변수는 화면 갱신이 안됨, 왜냐하면 app이 한번만 실행되기 때문
  x = selectedButton; //useState hook을 이용하여 해결
  console.log("x===============",x);
}
//App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨
console.log("App Component")

return (
  <div>
    {/*onSelect 대신에 임의의 값 사용가능
    자식 호출 시 이벤트 함수 를 전달함
매우 많이 사용되는 중요한 패턴임*/}
    <TabButton onSelect={(e)=>handleEvent("Java")}>Java</TabButton>
    <TabButton onSelect={(e)=> handleEvent("SQL")}>SQL</TabButton>
    <TabButton onSelect={(e)=>handleEvent("spring")}>SPRING</TabButton>
    <TabButton onSelect={(e)=>handleEvent("springboot")}>SpringBoot</TabButton>
    <TabButton onSelect={(e)=>handleEvent("Vue")}>Vue</TabButton>
 <h3>선택된 출력값: {x}</h3>
  </div>
);
}
export default App;

 

 

import React from 'react';

function TabButton({children, onSelect}) {
    console.log("TableButton Component");
    return(
        <div>
            <button onClick={onSelect}>{children}</button>
        </div>
    );
}

export default TabButton;

import React from 'react';
import TabButton from './components/TabButton';
function App() {
  var x ="변경될 데이터";
//부모에서 자식 이벤트 핸들러 구현

function handleEvent(v){
  console.log("hellobutton",v);
  //일반적인 변수는 화면 갱신이 안됨, 왜냐하면 app이 한번만 실행되기 때문
  x = v; //함수 호출 시에 값 변경 => 랜더링 안됨
  console.log("x===============",x);
}
//App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨
console.log("App Component")

return (
  <div>
    <h1>이벤트 처리</h1>
    {/*onSelect 대신에 임의의 값 사용가능
    자식 호출 시 이벤트 함수 를 전달함
매우 많이 사용되는 중요한 패턴임*/}
    <TabButton onSelect={handleEvent}>Java</TabButton>
    <TabButton onSelect={handleEvent}>SQL</TabButton>
    <TabButton onSelect={handleEvent}>SPRING</TabButton>
    <TabButton onSelect={handleEvent}>SpringBoot</TabButton>
    <TabButton onSelect={handleEvent}>Vue</TabButton>
 <h3>변경된 출력값: {x}</h3>
  </div>
);
}
export default App;

 

 

자식에게이벤트전달패턴3

부모에게데이터전달

 

import React from 'react';

function TabButton({children, onSelect}) {
//TableButton컴포넌트 실행횟수 버튼이 4개여서 4번 호출됨
    console.log("TableButton Component");
    let data= children;
    console.log("TableButton Component",children);
    console.log("TableButton Component",onSelect);
    return(
        <div>
            {/*부모에게서 전달받은 이벤트 사용가능
            onClick={onSelect(children)} 은 함수 호출이 됨*/}
            <button onClick={()=>onSelect(children)}>{children}</button>
        </div>
    );
}

export default TabButton;

 

 

부모에게데이터전달2

 

import React from 'react';
import TabButton from './components/TabButton';
function App() {
  var x ="변경될 데이터";
//부모에서 자식 이벤트 핸들러 구현

function handleEvent(v,e){
  console.log("hellobutton",v);
  console.log("HelloButton",e.target)
  //일반적인 변수는 화면 갱신이 안됨, 왜냐하면 app이 한번만 실행되기 때문
  x = v; //함수 호출 시에 값 변경 => 랜더링 안됨
  console.log("x===============",x);
}
//App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨
console.log("App Component")

return (
  <div>
    <h1>이벤트 처리</h1>
    {/*onSelect 대신에 임의의 값 사용가능
    자식 호출 시 이벤트 함수 를 전달함
매우 많이 사용되는 중요한 패턴임*/}
    <TabButton onSelect={handleEvent}>Java</TabButton>
    <TabButton onSelect={handleEvent}>SQL</TabButton>
    <TabButton onSelect={handleEvent}>SPRING</TabButton>
    <TabButton onSelect={handleEvent}>SpringBoot</TabButton>
    <TabButton onSelect={handleEvent}>Vue</TabButton>
 <h3>변경된 출력값: {x}</h3>
  </div>
);
}
export default App;

 

 

import React from 'react';

function TabButton({children, onSelect}) {
//TableButton컴포넌트 실행횟수 버튼이 4개여서 4번 호출됨
    console.log("TableButton Component");
    let data= children;
    console.log("TableButton Component",children);
    console.log("TableButton Component",onSelect);
    return(
        <div>
            {/*부모에게서 전달받은 이벤트 사용가능
            onClick={onSelect(children)} 은 함수 호출이 됨*/}
            <button onClick={(e)=>onSelect(children)}>{children}</button>
        </div>
    );
}

export default TabButton;

자식에게 계층구조이벤트 전달

 

import ChildComponent from "./components/ChildComponent";
export default function App() {
  return (
    <div>
      <h2>App</h2>
      <ChildComponent></ChildComponent>
    </div>
  );
}

 

 

import SubChildComponent from "./SubChildComponent";
export default function ChildComponent(props) {
  function handleChildEvent() {
    console.log("handleChildEvent");
  } //

  return (
    <>
      <h3>ChildComponent</h3>
      <SubChildComponent onEvent={handleChildEvent}></SubChildComponent>
    </>
  );
}

 

 

export default function SubChildComponent(props) {
  const { onEvent } = props; //이벤트 받기
  return (
    <>
      <h4>SubChildComponent</h4>
      <button onClick={onEvent}>call</button>
    </>
  );
}

자식에게 계층구조이벤트 전달2

 

import React from 'react';
import ChildComponent from './components/ChildComponent'
function App() {
function handleEvent (v){
  console.log("handleEvent 호출됨", v);
}

return (
  <div>
    <h2>App</h2>
<ChildComponent onEvent={handleEvent}></ChildComponent>
  </div>
);
}
export default App;

 

 

import React from 'react';

function SubChildComponent(props) {
    const {onEvent}=props;
    return (
        <div>
            <button onClick={onEvent}>Call</button>
        </div>
    );
}

export default SubChildComponent;

 

 

import React from 'react';
import SubChildComponent from './SubChildComponent';
function ChildComponent(props) {

    return (
        <div>
       <SubChildComponent {...props}></SubChildComponent>
        </div>
    );
}

export default ChildComponent;

preventDefault_stopPropagation

 

import React from 'react';
function App() {
function handleEvent(e){
  e.preventDefault();
  
  console.log("handleEvent",e);
}

function parent(e){
  console.log("parent",e);
}
function child (e){
  console.log("child",e);
  e.stopPropagation();
  
}

return (
  <div>
    <h2>1. 기본이벤트 동작 방지 처리</h2>
    {/*public 에 target.html생성*/}
    <form onSubmit={handleEvent} action='target.html'>

      <button>submit</button>
    </form>
    <hr/>
<h2>2. 이벤트 전차방지 처리</h2>
<div onClick={parent} style={{backgroundColor:"yellow"}}>
parent
</div>
<div onClick={child} style={{backgroundColor:"pink"}}>
child
</div>
  </div>
);
}
export default App;

State

 

const [변수명 num, 변경시 호출될 함수명 setNum] = useState(0); // num=0

num = num+1;

 

 

import React, { useState } from 'react';
function App() {
//컴포넌트 안에서 useState 선언
const [number, setNumber] = useState(0);
//처리항 데이터 변수명, 관리함수(set 변수명)
const onIncrease = () => {
  setNumber (number+1); //화면에 렌더링
  console.log("onIncrease",number);
  //number 값은 갱신값이 아닌 이전값으로 출력
  //이유는 리엑트가 변경사항을 스케쥴함
  //따라서 스케쥴이 끝난 후에야 변경사항을 얻을 수 있으나
  //현재 스케쥴 전에 console.log했기 때문에 이전값이 출력됨
  //즉 app 함수는 새로 갱신 전의 옛 함수이다
};

const onDecrease = () => {
  setNumber(number > 0 ? number -1 :0);

};
console.log("App호출====",number); //number State 값이 변경시 마다 매번 호출
return (
  <div>
  <h1>{number}</h1>
  <button onClick={onIncrease}>+</button>
  <button onClick={onDecrease}>-</button>
  </div>
);
}
export default App;

useState01기본_count

export default function TabButton({ children, onSelect }) {
  //TableButton컴포넌트 실행횟수 버튼이 4개이므로 4번호출됨
  console.log("TableButton Component");
  return (
    <>
      {/* 부모에게서 전달받은 이벤트 사용가능 */}
      <button onClick={onSelect}>{children}</button>
    </>
  );
}

 

 

import TabButton from "./components/TabButton";
import {useState} from 'react';

export default function App() {
   const [x, setX]= useState();
  //부모에서 자식 이벤트 핸들러 구현
  function handleEvent(selectedButton) {
    console.log("Hello Button", selectedButton);
    //일반적인 변수는 화면 갱신이 안됨, 왜냐하면 app이 한번만 실행되기 때문임
    setX(selectedButton) //useState hook 을  이용 해결함
  }
  //App 컴포넌트 실행횟수 체크 => 실행하면 1번만 호출됨
  console.log("App Component");
  return (
    <>
      <h1>이벤트 처리</h1>
      {/* onSelect대신에 임의의 값 사용가능
        자식 호출시 이벤트 함수를 전달함
        매우 많이 사용되는 중요한 패턴임
    */}
      <TabButton onSelect={(e) => handleEvent("Java")}>Java</TabButton>
      <TabButton onSelect={(e) => handleEvent("SQL")}>SQL</TabButton>
      <TabButton onSelect={(e) => handleEvent("React")}>React</TabButton>
      <TabButton onSelect={(e) => handleEvent("Vue")}>Vue</TabButton>
      <h3>선택된 출력값</h3>
      {x}
    </>
  );
}

import React from 'react';
import { useState } from 'react';
import { CORE_JOB } from './data/data';

function TabButton ({children, onSelect}){
  return(
    <li>
    <button onClick={onSelect}>{children}</button>
    </li>
  );
};
function App() {

const [selectedName, setSelectedName] = useState();
function handleSelect(selectedButton){
  setSelectedName(selectedButton);
  console.log("handleSelect: ",selectedButton);
  console.log(selectedName); // setSelectedName 이 바로 젇용안되고
  //스케줄형(배치)로 실행되기 때문에 이전값이 출력됨
}
let tabContent =<p>이름을 선택하세요</p>;
if (selectedName){
  tabContent=(
    <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 (
  <div>
    <h1>1.비동기</h1>
    {/*onSelect 대신에 임의의 값 사용가능
    자식 호출 시 이벤트 함수 를 전달함
매우 많이 사용되는 중요한 패턴임*/}
    <TabButton onSelect={()=>handleSelect("intern")}>intern</TabButton>
    <TabButton onSelect={()=> handleSelect("assistant")}>assistant</TabButton>
    <TabButton onSelect={()=>handleSelect("manager")}>manager</TabButton>
 <h3>선택된 출력값: {tabContent}</h3>
  </div>
);
}
export default App;

 

 

import React from 'react';
export const CORE_JOB={
    intern:{
        name:"홍길동",
        age:20,
        address:"서울"
    },
    manager:{
        name:"이순신",
        age:50,
        address:"전라"
    },
    assistant:{
        name:"유관순",
        age:18,
        address:"경기"
    }
}
function data(props) {
    return (
        <div>
            
        </div>
    );
}

export default data;

 

useState01기본2_조건부랜더링1_button에스타일지정

 

import React, { useState } from 'react';
import { CORE_JOB } from './data/data';
import TabButton from './components/TabButton';

function App() {
  const [selectedName, setSelectedName] = useState(null);

  function handleSelect(selectedButton) {
    setSelectedName(selectedButton);
  }

  let tabContent = null;
  if (selectedName) {
    tabContent = (
      <div id="tab-content">
        <p>Name: {CORE_JOB[selectedName].name}</p>
        <p>Age: {CORE_JOB[selectedName].age}</p>
        <p>Address: {CORE_JOB[selectedName].address}</p>
      </div>
    );
  }

  return (
    <div>
      <h1>1.비동기</h1>
      <TabButton isSelected={selectedName === "intern"} onSelect={() => handleSelect("intern")}>intern</TabButton>
      <TabButton isSelected={selectedName === "assistant"} onSelect={() => handleSelect("assistant")}>assistant</TabButton>
      <TabButton isSelected={selectedName === "manager"} onSelect={() => handleSelect("manager")}>manager</TabButton>
      <h3>Selected Content: {selectedName}</h3>
      {tabContent}
    </div>
  );
}

export default App;

button.active{
    background-color: blueviolet;
    color: azure;
}

import React from 'react';
import './TabButton.css';
function TabButton({children, onSelect, isSelected}) {
    console.log("TableButton Component");
    return(
        <div>
            <li> <button className={isSelected? "active": undefined} onClick={onSelect}>{children}</button></li>
           
        </div>
    );
}

export default TabButton;

조건부랜더링2_boolean함수로구현

 

import React, { useState } from 'react';



function App() {
  const [isEditing, setIsEditing] = useState(true);

  function handleEvent() {
    setIsEditing(()=> isEditing);
    console.log(isEditing);
  }

  let tag = (
    <>
    <span>홍길동</span>
    <button onClick={handleEvent}>Edit</button>
    </>
  )
  if (!isEditing) {
    tag = (
     <>
     <input></input>
     <button onClick={handleEvent}>Save</button>
     </>
    );
  }
  console.log("App호출")

  return (
    <div>
{tag}
    </div>
  );
}

export default App;

boolean함수로구현2

 

import { useState } from "react";

export default function App() {
  const [isEditing, setIsEditing] = useState(true);

  function handleEvent() {
    // setIsEditing(!isEditing);// old한 방법
    setIsEditing(() => !isEditing); //new한 방법
    console.log(isEditing);
  }

  let tag = (
    <>
      <span>홍길동</span>
      {/* <button onClick={handleEvent}>Edit</button> */}
    </>
  );

  if (!isEditing) {
    tag = (
      <>
        <input></input>
        {/* <button onClick={handleEvent}>Save</button> */}
      </>
    );
  } //
  console.log("App호출");
  return (
    <>
      {tag}
      {/* <button onClick={handleEvent}>{isEditing ? "save" : "edit"}</button> */}
      {
        isEditing?<button onClick={handleEvent}>Edit</button>:
        <button onClick={handleEvent}>Save</button>
      }
    </>

  );
}

import React, { useState } from 'react';



function App() {
  const [number, setNumber] = useState({n:0});//json
//1. 불변변수가 아니기 때문에 화면 갱신이 안됨, 
//객체 배열은 반드시 불변객체로 관리해야 한다

const onIncrease = ()=> {
  //number.n = number.n + 1;
  
  setNumber({...number, n:number.n+1});
  console.log("onIncrease: ", number.n)
};
const onDecrease = () => {
  const new_number = {...number};
  console.log(number=== new_number); //false, number 와 number 와 new_number  객체는 서로 다른
  const new_number2 = { ...number, n: number.n-1};
  setNumber (new_number2); //덮어쓰기

};
console.log("App 호출",number.n);

  return (
<div>
<h1>{number.n}</h1>
  <button onClick={onIncrease}>+</button>
  <button onClick={onDecrease}>-</button>
  </div>
  );
}

export default App;

import React, { useState } from 'react';



function App() {
  const [number, setNumber] = useState([]);
//1. 불변변수가 아니기 때문에 화면 갱신이 안됨, 
const onIncrease = ()=> {
  number.push(10);
  
  setNumber(number);
  console.log("onIncrease: ", number);
};


//2. 객체를 불변변수로 만드는 방법은 디스트럭처럼 이용
//무조건 객체 수정은 디스트럭 처럼 이용함
const onDecrease = () => {
// let data = [ ...number, 10];
  setNumber ([...number,10]); //기존 배열에 10 추가 새 배열 저장

};
const onDecrease2 = ()=> {
  number.pop();
  const new_arr = [...number];
  setNumber (new_arr);
};
console.log("App 호출",number);

  return (
<div>
<h1>{number}</h1>
  <button onClick={onIncrease}>10추가안됨</button>
  <button onClick={onDecrease}>10추가됨</button>
  <button onClick={onDecrease2}>10감소2</button>
  </div>
  );
}

export default App;

import React, { useState } from 'react';



function App() {
 const [number, setNumber] =useState({n:0});

 const onIncrease = () => {
  setNumber ({...number, n: number.n+1});
 };
 const onDecrease = () => {
  if (number.n>0) setNumber({ ...number, n: number.n -1});
 }
 console.log("App호출", number.n);

  return (
<div>
<h1>{number.n}</h1>
  <button onClick={onIncrease}>+</button>
  <button onClick={onDecrease}>-</button>
  </div>
  );
}

export default App;

import React, { useState } from 'react';



function App() {
  const [number, setNumber] = useState([]);
//1. 불변변수가 아니기 때문에 화면 갱신이 안됨, 
const onIncrease = ()=> {
  number.push(10);
  
  setNumber(number);
  console.log("onIncrease: ", number);
};


//2. 객체를 불변변수로 만드는 방법은 디스트럭처럼 이용
//무조건 객체 수정은 디스트럭 처럼 이용함
const onDecrease = () => {
// let data = [ ...number, 10];
  setNumber ([...number,10]); //기존 배열에 10 추가 새 배열 저장

};
const onDecrease2 = ()=> {
  number.pop();
  const new_arr = [...number];
  setNumber (new_arr);
};
console.log("App 호출",number);

  return (
<div>
<h1>{number}</h1>
  <button onClick={onIncrease}>10추가안됨</button>
  <button onClick={onDecrease}>10추가됨</button>
  <button onClick={onDecrease2}>10감소2</button>
  </div>
  );
}

export default App;

import React, { useState } from 'react';



function App() {
 const [number, setNumber] =useState({n:0});

 const onIncrease = () => {
  setNumber ({...number, n: number.n+1});
 };
 const onDecrease = () => {
  if (number.n>0) setNumber({ ...number, n: number.n -1});
 }
 console.log("App호출", number.n);

  return (
<div>
<h1>{number.n}</h1>
  <button onClick={onIncrease}>+</button>
  <button onClick={onDecrease}>-</button>
  </div>
  );
}

export default App;