React&Reduct

프론트엔드 8주 완성 with React : react 강의 6주차

낭구리 2022. 8. 16. 18:49

02JSXBabel

<div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root")
      // const element = <h1 className="title">Hello world</h1>

      const text = "Hello world!"
      const titleClassName = "title"
      const props = {className: titleClassName, children:text}
      //
      const customH1 = <h1 {...props} /> 
      // const customH1 = <h1 className={props.className} children={props.children} />
      /*{className: titleClassName, children:text} 객체로 1,2번의 인수를 넣었을때
      h1에서 ...(요소를 분해해서) 위와 같은 표현식
      */
      // const customH1 = <h1 className={titleClassName} >{text}</h1>
      // const customH1 = <h1 className={titleClassName} children={text}></h1>
      const element = customH1

    ReactDOM.render(element, rootElement)
    </script>

 

03멀티Element

 <div id="root"></div>
      <script type="text/babel">
      const rootElement = document.getElementById("root");
    
      const Text = ({text})=> {
        //text가 대문자로 시작하면 h1 소문자로 시작하면 h3
        if(text.charAt(0) === text.charAt(0).toUpperCase()){
          return <h1>{text}</h1>
        }else{
          return <h3>{text}</h3>
        }
      };
 
      const element = (
        <>
        <Text text="Text"/>
        <Text text="text"/>
          
        
        </>
      )

      ReactDOM.render(element,rootElement)
    </script>

 

05js와jsx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      <script type="text/babel">
      const rootElement = document.getElementById("root");
    

      function Number({number, selected}) {
        // return number % 2 === 0 ? <h1>{number}</h1> : <h3>{number}</h3>
        return selected ? <h1>{number}</h1> : <h3>{number}</h3>
      }
 
      const element = (
        <>
        {/* <Number number={1}/>
        <Number number={2} selected={true}/>
        <Number number={3}/>
    <Number number={4}/>*/}
        {[1,2,3,4,5,6,7,8,9,10].map((number)=>(
          <Number number ={number} selected={number ===3}/>
        ))}
      </>
          
        
        
      )

      ReactDOM.render(element,rootElement)
    </script>
  </body>
</html>

 

06중간복습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
    <style>
      .title{
        color:red;
      }
        </style>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root");
      function Number({number, selected}) {
        // return number % 2 === 0 ? <h1>{number}</h1> : <h3>{number}</h3>
        return selected ? <h1>{number}</h1> : <h3>{number}</h3>
      }
 
      const element = (
        <>
        {/* <Number number={1}/>
        <Number number={2} selected={true}/>
        <Number number={3}/>
    <Number number={4}/>*/}
        {[1,2,3,4,5,6,7,8,9,10].map((number)=>(
          <Number 
          className="title"
          key = {number} //유니크한값이되어야한다 map을 사용할때 꼭필요
          number ={number}
          selected={number ===3}
          />
        ))}
      </>
  
      )

      ReactDOM.render(element,rootElement)
    </script>
    
  </body>
</html>

 

08리랜더링

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script>
      const rootElement = document.getElementById("root")
      function random(){
        const number = Math.floor(Math.random() * (10 -1) +1)
        /*10보다 작고 1보다큰 랜덤값을 만들겠다*/
        const element = 
        `<button>${number}</button>`
        rootElement.innerHTML = element;
      }
      setInterval(random,1000)
      //특정 함수를 특정시간동안 계속 불러라
      /*
      08은 자바스크립트 08-2는 리액트
      두개의 차이점은 자바스크립트는 버튼자체를 바꿔서 포커스를 없애지만
      리액트는 {number}만 바뀌는구나? 라는걸 알고 number만 바꾸게되는것
      여러개의 엘리먼트가 변경점이있을때마다 그엘리먼트가 바뀌거나 사라졋을때 다른 엘리먼트의
      배치에 영향을 주게된다(refloor repainting) 
      리액트는 바뀌는곳만 바뀌기때문에 더욱 효율적이다.
       
      */
    </script>
    
  </body>
</html>

 

09리랜더링

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script>
      const rootElement = document.getElementById("root")
      function random(){
        const number = Math.floor(Math.random() * (10 -1) +1)
        /*10보다 작고 1보다큰 랜덤값을 만들겠다*/
        const element = 
        `<button>${number}</button>`
        rootElement.innerHTML = element;
      }
      setInterval(random,1000)

    </script>
    
  </body>
</html>

10이벤트핸들러

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <button id="demo" onclick="document.getElementById('demo').innerHTML=Date()">the time is?</button>
      
      <script>
      const button = document.getElementById('button');
      button.addEventListener("mouseout", ()=>{
        alert('bye')
      })
      button.addEventListener('click',()=>{
        alert('press')
      }) //두가지 다 동작 자바스크립트

    </script>
    
  </body>
</html>

 

11이벤트핸들러2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root")
      const state = {keyword: "", typing: false, result:""};

      const App = ()=>{
        function handleChange(event) {
          setState({ typing : true, keyword: event.target.value})
        }
        function handleClick(){
          setState({
            typing: false,
            result: `We find results of ${state.keyword}`
          })
        }
        return (
          <>
          <input onChange={handleChange}/>
          <button onClick={handleClick}>search</button>
          <p>{state.typing ? `Looking for ${state.keyword}...` : state.result}</p>
          </>
        )
      }
      function setState(newState){
        Object.assign(state, newState)
        render()
      }
      function render(){
        ReactDOM.render(<App />,rootElement)
      }
      render()

    </script>
    
  </body>
</html>

 

12중간복습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root")
      const state = {keyword: "", typing: false, result:""};

      const App = ()=>{
        function handleChange(event) {
          setState({ typing : true, keyword: event.target.value})
        }
        function handleClick(){
          setState({
            typing: false,
            result: `We find results of ${state.keyword}`
          })
        }
        return (
          <>
          <input onChange={handleChange}/>
          <button onClick={handleClick}>search</button>
          <p>{state.typing ? `Looking for ${state.keyword}...` : state.result}</p>
          </>
        )
      }
      function setState(newState){
        Object.assign(state, newState)
        render()
      }
      function render(){
        ReactDOM.render(<App />,rootElement)
      }
      render()

    </script>
    
  </body>
</html>

 

13컴포넌트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root")

      const App = ()=>{
        //const [keyword, setKeyword] = React.useState("");
        const [result, setResult] = React.useState();//앞은 result는 상태의값 뒤의 set은 앞의 값의 업데이트값
        const [typing, setTyping] = React.useState(false);
        const [keyword, setKeyword] = React.useState("");
          function handleChange(event) {
              setKeyword(event.target.value);
              setTyping(true)
          }
          function handleClick(){
            setTyping(false)
            setResult(`We find results of ${keyword}`)
          }
          return (
            <>
            <input onChange={handleChange}/>
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for ${keyword}...` : result}</p>
            </>
          )
      }
      
      
      
      ReactDOM.render(<App />,rootElement)
    </script>
    
  </body>
</html>

 

14컴포넌트 사이드이펙트

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root")

      const App = ()=>{
        const [keyword, setKeyword] = React.useState(()=>{
        console.log("initialize");
        return window.localStorage.getItem("keyword")
      });
      const [result, setResult] = React.useState("")
      const [typing, setTyping] = React.useState(false);

        console.log("render");

        React.useEffect(()=>{
          console.log("effect");
          window.localStorage.setItem("keyword", keyword)
        },[])

          function handleChange(event) {
              setKeyword(event.target.value);
              setTyping(true)
          }
          function handleClick(){
            setTyping(false)
            setResult(`We find results of ${keyword}`)
          }
          return (
            <>
            <input onChange={handleChange}/>
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for ${keyword}...` : result}</p>
            </>
          )
      }
      
      
      
      ReactDOM.render(<App />,rootElement)
    </script>
    
  </body>
</html>

 

15커스텀훅만들기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element</title>
  </head>
  <body>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <div id="root"></div>
      
      <script type="text/babel">
      const rootElement = document.getElementById("root")


      function useLocalStorage(itemName, value= ""){
        const [state, setstate] = React.useState(()=>{
          return window.localStorage.getItem(itemName) || value;
        });

        React.useEffect(()=>{
          window.localStorage.setItem(itemName, state)
        },[state])

        return [state, setstate]
      }

      const App = ()=>{
        const [keyword, setKeyword] = useLocalStorage("keyword")
        const [result, setResult] = useLocalStorage("result")
        const [typing, setTyping] = useLocalStorage("typing", false);


        // React.useEffect(()=>{
        //   console.log("effect");
        //   window.localStorage.setItem("result", result)
        // },[ result])

          function handleChange(event) {
              setKeyword(event.target.value);
              setTyping(true)
          }
          function handleClick(){
            setTyping(false)
            setResult(`We find results of ${keyword}`)
          }
          return (
            <>
            <input onChange={handleChange} valye={keyword}/>
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for ${keyword}...` : result}</p>
            </>
          )
      }
      
      
      
      ReactDOM.render(<App />,rootElement)
    </script>
    
  </body>
</html>

 

16hookflow

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>element</title>
</head>

<body>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>

  <script type="text/babel">
    const rootElement = document.getElementById("root")

    const App = () => {
      console.log("App render start");
      const [show, setshow] = React.useState(() => {
        console.log("App useState");
        return false;
      })

      React.useEffect(() => {
        console.log("App useEffect, no deps");
      })

      React.useEffect(() => {
        console.log("App useEffect, empty deps");
      }, [])

      React.useEffect(() => {
        console.log("App useEffect, [show]");
      }, [show])

      function handleClick() {
        setshow((prev) => !prev);
      }

      return(
        <>
        <button onClick={handleClick}>Search</button>
        {show ? (
          <>
            <input />
            <p></p>
          </>
        ) : null}
      </>
      );
    }



    ReactDOM.render(<App />, rootElement)
    console.log("App render end");
  </script>

</body>

</html>

 

17hookflow2

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>element</title>
</head>

<body>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <div id="root"></div>

  <script type="text/babel">
    const rootElement = document.getElementById("root")

    const Child = () => {
      console.log("   Child render start");
      const [text, setText] = React.useState(() => {
        console.log("   Child useState");
        return "";
      })

      React.useEffect(() => {
        console.log("   Child useEffect, no deps");
        return()=> {
          console.log("   Child useEffect [Claenup], no deps");
        }
      })

      React.useEffect(() => {
        // console.log("App useEffect, empty deps");
        return()=> {
          console.log("   Child useEffect [Claenup],  empty deps");
        }
      }, [])

      React.useEffect(() => {
        // console.log("App useEffect, [show]");
        return()=> {
          console.log("   Child useEffect [Claenup], [text]");
        }
      }, [text])

      function handleChange(event){
        setText(event.target.value);
      }
      const element =(
      <>
        <input onChange={handleChange}/>
        <p>{text}</p>
      </>
      );

      console.log("  Child render end");
      return element;
    }
  


    const App = () => {
      console.log("App render start");
      const [show, setshow] = React.useState(() => {
        console.log("App useState");
        return false;
      })

      React.useEffect(() => {
        console.log("App useEffect, no deps");
        return()=> {
          console.log("App useEffect [Claenup], no deps");
        }
        
      })

      React.useEffect(() => {
        console.log("App useEffect, empty deps");
        return()=> {
          console.log("App useEffect [Claenup], empty deps");
        }
      }, [])

      React.useEffect(() => {
        console.log("App useEffect, [show]");
        return()=> {
          console.log("App useEffect [Claenup], [show]");
        }
      }, [show])

      function handleClick() {
        setshow((prev) => !prev);
      }

      return(<>
      <button onClick={handleClick}>Search</button>
      {show ? (
        <>
        <input />
        <p></p>
        </>
        ) : null}
        </>
      );
    }



    ReactDOM.render(<App />, rootElement,)
    console.log("App render end");
  </script>

</body>

</html>

 

저작자표시

'React&Reduct' 카테고리의 다른 글

프론트엔드 8주 완성 with React : react 강의 8주차  (0) 2022.08.30
프론트엔드 8주 완성 with React : react 강의 7주차  (0) 2022.08.23
프론트엔드 8주 완성 with React : react 강의 5주차  (0) 2022.08.09
프론트엔드 8주 완성 with React : react 강의 4주차  (0) 2022.08.02
프론트엔드 8주 완성 with React : react 강의 3주차  (0) 2022.07.26

'React&Reduct'의 다른글

  • 현재글프론트엔드 8주 완성 with React : react 강의 6주차

관련글

댓글

티스토리툴바