React(누구든지 하는 리액트)

Webpack: 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 결과물로 만들어 냅니다.
=>웹프로젝트를 만들때 전체적으로 파일을 관리해주는 도구

Babel: 자바스크립트 변환 도구

JSX: html이랑 비슷하지만, 지켜야 할 규칙이 몇가지 있다.
let
JSX 참고문서
const
화살표 함수

function foo(){
var a = 'hello';
if(true){
var a = 'bye';
console.log(a);//bye
}
console.log(a);//bye 함수단위기때문에 바깥 a도 bye로 변경
}

function foo(){
let a = 'hello';
if(true){
let a = 'bye';
console.log(a);//bye
}
console.log(a);//hello 블록단위
}

var	const	let
더이상 안쓰임	한번 선언 후 고정적인 값	유동적인 값

//css 적용하기 
import React, { Component } from 'react'

class App extends Component {
	render() {
    	const style ={
        	backgroundColor: 'black',
            padding: '16px',
            color: 'white',
            fontSize: '36px'
           };
           return(
           <div style= {style} >
           안녕하세요!
           </div>
            );
           }
         }
   export default App;

//App.css 불러오기
import React, {Component} from 'react';
import './App.css';

class App extends Component {
	render(){
    	return <div className="App">
        {/*주석처리*/}
        안녕하세요!</div>;
        }
      }
    export default App;

Props
부모 컴포넌트가 자식 컴포넌트에게 값을 전달할때 사용된다.
ex)

//MyName.js
import React, {Componet} from 'react';

class MyName extends Component {

static defaultProps ={
	name: '기본이름'
    }
    
  render(){
    return (
      <div>
        안녕하세요 제이름은 <b>{this.props.name}</b>입니다
      </div>
      )
      }
    }
    
    MyName.defaultProps = {
    	name: 'velopert'
        };
    
export default MyName;

//App.js에서 MyName 불러오기
import React, {Component} from 'react';
import MyName from './MyName';

class App extends Componet{
  render(){
    return<MyName name="리액트" />;
    }
   }
   
   export default App;

//함수형으로 MyName.js 바꾸기
import React, {Componet} from 'react';

const MyName = ({name}) => {
    return (
      <div>
        안녕하세요 제이름은 <b>{name}</b>입니다
      </div>
      )
    };
    
    MyName.defaultProps = {
    	name: 'velopert'
        };
  export default MyName;

비구조화 할당 문법
State
자기 자신이 들고있음. 내부에서 변경 할 수 있다. 변경할 때는 언제나 setState 라는 함수를 사용한다.

//counter.js
import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  };

  handleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  };

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  };
  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

//화살표 함수 말고 그냥 함수로 쓰려면 constructor 추가해줘야함
constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }
  handleIncrease() {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease() {
    this.setState({
      number: this.state.number - 1
    });
  }

LifeCyCle API 소개 및 사용법
1.나타날 때 2.업데이트 될 때 3. 사라질 때

LifeCycle API 참고 문서

자식 컴포넌트가 부모한테 값을 전달하는 방법

handleCreate

데이터 제거
.slice 혹은 .filter

const numbers = [1,2,3,4,5]

numbers.filter(n => n >3);
[4,5]
numbers는 그대로 [1,2,3,4,5]

데이터 수정
.slice 혹은 .map

immutable.js
immer.js

Ref를 통하여 DOM에 직접 접근하기