[ReactJS] 코드 모음

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

노마드코더 <ReactJS로 영화 웹서비스 만들기> 강의를 듣고 작성하였다.

2.3 Events in React

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

    <script>
        const root = document.getElementById("root");
        // const h3 = React.createElement("h3",{id:"sexy-span"},"hello I'm a span");
        const h3 = React.createElement("h3",{
            onMouseEnter: ()=> console.log('mouse enter'),
        },"hello I'm a span");
        const btn = React.createElement(
            "button",
            {
            onClick:()=> console.log("I'm clicked"),
            },
            "Click me");
        const container = React.createElement("div",null,[h3,btn]);
        ReactDOM.render(container,root);
    </script>
</html>

이거는 JSX를 사용하지 않은 버전이다.

2.5 JSX

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function Title() {
            return (
                <h3 id="title" onMouseEnter = {()=>console.log("mouse enter")}>
                    Hello I'm a title
                </h3>
            );
        }
        const Button =() =>(
            <button 
                style={{
                    backgroundColor:"tomato",
                }} 
                onClick = {() => console.log("I'm clicked")}
                > 
                Click me
                </button>
                );
        const Container = () =>(
            <div>
                <Title/>
                <Button/>
            </div>
        );
        
        ReactDOM.render(<Container/>, root);
        
    </script>
</html>

Arrow function

여기서 직접 만든 컴포넌트들은 모두 함수

직접 만든 컴포넌트의 첫 글자는 반드시 대문자여야 함.

3.0 Understanding State

UI를 계속해서 업데이트 시켜줘야 함. => reRender을 해줘야 함.

그렇기때문에 이 방법은 좋은 방법이 아님.

3.1 setState part 1

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        let counter= 0;

        function countUp(){
            counter= counter+1;
            render();
        };

        function render(){
            ReactDOM.render(<Container/>, root);
        }

        const Container = () =>(
            <div>
                <h3>Total Clicks:{counter}</h3>
                <button onClick= {countUp}>Click me</button>
            </div>
        );

        render();
        
    </script>
</html>

3.2 setState Part 2

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            let [counter, setCounter] = React.useState(0);
            const onClick= ()=> {
                setCounter(counter+1);
            };
            return (
            <div>
                <h3>Total Clicks:{counter}</h3>
                <button onClick={onClick}>Click me</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

setCounter 함수로 state를 바꿀 때, 컴포넌트 전체가 재생성됨. 새로운 counter 값을 갖고.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            let [counter, setCounter] = React.useState(0);
            const onClick= ()=> {
                //setCounter(counter+1);
                setCounter((current)=> current+1); //이게 더 좋음
            };
            return (
            <div>
                <h3>Total Clicks:{counter}</h3>
                <button onClick={onClick}>Click me</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

useState의 return 값은 원소 2개짜리 array.

3.6 State Practice part 1

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            const [minutes,setMinutes] = React.useState(0)
            const onChange=(event) => {
                setMinutes(event.target.value);
            }
            const reset =() => {
                setMinutes(0);
            }
            return (
            <div>
                <h1>Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={minutes} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange ={onChange}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                        value = {Math.round(minutes/60)}
                        id="hours" 
                        placeholder="Hours" 
                        type="number"
                    />
                </div>
                <button onClick = {reset}>Reset</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

3.7 State Practice part 2(1)

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            const [minutes,setMinutes] = React.useState(0)
            const [flipped,setFlipped] = React.useState(false);
            const onChange=(event) => {
                setMinutes(event.target.value);
            }
            const reset =() => {
                setMinutes(0);
            }
            const onFlip = ()=> setFlipped((current)=>!current);
            return (
            <div>
                <h1>Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={minutes} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange ={onChange}
                        //disabled = {flipped === true}
                        disabled = {flipped}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                        value = {Math.round(minutes/60)}
                        id="hours" 
                        placeholder="Hours" 
                        type="number"
                        //disabled = {flipped === false} //flipped가 false일 때 disabled가 true(자바스크립트 조건문)
                        disabled = {!flipped}
                    />
                </div>
                <button onClick = {reset}>Reset</button>
                <button onClick = {onFlip}>Flip</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

State Practice part 2(2)

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            const [amount,setAmount] = React.useState(0)
            const [flipped,setFlipped] = React.useState(false);
            const onChange=(event) => {
                setAmount(event.target.value);
            };
            const reset =() => {
                setAmount(0);
            };
            const onFlip = ()=> {
                reset();
                setFlipped((current)=>!current);
            };
            return (
            <div>
                <h1>Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={flipped ? amount*60: amount} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange ={onChange}
                        //disabled = {flipped === true}
                        disabled = {flipped}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                        value = {flipped ? amount : Math.round(amount/60)} //flipped가 true이면 minutes를 보여주고 false이면 Math.round~를 보여줘라.
                        id="hours" 
                        placeholder="Hours" 
                        type="number"
                        //disabled = {flipped === false} //flipped가 false일 때 disabled가 true(자바스크립트 조건문)
                        onChange = {onChange}
                        disabled = {!flipped}
                    />
                </div>
                <button onClick = {reset}>Reset</button>
                <button onClick = {onFlip}>Flip</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

a?b:c

a가 true이면 b, false이면 c

3.8 Recap

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App (){
            const [amount,setAmount] = React.useState(0)
            const [flipped,setFlipped] = React.useState(false);
            const onChange=(event) => {
                setAmount(event.target.value);
            };
            const reset =() => {
                setAmount(0);
            };
            const onFlip = ()=> {
                reset();
                setFlipped((current)=>!current);
            };
            return (
            <div>
                <h1>Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={flipped ? amount*60: amount} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange ={onChange}
                        //disabled = {flipped === true}
                        disabled = {flipped}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                        value = {flipped ? amount : Math.round(amount/60)} //flipped가 true이면 minutes를 보여주고 false이면 Math.round~를 보여줘라.
                        id="hours" 
                        placeholder="Hours" 
                        type="number"
                        //disabled = {flipped === false} //flipped가 false일 때 disabled가 true(자바스크립트 조건문)
                        onChange = {onChange}
                        disabled = {!flipped}
                    />
                </div>
                <button onClick = {reset}>Reset</button>
                <button onClick = {onFlip}>{flipped ? "Turn back" : "Flip"}</button>
            </div>
            );
        };

        ReactDOM.render(<App/>, root);
    </script>
</html>

3.9

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function MiuntesToHours (){
            const [amount,setAmount] = React.useState(0)
            const [flipped,setFlipped] = React.useState(false);
            const onChange=(event) => {
                setAmount(event.target.value);
            };
            const reset =() => {
                setAmount(0);
            };
            const onFlip = ()=> {
                reset();
                setFlipped((current)=>!current);
            };
            return (
            <div>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input 
                        value={flipped ? amount*60: amount} 
                        id="minutes" 
                        placeholder="Minutes" 
                        type="number"
                        onChange ={onChange}
                        //disabled = {flipped === true}
                        disabled = {flipped}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input 
                        value = {flipped ? amount : Math.round(amount/60)} //flipped가 true이면 minutes를 보여주고 false이면 Math.round~를 보여줘라.
                        id="hours" 
                        placeholder="Hours" 
                        type="number"
                        //disabled = {flipped === false} //flipped가 false일 때 disabled가 true(자바스크립트 조건문)
                        onChange = {onChange}
                        disabled = {!flipped}
                    />
                </div>
                <button onClick = {reset}>Reset</button>
                <button onClick = {onFlip}>{flipped ? "Turn back" : "Flip"}</button>
            </div>
            );
        };
        function KmToMiles() {
            return (
                <div>
                   
                    <h3>KM 2 M</h3>
                </div>
            );
        }
        function App (){
            const [index,setIndex] = React.useState("xx");
            const onSelect = (event) => {
                setIndex(event.target.value);
            }
            return (
            <div>
                <h1>Super Converter</h1>
                <select value ={index} onChange = {onSelect}>
                    <option value="xx">Select your units</option>
                    <option value="0">Minutes & Hours</option>
                    <option value="1">Km & Miles</option>
                </select>
                <hr></hr>
                {index === "xx" ? "Please select your units" : null}
                {index === "0" ? <MiuntesToHours/> : null}
                {index === "1" ? <KmToMiles/> : null}
            </div>
            );
        }
                
        ReactDOM.render(<App/>, root);
    </script>
</html>

컴포넌트는 어떤 JSX를 반환하는 함수이다.

props는 첫번째이자 유일한 인자.

4.0 Props

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function Btn(props) { //컴포넌트 //props는 첫번째이자 유일한 인자. 
            return <button
                style = {{
                    backgroundColor : "tomato",
                    color :"white",
                    padding: "10px 20px",
                    borderRadius:10,
                    border:0,
                }}
            >
            {props.banana}
            </button>;
        }
        
        function App (){ //JSX 내부
            
            return (
            <div>
                <Btn banana = "Save Changes" x= {false}/>
                <Btn banana = "Edit" y= {true}/>
            </div>
            );
        }
                
        ReactDOM.render(<App/>, root);
    </script>
</html>

shortcut

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({banana, big}) { //컴포넌트 //props는 첫번째이자 유일한 인자. //shortcut ver.
            return <button
                style = {{
                    backgroundColor : "tomato",
                    color :"white",
                    padding: "10px 20px",
                    borderRadius:10,
                    border:0,
                    fontSize: big ? 18: 16,
                }}
            >
            {banana}
            </button>;
        }
        
        function App (){ //JSX 내부
            
            return (
            <div>
                <Btn banana = "Save Changes" big= {false}/>
                <Btn banana = "Edit" big= {true}/>
            </div>
            );
        }
                
        ReactDOM.render(<App/>, root);
    </script>
</html>

4.3 Recap

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function Btn({text, fontSize}) { 
            return <button
                style = {{
                    backgroundColor : "tomato",
                    color :"white",
                    padding: "10px 20px",
                    borderRadius:10,
                    border:0,
                    fontSize,
                }}
            >
            {text}
            </button>;
        }
        
        function App (){ //JSX 내부
            return (
            <div>
                <Btn text = "Save Changes" fontSize={18}/>
                <Btn text = {"Continue"}/>
            </div>
            );
        } 
        ReactDOM.render(<App/>, root);
    </script>
</html>

5.1 Tour of CRA

App.js

import Button from "./Button";
import styles from "./App.module.css";

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome back!</h1>
      <Button text={"continue"}/>
    </div>
  );
}

export default App;

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
    text:PropTypes.string.isRequired,

}

export default Button;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.module.css

.title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
}

Button.module.css

.btn {
    color: white;
    background-color: tomato;
}

6.3

App.js

function App() {
  const [counter,setValue] = useState(0);
  const [keyword,SetKeyword] = useState("");

  const onClick = () => setValue((prev)=> prev+1)
  const onChange = (event) => {SetKeyword(event.target.value)};
  console.log("I run all the time");

  useEffect(() => {
    console.log("Call the API...");
  },[]);
  useEffect(() => {
    if (keyword !== "" && keyword.length >5)
      {console.log("SEARCH FOR",keyword);}
  },[keyword]); //keyword가 변화할 때만 코드 실행 -> react가 keyword를 주시하고 있음

  return (
    <div>
      <input 
        value={keyword}
        onChange={onChange} 
        type="text" 
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

저작자표시

'Front-End > React' 카테고리의 다른 글

[React] useMemo (0)	2023.12.27
[React] Describing the UI (0)	2023.06.05
[React] 230501 학습일기 (0)	2023.05.01
[React] 220423 학습일기 (0)	2023.04.24
[React] 220416 학습일기 (1)	2023.04.17

Learning & Running

[ReactJS] 코드 모음

'Front-End > React' 카테고리의 다른 글

티스토리툴바

[ReactJS] 코드 모음

'Front-End > React' 카테고리의 다른 글

'Front-End/React' Related Articles

티스토리툴바