[ReactJS] TIL #3

Modifier 함수에서 State를 바꾸는 방법

/* modifier 함수 이용하여 State 바꾸는 방법*/

const [counter, setCounter] = React.useState()

// 1) 직접 값 지정
setCounter(5)

// 2) 변수 직접 이용
setCounter(counter + 1);

// 3) 현재 값 이용
setCounter((current) => current + 1);

 

 

시간 분 환산 앱 만들기

const root = document.getElementById("root");
function App() {
    const [amount, setAmount] = React.useState(0);
    const [flipped, setFlipped] = React.useState(false);

    const onChange = (event) => {
        setAmount((event.target.value))
        // input의 value가 바뀔 때마다
        // useState modifier 함수 통해
        // amount 값 업데이트와 렌더링
        // 매개변수 event를 통해 객체의 value 값 얻음
    }

    // minutes를 0으로로 reset
    const reset = () => setAmount(0)

    // Flip button
    const onFlip = () => {
        setFlipped((current) => !current)
        // current는 flipped의 현재 값
        // setFlipped는 이를 반대 값으로 바꿈

        reset()
        //flip 버튼 누르면 reset
    }

    return(
        <div>
            <h1>Super Converter</h1>
            <label htmlFor="minutes">Minutes</label>
            <input 
                value={flipped ? amount * 60 : amount} 
                // input을 controlled로 바꾸기 위해서는 value 지정해야 함
                // 삼항 연산자 이용하여 flipped의 boolean 값에 따른 value 지정
                // flipped이 참일 경우 (enabled): 시간을 분으로 환산한 값 출력
                // flipped이 거짓일 경우 (disabled): 입력 값 그대로 출력

                id ="minutes" 
                placeholder="Minutes" 
                type="number" 

                onChange={onChange}
                // input 값 입력될 때마다 minute 값 업데이트

                disabled={flipped === true}
                // (JSX의 조건문) flipped이 참이라면 disabled가 참이 된다
            />
            <label htmlFor="hours">Hours</label>
            <input 
                value = {flipped ? amount :  (amount / 60)}
                // flipped이 참일 경우 (enabled): 입력 값 그대로 출력
                // flipped이 거짓일 경우 (disabled): 분을 시간으로 환산한 값 출력

                id ="hours" 
                placeholder="Hours" 
                type="number"
                disabled={flipped === false}
                onChange={onChange}
            /> 
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>Flip</button>   
        </div>

    )
}
ReactDOM.render(<App />, root)

 

 

 

<Select> 태그 이용한 선택적 렌더링 구현

    const container = document.querySelector("#container");

    function Number(){ return <div>123456789</div> }
    function Korean(){ return <div>한국어</div> }
    function English(){ return <div>English</div> }

    function App () {
        const [selection, setSelection] = React.useState("0");
        const onChange = (event) => {
            setSelection(event.target.value)
        }
        return (
            <div>
                <select value={selection} onChange={onChange}>
                    <option value="0">rendering Number</option>
                    <option value="1">rendering Korean</option>
                    <option value="2">rendering English</option>
                </select>
                {selection === "0" ? <Number /> : null}
                {selection === "1" ? <Korean /> : null}
                {selection === "2" ? <English /> : null}
            </div>         
        )

    }
    ReactDOM.render(<App />, container)

 

참고사항

ReactJS에서 태그 element의 속성명 중 JS 키워드와 겹치는 것은 다른 속성명을 사용한다

label 의 for 속성은 ReactJS에서 forHTML로 작성해줘야 한다

그리고 요소의 클래스명은 class가 아닌 className으로 작성해줘야 한다

 

React.useState() 에서 변수명을 할당할 때 함수 내 최상단에 코드를 작성한다