๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
IT/React

[React] ReactJS๋กœ ์˜ํ™” ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ (The BASICS OF REACT)

by YeonBu 2024. 2. 21.
728x90

 

* ๋…ธ๋งˆ๋“œ์ฝ”๋” ๊ฐ•์˜ ์ •๋ฆฌ ๊ธ€ ์ž…๋‹ˆ๋‹ค.

 

ReactJS๋กœ ์˜ํ™” ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ – ๋…ธ๋งˆ๋“œ ์ฝ”๋” Nomad Coders

React for Beginners

nomadcoders.co

 

 

 

The BASICS OF REACT

- ๋ฆฌ์•กํŠธ ๊ฐ•์˜ ์‹œ์ž‘ ์ „ JS์™€ ReactJS๋ฅผ ๋น„๊ตํ•ด๋ณธ๋‹ค.

 

 

์œ„์™€ ๊ฐ™์ด ํด๋ฆญ ์ด๋ฒคํŠธ๊ฐ€ ์žˆ๋Š” ์นด์šดํŠธ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ ๋‹ค๊ณ  ์น˜์ž.

 

 

JavaScript
<!DOCTYPE html>
<html>
    <body>
        <h3>Total Clicks : 0</h3>
        <button id="btn">Click me</button>
    </body>
    <script> 
        
        let counter = 0;
        
        const button = document.getElementById('btn');
        const h3 = document.querySelector('h3');

        function handleClick(){
            counter = counter + 1;
            h3.innerText = `Total Clicks : ${counter}`;
        }

        button.addEventListener("click", handleClick);

    </script>
</html>

 

โœ” HTML โž” JS ์ˆœ์„œ

 

 

 

React 1 (createElement)

- ์‰ฌ์šด๋ฐฉ๋ฒ•์ด ์žˆ์ง€๋งŒ ๋ฆฌ์•กํŠธ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ ์–ด๋ ค์šด ๋ฐฉ๋ฒ•์œผ๋กœ ์ฝ”๋“œ ์ž‘์„ฑ

- ์ง€๊ธˆ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•”๊ธฐํ•  ํ•„์š”๋Š” ์—†์Œ

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script> 
        const root = document.getElementById("root");
        //React๋กœ Element ์ƒ์„ฑ("span", {span์˜ property}, "๋‚ด์šฉ")
        const h3 = React.createElement(
            "h3", 
            { id : "title",
              onMouseEnter : () => console.log('mouse enter')}, 
              "Hello I'm a Title"
         ); 
        const btn = React.createElement(
            "button", 
            { onClick : () => console.log('im clicked')},
            "Click me"
         );
        const div = React.createElement("div", null, [span, btn]);
        ReactDOM.render(div, root);
    </script>
</html>

 

* React : UI๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒํ•˜๋Š” ์—”์ง„
* React-dom : ๋ชจ๋“  react element๋“ค์„ HTML body์— ๋‘˜ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋˜๋Š” ํŒจํ‚ค์ง€

 

โœ”  JS โž” HTML ์ˆœ์„œ

 

 

React 2 (JSX)

 

- JSX๋ž€ Javascript๋ฅผ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•

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

        const Container = () => (
            <div>
                <Title />
                <Button />
            </div>
        );

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

 

โœ” ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ๊ฑด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋• ์•ž๊ธ€์ž๊ฐ€ ๊ผญ ๋Œ€๋ฌธ์ž์—ฌ์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ!

 

 

๋‹ค์Œ ๊ฐ•์˜์—์„œ ๊ณ„์†

 

 

 

 

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'IT > React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[React] ReactJS๋กœ ์˜ํ™” ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ (STATE #1)  (0) 2024.02.22

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”