4. 동적(useState)

 

 1. 동적인 컴포넌트를 만들어보자 

 

예제 1 ) Counter 컴포넌트 (: 버튼을 누르면 숫자가 바뀌는 컴포넌트)

 

(1) src 디렉터리에 Counter.js 파일을 생성한다.

// src/Counter.js

import React from 'react';

function Counter() {
    return (
        <div>
            <h1>0</h1>
            <button>+1</button>
            <button>-1</button>
        </div>
    );
}

export default Counter;

 

(2) App.js 파일에서  Counter 를 렌더링한다.

src/App.js

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

function App() {
  return (
    <Counter />
  );
}

export default App;

 

너무 작아서 300% 확대했다

 

하지만 아직은 +1 혹은 -1 을 눌렀을 때 아무런 변화가 없다.

 

(3) 이벤트 설정

: Counter 에서 버튼이 클릭되는 이벤트가 발생했을 때 특정 함수가 호출되도록 설정하기

 

먼저 Counter.js 파일을 아래와 같이 수정한다.

src/Counter.js

import React from 'react';

function Counter() {
    const onIncrease = () => {
        console.log('+1');
    }
    const onDecrease = () => {
        console.log('-1');
    }
    return (
        <div>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

 

콘솔에 메세지가 잘 출력된다. 하지만 아직 숫자에는 반영되지 않는다.

 

(4) 동적인 값 추가하기 (  useState  ) 

 

컴포넌트에서 동적인 값을 상태(state) 라고 부른다.

useState 라는 함수를 사용하면, 컴포넌트에서 상태를 관리할 수있다.

 

Counter.js 파일을 아래와 같이 수정한다.

// src/Counter.js

// useState 함수를 사용하려면 리액트 패키지에서 불러야한다.
import React, { useState } from 'react';

function Counter() {
	// 상태의 기본값(0)을 파라미터로 넣어서 호출해주면 된다.
    const [number, setNumber] = useState(0);

    const onIncrease = () => {
        setNumber(number + 1);
    }
    const onDecrease = () => {
        setNumber(number - 1);
    }
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

 

반영이 잘 되는 모습

 

지금 한 방식은 +1을 함으로써 새롭게 업데이트 된 값을 다시 파라미터에 넣는 것이다.

 

하지만 그 대신, 값 자체를 바로 업데이트 할 수 있는 방법도 있다.

 

(5) 함수형 업데이트

: 새로운 값을 파라미터로 넣어 업데이트 하는 것이 아니라, 함수를 등록하여 값을 업데이트할 수 있다.

 

// src/Counter.js

import React, { useState } from 'react';

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

    const onIncrease = () => {
        setNumber(prevNumber => prevNumber + 1);
    }
    const onDecrease = () => {
        setNumber(prevNumber => prevNumber - 1);
    }
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

export default Counter;

 

onIncrease 와 onDecrease 에서 setNumber 를 사용할 때, 값을 업데이트하는 함수를 파라미터로 넣은 것이다.

 

이렇게 함수형 업데이트는 주로 나중에 컴포넌트를 최적화할 때 사용한다.