React 정리 #5

실습 #1

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <Bpp>타이거</Bpp>
      </div>
    );
  }
}

class Bpp extends Component {
  render() {
    console.log("Bpp의 render와 return 사이입니다.");
    console.log(this.props.children);
    
    return (
      <div>
        <h1>Bpp입니다.</h1>
        <h1>{this.props.children}</h1>
        <Cpp>라이언</Cpp>
      </div>
    );
  }
}

const Cpp = ({children}) => {
  return (
    <div>
      <h1>{children}</h1>
    </div>
  );
};

export default App;

실습 #2

• 현재 일정관리 프로그램을 실행하기 위해 사용해야하는 sass install 과정이 create-react-app의 버전이 V2로 변경됨에 따라 실행되지 않는다. sass를 사용하기 위한 설정이다.

step 1

• 어디든 사용하게 되니 연속해서 적어 사용하길.
  1. npm install node-sass
  2. open-color
  3. sass-loader
  4. classnames

step 2

• index.css의 확장자명을 scss로 바꾸고, index.js에서 import한 index의 확장자명을 변경한다.

step 3

• 해당 index.scss에 가서 @import 'utils' 대신에 @import '~open-color/open-color를 사용해 직접 import 해준다.

step 4

• 대충 테스트용 코드를 넣어 확인한다.

  body {
  //`$`가 나오는것은 sass 문법. css는 아님.
  //$1-2-3 : 1=몰라도됨, 2=색상, 3=색의 강도
  background: $oc-blue-1;
  padding: 50px;
  margin: 50px;
  }
  

step 5

1. 일반 import 방식 javascript import './A.scss' → 문제점이 있었으니까 bind라는 방식이 나왔을것. 그냥 bind로 쓰는 습관을 들이자.

2. bind 방식 javascript import a from './A.scss' import classname from 'classnames/bind'

App.js

import React, { Component } from 'react';
import './A.scss'
import a from './A.scss'
import classNames from 'classnames/bind'

class App extends Component {
  render() {
    return (
      <div>
        <h1>호랑이</h1>
        <Bpp />
        <Cpp />
      </div>
    );
  }
}

const Bpp = () => {
  return (
    // {} 안써도 되는데, 그냥 호환용으로 써라
    <div className = {'red-box'}>
    </div>
  );
};

const Cpp = () => {
  const cx = classNames.bind(a)

  return (
    <div className = {cx('green-box')}>
    </div>
  );
};

export default App;

A.scss

.red-box {
    background: red;
    padding: 1rem;
}

.green-box {
    background: green;
    padding: 1rem;
}

index.scss

//* `@`는 sass의 import 방식임
//* `~`의 의미, 라이브러리를 설치할때 node_modules라는 폴더에 들어가야함. `~`를 앞에 적어주면 'node_modules에 넣어라~' 라는 뜻이됨.
@import '~open-color/open-color';

body {
  //`$`가 나오는것은 sass 문법. css는 아님.
  //$1-2-3 : 1=몰라도됨, 2=색상, 3=색의 강도
  background: $oc-blue-1;
  padding: 50px;
  margin: 50px;
}

import React, { Component } from 'react';
import './A.scss'
import a from './A.scss'
import './B.scss'
import c from './C.scss'
import d from './D.scss'
import e from './E.scss'
// import './F.css'
import f from './F.css'

import classNames from 'classnames/bind'

const cxf = classNames.bind(f)

class App extends Component {
  render() {
    return (
      <div>
        <h1>호랑이</h1>
        <Bpp />
        <Cpp />
        <Dpp />
        <Fpp />
        <Hpp />
        <Ipp><Gpp /></Ipp>
        <Jpp><Gpp /><Kpp /></Jpp>
        {/* 함수형 컴포넌트로 값을 쏴줄 경우에 바로 매개변수로 값을 받는다. */}
        <Lpp hey show ={true} me = {30} the = {''} money = {false}>호랑이</Lpp>

        <h2>Button Colors</h2>
        <p>Change the background color of a button with the background-color property:</p>

        <button className={cxf('button')}>Green</button>
        <button className={cxf('button button2')}>Blue</button>
        <button class="button button3">Red</button>
        <button class="button button4">Gray</button>
        <button class="button button5">Black</button>
      </div>
    );
  }
}


const Lpp = ({hey, show, me, the, money, children}) => {
  console.log(hey, hey.type, show, show.type, me, me.type, the, the.type, money, money.type);

  return (
    <div>
      
    </div>
  );
};

const Bpp = () => {
  return (
    // {} 안써도 되는데, 그냥 호환용으로 써라
    <div className = {'red-box'}>
      Bpp
    </div>
  );
};

const Cpp = () => {
  const cx = classNames.bind(c)

  return (
    <div className = {cx('green-box')}>
      Cpp
    </div>
  );
};

const Dpp = () => {
  return (
    <div className = {'block-box'}>
      Dpp
    </div>
  );
};

const cxc = classNames.bind(c);

const Fpp = () => {
  return (
    <div className = {cxc('page-template')}>
      <h1>일정 관리</h1>
      <div>
        안녕하세요.
      </div>
    </div>
  );
};

const cxd = classNames.bind(d);

const Gpp = () => {
  return (
    <div className = {cxd('todo-input')}>
      <input value = '여기에 입력' onChange = {() => {}}/>
      <div className = {cxd('add-button')}>추가</div>
    </div>
  );
};

const Hpp = () => {
  return (
    <div className = {cxc('page-template')}>
      <h1>일정 관리</h1>
      <div>
        <Gpp />
      </div>
    </div>
  );
};

const Ipp = ({children}) => {
  return (
    <div className = {cxc('page-template')}>
      <h1>일정 관리</h1>
      <div>
        {children}
      </div>
    </div>
  );
};

class Jpp extends Component {
  render() {
    return (
      <div className = {cxc('page-template')}>
      <h1>일정 관리</h1>
        <div>
          {this.props.children}
        </div>
      </div>
    )
  }
}

const cxe = classNames.bind(e);

class Kpp extends Component {
  render() {
    return (
      <div className = {cxe('todo-item')}>
        <input className = {cxe('tick')} type="checkbox" checked={true} readOnly />
        <div className = {cxe('text')}>캘린더 만들기</div>
        <div className = {cxe('delete')}>[지우기]</div>
      </div>
    )
  }
}


export default App;