React에서 useState사용하기

 

1. 동적인 데이터를 useState함수를 사용해서 지정해준다.

 

[react.js]

const root = document.querySelector('#root')
const App = () => {
        let [counter, setCounter] = React.useState(0);
    }
ReactDOM.render(<App />, root);

 

2. 어떤 동작을 실행할 때 데이터를 수정해주는 함수를 만들어준다.

    일반적으로 데이터 접두어로 set을 붙여서 만드는 듯 하다.

 

[react.js]

const root = document.querySelector('#root')
const App = () => {
        let [counter, setCounter] = React.useState(0);
        function countUp() {
            counter ++
            setCounter(counter)
        }
        return (
            <div>
                <h3>Total clicks: {counter}</h3>
                <button onClick={countUp}>Click me</button>
            </div>
        );
        
    }
ReactDOM.render(<App />, root);

 

실행되는 흐름

1. App이라는 컴포넌트를 호출.

2. 초기값이 0인 counter를 useState()를 통해서 생성.

3. 'Click me' 버튼을 누르면 countUp() 함수를 호출.

4. countUp()은 counter를 1 증가시킨 후, setCounter를 통해서 counter값을 수정해줌.

5. useState()를 사용한 counter의 값이 변경되면 React.js 가 컴포넌트를 리렌더링 해줌.

 

 

state를 update하는 두 가지 방법

1. setCounter()를 이용해서 직접 할당

function countUp() {
            setCounter(counter + 1);
        }

 

2. 이전 state를 이용해서 할당

setCounter는 첫 번째 인자로 그 전 state의 값을 받는다.

function countUp() {
            setCounter((currValue) => currValue + 1);
        }

 

만약 값을 그대로 할당하는게 아니라 이전 state의 값과 연관되어 있다면
두 번째 방법이 더 안전한 방법이다.

첫 번째 방법으로 하면은 예상치 못한 곳에서 counter가 업데이트 됐을 때, 예상하지 못한 값이 나올 수도 있기 때문이다.

 

Ref: https://nomadcoders.co/react-for-beginners