🐶리액트가 나온이유

바로 코드를 보도록 하자

const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');
increse.onclick()=>{
  const now = parseInt(number.innerText, 10);
  number.innerText = current + 1;
};
decrease.onclick()=>{
  const now = parseInt(number.innerText, 10);
};
  

위의 코드를 해석해보자
+1을 누르면 id가 number인 dom 을 선택하여 속성을 1씩 더해주어라이다.
위의 코드는 간단하고 사용자와의 교류가 없어서 상관없겠지만 이러한 서로의 인터랙션이 자주발생하고 또한 이러한 이벤트도 다양하고 많아지며 관리가 필요로 하는 상태값또한 다양해지고 DOM도 다양해지면 유지보수 및 관리가 힘들어진다.
하지만 리액트에서는 어떤 상태가 바뀌면 위의 코드 처럼 DOM을 어떻게 할지 규칙을 정하는게 아니라 모든걸 날리고 처음부터 모든걸 새로 만들어 준다는 아이디어에서 시작되었다.

🐶props

props는 properties의 줄임말입니다.
우리가 어떠한 값을 컴퍼넌트에 전달해줘야 할 때 props를 사용합니다.

👍hello 컴포넌트를 사용할때 name이라는 값 전달 해주기

👍App.js

import React from 'react';
import Hello from './Hello';

function App(){
  return(
  	<Hello name="yeongjae" />
    );
}
export default App

🍎Hello.js

import React from 'react';

function Hello(props){
  return
  	<div>안녕하세요 {props.name}</div>
}
Hello.defaultProps ={
  name: '이름 없음'
}
export default Hello;

여기서 defaultProps는 props의 값이 없을때 기본으로 설정되어 있는 값입니다.

🍎state

앞에 props는 부모가 자식에게 내려줄 때 사용을합니다
그리고 자식입장에서 props는 읽기전용입니다.
이번에는 이것과 조금다른 state를 알아보자.
state는 내부에서 변경할 수 있다.
변경 할 때는 언제나 setState 라는 함수를 사용한다.
만약 변화가 필요하면state는 내부에서 변경 할 수 있다. component의 setState()라는 함수를 사용한다.

👌state를 사용해 +1/-1 버튼 만들기

App.js

import React, { Component } from "react";
import Counter from "./Counter";

class App extends Component{
  render(){
    return <Counter />
  }
  }
  export default App;

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(){
  <div>
    <div>값: {this.state.number}</div>
  	<button onClick={this.handleIncrease}>+</button>
  	<button onClick={this.handleDecrease}>-</button>
   </div>
  );
}
}
export default Counter;

코드를 설명하면 handleIncrease,handleDecrease라는 함수를 선언해서 +1,-1기능을 할 수 있게 하였다.
여기서 중요한건 number값은 변화하게 되니 setState로 설정해줘야한다.
onClick이라는 이벤트를 button에사용하여 각자의 함수를 적용시켰다.

위와 같은 결과가 출력되며 +/-의 버튼을 클릭 할때마다 1씩 더해지고 1씩 지워지게 됩니다.

💯위코드3주차를 다니며...

진도나 실력은 역시나 많이 뒤쳐진다. 걱정안된다고 하면 거짓말이지만 그렇다고 초조하거나 그런다기보단 늦는 대신 나만의 속도로 꼼꼼히 개념을 보고 정리하며 천천히 그러나 확실하게 할것입니다!!
무엇보다 중요한 것은 즐겁게 하자는 마음은 꼭 유지하자 입니다! ㅎㅎ