๐Ÿ– React

  • React ์ค€๋น„ํ•˜๊ธฐ

    • Node.js ์„ค์น˜

       ๋ฆฌ๋ˆ…์Šค, Mac
       $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
       $ nvm install --lts
      
       ์œˆ๋„์šฐ๋Š” => https://nodejs.org/en/  => LTS ๋ฒ„์ „ ์„ค์น˜
    • ์ƒˆ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ

      $ npx create-react-app ํŒŒ์ผ์ด๋ฆ„
      =>  ํŒŒ์ผ์ด ์ƒ์„ฑ์ด ๋ฉ๋‹ˆ๋‹ค.
      
      $ cd ํŒŒ์ผ์ด๋ฆ„
      $ npm start ํ•˜๋ฉด ๋‹ค์šดํ›„์— ๋ฆฌ์•กํŠธ๊ฐ€ ๋น™๊ธ€๋น™๊ธ€ ํ•ฉ๋‹ˆ๋‹ค.

    ๐Ÿž React - JSX ๊ทœ์น™

    1. ํ•ญ์ƒ ํƒœ๊ทธ๋กœ ์—ด์—ˆ์œผ๋ฉด ๋‹ซ๊ธฐ
      1. { react } ์ด๋ ‡๊ฒŒ ์ค‘๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ์„œ ๋„ฃ๊ณ  ๊ฐ’ ์‚ฌ์ด์— ๊ณต๋ฐฑ์ฃผ๊ธฐ
APP.js ์—์„œ 

    import React from 'react'; // ๋ฆฌ์•กํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์“ฐ๊ฒŸ๋‹ค.
    import Example from './Example'; // example ์˜ ์ฃผ์†Œ์—์„œ example ์„ ์“ฐ๊ฒ ๋‹ค.
    import "./App.css";  // css ๋ฅผ ์“ฐ๊ฒŸ๋‹ค ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค.

    function App() {
      const name = 'react';
      const style = {
        backgroundColor: 'black',
        color: 'aqua',
        fonstSize : 24,
        padding: '1rem'
      };

      return ( // ๊ด„ํ˜ธ๋Š” ๊ทธ๋ƒฅ ๋ถ€๊ฐ€์ ์ธ๊ฒƒ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด์„œ ์‚ฌ์šฉ
        <div> // ๋ฌด์กฐ๊ฑด ์‹œ์ž‘ํ• ๋•Œ tag๋กœ ๊ฐ์‹ธ์ฃผ๊ณ  ์‹œ์ž‘ํ•˜๊ธฐ <></> ๋นˆ ํƒœ๊ทธ๋„ ๊ดœ์ฐฎ.
            <Example /> // ํ•ญ์ƒ ๋‹ซ๋Š” ํƒœ๊ทธ
            <div style={ style }>{ name }</div>  // ์ค‘๊ด„ํ˜ธ๋ฅผ ํ†ตํ•ด์„œ name์˜ ์ƒ์ˆ˜๋ฅผ ์‚ฌ์šฉ๊ฐ€๋Šฅ
                                                  //  ์Šคํƒ€์ผ๋„ ์ค‘๊ด„ํ˜ธ ์•ˆ์—๋‹ค๊ฐ€ ํ•˜๊ธฐ
              <div className="box"></div> // class ์ด๋ฆ„์„ ์„ค์ •ํ• ๋•Œ className์œผ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
            { /* ์ฃผ์„ */ } // ์ฃผ์„์€ ์ด๋ ‡๊ฒŒ ์ฒ˜๋ฆฌ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
        </div>
        );
    }

Exapmle.js
    import React from 'react';

    function  Example() {
      return <div>ํ•˜์ด์š”</div>
    }

    export default Example;

๐Ÿ props๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์— ๊ฐ’ ์ „๋‹ฌ

APP.js ์—์„œ 

    import React from 'react'; // ๋ฆฌ์•กํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์“ฐ๊ฒŸ๋‹ค.
    import Example from './Example'; // example ์˜ ์ฃผ์†Œ์—์„œ example ์„ ์“ฐ๊ฒ ๋‹ค.


    function App() {
          return (
          <>
            <Example name="react" color="red" />
              <Example color="blue" />
          </>
        )
    }

Exapmle.js
    import React from 'react';

    function  Example(props) {
      console.log(props); // { name: 'react' } ๊ฐ€ ์ถœ๋ ฅ์ด ๋จ.

      return <div style={ { 
                color
                  } }>ํ•˜์ด์š” { props.name }</div> 
         // ํ•˜์ด์š” react
         // ์ค‘๊ด„ํ˜ธ๋ฅผ ๋‘๊ฐœ๋ฅผ ํ•œ๊ฒƒ์€ ํ•˜๋‚˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธํ˜•์‹์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•จ์ด๊ณ  ํ•˜๋Š” ๊ฐ์ฒด๋ผ์„œ์ž…๋‹ˆ๋‹ค.
    }

** Example.js ๋น„๊ตฌ์กฐ ํ• ๋‹น์œผ๋กœ ๋ฐ”๊ฟ”๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. (function ๋งŒ ๊ฐ„๋žตํžˆ ๋ฐ”๊พธ๊ฒ ์Šต๋‹ˆ๋‹ค) **

  function Example({ color, name }) {
      return <div style = { {
                   color : color
                  } }>ํ•˜์ด์š” { name }</div>

    Example.defaultProps = { // ์ด๋ฆ„์„ ์„ ์–ธํ•œํ–ˆ์„๋•Œ๋‚˜ ๊ณ ์ •๊ฐ’์ผ๋•Œ ์‚ฌ์šฉ
        name : '์ด๋ฆ„์—†์Œ'    // ์•ˆ๋…•ํ•˜์„ธ์š” ์ด๋ฆ„์—†์Œ <- ํŒŒ๋ž‘์ƒ‰
    }

    export default Example;

๐Ÿ› ์ž์‹์ƒ์„ฑ

APP.js ์—์„œ 

    import React from 'react'; // ๋ฆฌ์•กํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์“ฐ๊ฒŸ๋‹ค.
    import Example from './Example'; // example ์˜ ์ฃผ์†Œ์—์„œ example ์„ ์“ฐ๊ฒ ๋‹ค.
    import Conatiner from './Container'; // ์ถ”๊ฐ€ํ•˜๊ธฐ

    function App() {
          return (
          <Container> // ๋ถ€๋ชจ๋กœ ์ฒ˜๋Ÿผ ๊ฐ์‹ธ์ค๋‹ˆ๋‹ค. 
            <Example name="react" color="red" />
              <Example color="blue" />
          <Container/>
        )
    }

Example.js ์—์„œ

  function Example({ color, name }) {
      return <div style = { {
                   color : color
                  } }>ํ•˜์ด์š” { name }</div>

    Example.defaultProps = { // ์ด๋ฆ„์„ ์„ ์–ธํ•œํ–ˆ์„๋•Œ๋‚˜ ๊ณ ์ •๊ฐ’์ผ๋•Œ ์‚ฌ์šฉ
        name : '์ด๋ฆ„์—†์Œ'    // ์•ˆ๋…•ํ•˜์„ธ์š” ์ด๋ฆ„์—†์Œ <- ํŒŒ๋ž‘์ƒ‰
    }

    export default Example;

์ƒˆ๋กœ์šด Container.js ์—์„œ
    import React from 'react';

    function Container( { children }) {
      const style = {
          border: '3px solid black',
        padding : 10
      };
      return <div style= { style } > { children }></div>
    }