React State 사용해보기

React로 만든 Button Component에 onClick 이벤트로 count 값을 올려주고 싶습니다.

const Button = () => (<button style={{ backgroundColor: "tomato" }} onClick={() => {
            console.log("I'm Clicked" + count);
            count = count + 1

        }}>Click me</button>)

이렇게 Button이란 컴포넌트에 onClick 이벤트로 count값을 출력하고 count값을 1 증가시켜줍니다.

그럼 console.log 값은 1씩 계속 증가되는 것을 확인할 수 있습니다.

그럼 이 count값을 Title 컴포넌트의 content값으로 출력해보도록 합니다.

Title 컴포넌트의 content에 변수를 쓰기 위해서는 {} 중괄호로 묶어주면 됩니다.

const Title = () => (<h3 id="title" onMouseEnter={() => console.log("Mouse Entered")}>count = {count}</h3>);

이렇게 하면 count = 0, 1, 2, 3 이렇게 증가되야할텐데요.

하지만 console.log 값이 올라가는 것과 다르게 Title 컴포넌트의 contnent값은 변하지 않는다는 것을 볼 수 있습니다.

rendering이 다시 이루어지지 않기 때문에 발생하는 문제인데요.

이 문제를 해결하기 위해 사용하는 것이 state입니다.

클릭을 할 때 다시 rendering이 되게 해주는 친구인데요.

App 컴포넌트를 일단 만들어봅니다.

우리가 사용할 것은 React.useState()입니다. 이 값은 리스트 형태로 이루어져있는데, 첫 번째 값은 State로 사용할 변수의 이름, 두 번째는 이 state값을 변경해 줄 함수의 이름입니다.

예를들어 count를 state로 만들고 값을 0으로 초기화해주고 싶다면

const[count, modify] = React.useState(0)와 같이 넣어주면 됩니다.

여기서 modify는 state값을 변경해주는 함수라고 하였습니다.

useState에 count값만 넣어주었기 때문에 modify는 기본 함수가 들어있을텐데요.

이 modfiy를 한 번 사용해보도록 하겠습니다.

const App = () => {
            const [count, modify] = React.useState(0)
            const onClick = () => {
                modify(1)
            }


            return < div >
                <h3>{counter}</h3>
                <button onClick={onClick}>Click me</button>
            </div >
        }

기본적으로 제공하고 있는 modify에 값을 1로 넣어주도록 하겠습니다.

이렇게 하면 onClick 이벤트가 일어났을 때 modify 함수가 실행될 것입니다.

그리고 값을 확인해보면

state로 만들어준 count의 값이 1로 바뀐 뒤 reRendering이 되는것을 알 수 있습니다.

count의 값을 단순히 1로 바꾸는 것이 아니라 count + 1 의 값으로 만들어주고 싶다면?

modify()의 인자 안에 count+1의 값을 넣어주면 됩니다.

정리

1. React.useState는 1개의 state, 1개의 함수를 리스트 형태로 갖고있다.

2. React.useState값을 이용하여 state변수명과 함수명을 지정할 수 있다.
   ex) const [stateName, FunctionName] = React.useState(0)

3. React.useState의 함수명은 set+state변수 이름으로 짓는게 국룰이다.
   ex) const [counter, setCoutner] = React.useState(0)

4. React.useState의 set함수는 인자값으로 초기값을 기본으로 가진다.

이렇게 만들어준 State 변수 값은 다른 곳에서도 수정이 될 가능성이 있다.

counter 값을 0으로 초기화홰주면 setCounter의 인자 역시 초기값인 0이 들어간다.

setCounter의 return 값이 다시 counter에 들어가게 되는데, 다른 곳에서 counter 값을 조정하게 되면 counter+1을 return시킬 경우 원하는 값과는 달느 값이 들어갈 수 있다.

그렇기에 setCounter() 안에 setCounter((current)=>current+1)과 같은 식으로 기본적으로 제공되어졌던 Counter의 초기값을 활용해주는 것이 에러를 방지할 수 있는 방법이다.

그리고 함수로 return 한 값인 current+1이 다시 state값에 들어가게 되니 이 함수는 다른 곳에서 state값이 변경되더라도 문제없이 작동될 수 있다.