OddEvenResult.js

동적으로 rerender됨

const OaddEvenResult = ({ count }) => {
    return <>{count % 2 === 0 ? "짝수" : "홀수"}</>
}

export default OaddEvenResult

Counter.js

import React, {useState} from 'react';
import OaddEvenResult from './OddEvenResult';

const Counter = ({ initialValue }) => {

    const [count, setCount] = useState(initialValue);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OaddEvenResult count={count}/>
        </div>
    );
};

Counter.defaultProps={
	initialValue:0
}

export default Counter;