hook실습1. counter 만들기

목차

1. state 초기화 및 렌더될 화면 디자인
2. onClick 이벤트 작성
3. 누적 작성 코드

 

 

버튼을 클릭하면 값이 증가하는 counter를 작성해보자!

우선 기본 기본 셋팅과 디자인부터 작성해보자.

 

 

1. state 초기화 및 렌더될 화면 디자인

1-1. 코드 작성 순서

1. import 문을 통해 React와 hook을 가져옴
2. State라는 함수 컴포넌트 생성
3. retrun으로 렌더될 화면을 디자인하는 코드 작성
4. useState() 메서드로 hook 호출

 

1-2. 작성 코드

import React, {useState} from 'react'

const State = () => {
    const [count, setCount] = useState(0)

    return(
        <div>
            <p>You clicked {count} times.</p>
            <button>
                Click me!
            </button>
        </div>
    )
}

 

 

1-3. 렌더 화면 확인

 

클릭하면 count가 1씩 증가하게 만들기 위해 onClick 이벤트를 작성해보자

 

2. 이벤트 작성

2-1. 코드 작성 가이드

• 버튼의 속성에 onClick 이벤트 부여
• state를 업데이트 하는 hook인 setCount() 메서드 호출
• 인자값으로는 현재의 state+1을 작성

2-2. 작성 코드

<button onClick = { () => { setCount (count+1) } }>

 

3. 확인

 

서버를 실행해보면

• hooks의 State가 1씩 증가함과 동시에
• 렌더 화면의 count가 1씩 증가하는 것을

확인할 수 있다.

 

 

4. 누적 작성 코드

4-1. 기존 작성코드 버전

import React, {useState} from 'react'

const State = () => {
const [count, setCount] = useState(0)

return(
    <div>
        <p>You clicked {count} times.</p>
        <button onClick = { () => { setCount (count+1) } }>
            Click me!
        </button>
    </div>
	)
}


export default State

 

 

4-2. 새로운 버전

기존 버전처럼 단순히 state+1의 연산으로 인자값을 넣어줄 수도 있고,

아래의 코드처럼 함수 형태로 작성해줄 수도 있다.

 

return(
    <div>
        <p>You clicked {count} times.</p>
            <button onClick = { () => { setCount( (prev) => prev+1 ) } }>
            Click me!
        </button>
    </div>
	)