React.js로 카운팅 앱 만들기

※2021-하계-학교-스터디※

0. 디렉토리 구성

1. 카운팅 앱

+1을 누르면 숫자가 증가하고, -1을 누르면 숫자가 감소한다.

→ 이 앱을 컴포넌트로 분리해보자!

예상 결과

2. 필요한 컴포넌트 

• 숫자를 담을 수 있는 박스
• 누르면 숫자가 증가하는 버튼
• 누르면 숫자가 감소하는 버튼 

3. 코드 작성하기(counter.js) 

• 변수 선언
  • const: 다른 값으로 초기화하지 않겠다
  • let: 흔히 사용하는 변수(값이 바뀜)
• 태그에서 변수를 불러올 때, 꼭 { }중괄호를 사용해줘야 한다. 
  • {}없이, <h1>num</h1>와 같이 적게 되면, 변수가 아닌 문자열로 인식한다. 
• <button>태그의 onClick property(props)
  • react에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해줘야 한다. 그 중에서도 onClick은 클릭시 지정된 함수가 실행된다.
• useState
  • 컴포넌트에서 동적인 값을 상태(state)라고 부른다.
  • 리액트에 useState 라는 함수가 있는데, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다.
  • import React, {useState} from 'react'; 로 리액트 패키지에서 useState함수를 불러온다.
  • 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.
  • Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해줍니다.
  • 원래는 다음과 같이 해야 하지만, 배열 구조화 할당을 이용해 각 원소를 추출할 수도 있다.

    // 원래 
    const numberState = useState(0);
    const number = numberState[0];
    const setNumber = numberState[1];
    // 배열 비구조화 할당
    const [num, setNum] = useState(0);

    ¿?여기서 든 의문?¿ num과 setNum에 const를 붙이면 값 변경이 안되지 않나? ¿?¿?¿?¿?
    • Not really. When the component is rerendered, the function is executed again, creating a new scope, creating a new count variable, which has nothing to do with the previous variable.(아래 url 참조)
    • https://stackoverflow.com/questions/58860021/why-react-hook-usestate-uses-const-and-not-let 

Why React Hook useState uses const and not let

4. 코드 

• counter.js

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

function Counter(){
    const num = 0;
    const increase = () => {
        num++;
    }
    const decrease = () => {
        num--;
    }
    return (
    <div>
        <h1>{num}</h1>
        <button onClick={increase}>Up</button>
        <button onClick={decrease}>Down</button>
    </div>
    );
}
export default Counter;

위와 같이 작성하게 되면, 실제로 num의 값은 변하게 되지만, 웹에서 보여지는 숫자는 변하지 않게 된다. 즉, 렌더링되지 않고 처음 값을 계속 보여주고 있기 때문이다. 이를 변경하기 위해서는, 아래의 코드와 같이 수정해줘야 한다. 

---

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

function Counter(){
    const [num, setNum] = useState(0);
    const increase = () => {
        setNum(num+1);
    }
    const decrease = () => {
        setNum(num-1);
    }
    return (
    <div>
        <h1>{num}</h1>
        <button onClick={increase}>Up</button>
        <button onClick={decrease}>Down</button>
    </div>
    );
}
export default Counter;

---

• App.js코드

// App.js
import logo from './logo.svg';
import './App.css';
import Counter from './components/counter';
function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}
export default App;

---

5. 결과

웹 앱을 여는 방법은 여기를 참고!

기본 상태

Up 버튼을 눌렀을 때

Down버튼을 눌렀을 때