[React] useState - 01

01 문제

• 리액트 컴포넌트가 가지지 못한 부가기능을 추가.
• 리액트 컴포넌트는 지역변수가 변한다고 해서 다시 렌더링 되지 않음.

 

 

src

 

src/components

• src/components/Ball.js

import React from 'react'

function Ball(){
    let number = 3;
    return<>
        <h1>{number}</h1>
        <button onClick={() => { number += 1 }}>증가</button>
    </>
}

export default Ball

 

 

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
import Ball from './components/Ball';

ReactDOM.render(
  <React.StrictMode>
    <Ball />
  </React.StrictMode>,
  document.getElementById('root')
);

 

증가 버튼을 눌러도 증가하지 않음!

 

 

 

 

 

02 해결  //  React Hook

• 리액트 컴포넌트는 '상탯값(state)' 이라는 것을 따로 관리해 리렌더를 함.
• 함수형 컴포넌트가 상탯값을 관리하려면 useState 함수를 사용해야 함.
• useState 와 같이 함수형 컴포넌트가 가지지 못한 기능을
• 제공하는 독립적인 함수를 통틀어 '리액트 훅 (React Hook)' 이라고 함.

 

 

src

 

src/components

• src/components/Ball.js

import React, { useState } from 'react'

/*
useState(초깃값)
반환값은 : [상탯값변수, 상태변경함수]
*/

function Ball(){
    const [ number, updateNumber ] = useState(0)
    return<>
        <h1>{number}</h1>
        <button onClick={() => updateNumber(number + 1)}>증가</button>
    </>
}

export default Ball

※ useState 는 두가지 데이터를 배열에 담음. (1) 상탯값 (2) 상태 변경 함수

 

 

 

증가버튼을 누르면 숫자가 증가! (리렌더링)

 

 

 

증가와 감소 버튼

• Ball.js

import React, { useState } from 'react'

/*
useState(초깃값)
반환값은 : [상탯값변수, 상태변경함수]
*/

function Ball(){
    const [ number, updateNumber ] = useState(0)
    return<>
        <h1>{number}</h1>
        <button onClick={() => updateNumber(number - 1)}>감소</button>
        <button onClick={() => updateNumber(number + 1)}>증가</button>
    </>
}

export default Ball

 

 

 

 

 

03 미션

• 위에서 한 코드를 보완해보자!
• 증가는 최대 5 까지만 가능.
• 감소는 최소 -5 까지만 가능.

 

 

src

 

src/components

• src/components/Ball.js

import React, { useState } from 'react'

/*
useState(초깃값)
반환값은 : [상탯값변수, 상태변경함수]
*/

function Ball(){
    const [ number, updateNumber ] = useState(0)
    return<>
        <h1>{number}</h1>
        <button onClick={() => updateNumber(number == -5 ? number : number - 1)}>감소</button>
        <button onClick={() => updateNumber(number == 5 ? number : number + 1)}>증가</button>
    </>
}

export default Ball

 

 

최대 5 / 최소 -5

※ 노란색 창은 무시해도 됨! 권장메세지 일 뿐!

※ 위의 메세지는 ' === ' 을 권장한다고 알려줌.

 

import React, { useState } from 'react'

/*
useState(초깃값)
반환값은 : [상탯값변수, 상태변경함수]
*/

function Ball(){
    const [ number, updateNumber ] = useState(0)
    return<>
        <h1>{number}</h1>
        <button onClick={() => updateNumber(number === -5 ? number : number - 1)}>감소</button>
        <button onClick={() => updateNumber(number === 5 ? number : number + 1)}>증가</button>
    </>
}

export default Ball