< react > 컴포넌트를 이용한 간단한 react 응용

이번 포스팅에는 앞서 공부한 리엑트 응용입니다.

---

Counter.js

import React  from "react";
function Counter(){
  
  return(
    <div>
      <h1>{number}</h1>
      <button onClick={plus}>+1 증가</button>
      <button onClick={minus}>-1 감소</button>
    </div> 
  );
}
export default Counter;

 

이 컴포넌트는 버튼 두 개를 생성해서 각 이벤트를 적용하여 카운터를 증감하도록 하는 컴포넌트이다.
실제 증가하는 카운터 변수는 부모 컴포넌트에 존재하고, 

이벤트도 부모에 존재한다.
단지 Ui 구성만 하고, 나머지는 props 를 통해 이벤트 등의 초기 정보를 주며
이벤트 이후 변경되는 상태값은 state이라는 내장 객체를 이용해서 가공한다.
대부분의 React 는 이러한 방식으로 구현되어진다.

app.js

import logo from './logo.svg';
import './App.css'; //자바스크립트의 모듈화에 따른 문법 .각 모듈을 코드내로 import 시 사용.
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <Counter>
        
      </Counter>

    </div>
  );
}

export default App;

우선 app.js에 이렇게 작성한다. 

 

다시 Counter.js 로 돌아가자.

Counter.js

 

 userState() 내장함수 객체: 이 함수는 동적 데이터를 관리하도록 정의된 객체.
                                            반드시 변환되는 값인 변수 (주로 객체) 에

                                            이 함수를 이용해서 필요 시 초기 값을 할당 받고,
                                            setter 를 지정해서 이 setter 를 이용해 값을 가공해야한다.

문법

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

---

const plus = () => {
    setNumber(number+1);
  }
  const minus = () => {
    setNumber(number-1);
  }

plus , minus 함수를 람다로 정의 한다.

이때 useState 객체를 이용한 값 갱신 함수안에 값 저장변수를 호출해 알맞는 로직을 구성한다.

return(
    <div>
      <h1>{number}</h1>
      <button onClick={plus}>+1 증가</button>
      <button onClick={minus}>-1 감소</button>
    </div> 
  );

리턴 구문에 상태 값 저장변수를 {} 를 씌어 h1 으로 출력하고

button 에 이벤트 onclick 을 정의한다 이때 안에 람다로 정의한 plus/minus 함수를 {} 를 씌어 호출한다.

이렇게 해서 완성된 코드는 아래와 같다.

import React, { useState }  from "react";
function Counter(){
  

  const [number, setNumber] = useState(0);

  const plus = () => {
    setNumber(number+1);
  }
  const minus = () => {
    setNumber(number-1);
  }


  return(
    <div>
      <h1>{number}</h1>
      <button onClick={plus}>+1 증가</button>
      <button onClick={minus}>-1 감소</button>
    </div> 
  );
}
export default Counter;

참고로 useState 를 정의하면 자동으로 import 에 붙는다 ( vs code 에만 붙는 건지는 잘 모르겠음.)

이렇게 작성 완료한 코드를 실행시키면 

이렇게 잘 출력이 된다.

이제 이벤트가 정상적으로 실행되는지 확인해 보자.

plus/minus 람다함수에 arlet 추가했습니다.

증가가 잘되는 걸 확인했고 이제 감소가 잘 되는지 확인해보겠습니다.

이렇게 감소까지 잘되는 걸 확인했다.

---

이걸 이용해 게시물에 추천수 로직을 프론트에서 리엑트를 이용해 하면 편하고 좋을 거 같다.