리액트 - state

컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 구현하는 방법 : state 

 

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다.

 

1. import useState : 리액트 패키지에서 꺼내오기 

2. App 컴포넌트에 useState()를 사용한다.  -> 배열을 리턴하는 함수이다. 따라서 [ state, setter함수] 구조분해 사용 

3. num prop으로 전달 

4. Button 요소에 onClick prop으로 전달 

//App
import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

function App(){
    const [num, setNum] = useState(1); 
    // 파라미터로 초기값(1)을 전달받음 & 배열의 형태로 요소 두개를 리턴한다. -> 배열의 구조분해 문법 사용 
    // 첫번쨰 값 = state 값 = 현재 변수의 값 
    // 두번째 요소 = 세터 함수 = 함수를 호출할때 파라미터로 전달하는 값으로 state가 변경됨 
    // state값에 새로운 값을 할당하는게 아니라 setter 함수를 통해 변경해주어야한다. 

    const handleRollClick = () => {
        setNum(3);
}   

    return (

    <div>
        <div>
        <Button onClick={handleRollClick}>던지기</Button> 
        {/* handleRollClick함수를 던지기 컴포넌트에 onClick prop으로 전달 -> Button 컴포넌트에 prop을 전달해주는 것이므로 Button.js에서 prop을 처리해주어야한다. */} 
        <Button>처음부터</Button>
        </div>
        <Dice color="red" num={num}/> 
        {/* num prop으로 전달  */}
    </div>
    );
}

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

구조분해 부분을 풀어쓰면 위 코드와 같다. 

//Button
function Button({ children, onClick }){
    // App에서 onClick prop을 받아 처리한다.
    return <button onClick={onClick}>{children}</button>;
}

부모 컴포넌트에서 onClick prop을 전달받아서 처리해야한다. 

5. button 요소의 onClick 속성에 할당해준다

---

던지기 버튼을 누를때마다 랜덤한 숫자로 바꿔주기 

 

1. 1~n까지의 랜덤한 숫자를 리턴하는 함수 random(n)을 만들고

2. nextNum이라는 변수에 담아 setNum함수에 넘겨준다.

---

처음으로 버튼 누르면 1로 돌아가기

1. handleClearClick 함수 만들기 

2. 버튼 onClick prop으로 지정하기

function App(){
    const [num, setNum] = useState(1); 

    const handleRollClick = () => {
        const nextNum = random(6);
        setNum(nextNum);
}   
    const handleClearClick = () => {
        setNum(1);
    }
    return (

    <div>
        <div>
        <Button onClick={handleRollClick}>던지기</Button> 
        <Button onClick={handleClearClick}>처음부터</Button>
        </div>
        <Dice color="red" num={num}/> 
    </div>
    );
}