Immersive - React

🏖 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. 항상 태그로 열었으면 닫기
  2. { 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>
    }