React_조건부 랜더링, useRef

 

import { useState } from "react"

export default function App(){

  const [isEditing, setIsEditing] = useState(true)

  function handleEdit(){

      setIsEditing(() => !isEditing)

  }

 

  let tag1 = (

    <span>홍길동</span>

  )

 

  if(!isEditing){

    tag1 = (

      <input type="text"></input>

    )

  }

  return (

    <div>

      <h1>조건부 랜더링 구현1: if문</h1>

      {tag1}

      <button onClick={handleEdit}>{isEditing ? "save" : "edit"}</button>

     

      <hr></hr>

      <h1>조건부 랜더링 구현2: 3항연산자 이용</h1>

      {isEditing ? <span>이순신</span> : <input></input>}

      <button onClick={handleEdit}>{isEditing ? "save" : "edit"}</button>

     

      <hr></hr>

      <h1>조건부 랜더링 구현3: 3항연산자 이용</h1>

      {isEditing && <span>유관순</span>}{!isEditing && <input></input>}  

      <button onClick={handleEdit}>{isEditing ? "save" : "edit"}</button>

      <hr></hr>

    </div>

  )

}

 

 

 

 

 

 

 

 

 

 

App

import Player from "./components/player"

export default function App(){

  return (

    <>

    <h1>App</h1>

      <Player></Player>

    </>

  )

}

player

import { useState } from "react";

export default function Player(){

    const [enteredPlayerName, setEnteredPlayerName] = useState("")

    const [submitted, setSubmitted] = useState(false);

  function handleChange(event){

    setSubmitted(false);

    setEnteredPlayerName(event.target.value);

  }

  function handleClick(){

    setSubmitted(true);

  }

  console.log("Player: ", enteredPlayerName);

  return (

    <div>

        <section id="player">

          <h2>환영합니다. {submitted ? enteredPlayerName : "unknown entity"}</h2>

            <input type="text" value={enteredPlayerName} onChange={handleChange}></input>

            <button onClick={handleClick}>저장</button>

        </section>

    </div>

  )

}

 

 

 

 

 

 

 

 

useRef(컴포넌트를 직접 참조)

import { useState, useRef } from "react";

export default function Player(){

    //태그 중 ref={playerName}을 참조함

    //state와 달리, 다르게 값을 변경해도 재랜더링되지 않고, current 속성을 사용

    const playerName = useRef();                       //playerName를 참조할 수 있게 만듦

    const [enteredPlayerName, setEnteredPlayerName] = useState(null);

  //버튼을 클릭했을 때만 랜더링

  function handleClick(){

    setEnteredPlayerName(playerName.current.value)    //playerName에 현재 입력된 값을 저장

    playerName.current.value="";                      //playerName을 다시 공란으로 만듦

  }

  return (

    <div>

        <section id="player">

          <h2>환영합니다. {enteredPlayerName ?? "unknown entity"}</h2>  {/* null/undefined면 unknown entity */}

            <input type="text" ref={playerName}></input>

            <button onClick={handleClick}>저장</button>

        </section>

    </div>

  )

}