티스토리 뷰

개발/React

Day 3 - ReactJS

zpqmdh 2022. 12. 23. 15:08

이전 state 값을 바탕으로 현재 state 값을 설정하고 싶다면

//modifier(counter+1);
modifier((current)=>current+1);

(current) => currnet +1이 return 하는 값이 새로운 state가 됨

아래 방법이 더 안전한 방법(counter가 다른 함수 내에서도 사용될 수 있음.. )

 

왜? 위의 방법이 안전하지 않은 가 생각해봤는데..

React.useState()에서 counter state에서 값을 받아오면 modifier(counter+1)에서 새로 값을 세팅한다.

그런데.. useState가 실행되고 modifier가 실행되기 전에 다른 부분에서 counter를 바꾼다면

바뀐 counter 값이 적용되지 않아서 안전하지 않다고 이해함.. 

 

함수를 사용하면 리액트가 이 current가 확실히 현재 값임을 보장해줌

그리고 코드 내에서는 current라는 변수가 없었는데.. current를 넣어도 잘 작동하는 것이 궁금해서 찾아보니

modifier의 인자 값이 객체인지 함수인지 판별하는 부분이 있다.

만약 함수라면, 저장되어 있는 값(state)를 인자로 하여 return한 값을 최종적으로 update 한다.

함수 내에서 current가 현재의 counter임이 보장되고 계산을 하기 때문에 외부에서 counter 값이 변경되더라도 함수 안에서 값은 안전하게 반환될 수 있게 하는 것!!!! (이해 완)

 

=> state 기반으로 계산을 하고 싶다면 함수를 이용해서 다음 state 값이 현재 값을 바탕으로 나올 수 있도록 하자!

 

 

<!DOCTYPE html>
<html>

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js "></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js "></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.getElementById("root"); 
    function App() {
        return (
        <div>
            <h1>Super Converter</h1>
            <label for="minutes">Minutes</label>
            <input id="minutes" placehoder="Minutes" type="number" />
            <label for="hours">Hours</label>
            <input id="hours" placeholder="Hours" type="number" />

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

</html>

잘 작동을 하지만 이것은 HTML!

JSX에서는 이렇게 작성하지 않음

 

for, class은 JavaScript 용어임 => 이미 선점되어 있기 때문에 사용하면 안 됨

JSX에서는 htmlFor, className으로 수정해줘야 함

 

 

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js "></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js "></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
            const [minutes, setMinutes] = React.useState(0);
            const onChange = (event) => {
                setMinutes(event.target.value);
            };
            const reset = () => {
                setMinutes(0);
            };
            return (
                <div>
                    <h1>Super Converter</h1>
                    <div>
                        <label labelFor="minutes">Minutes</label>
                        <input
                            value={minutes}
                            id="minutes"
                            placehoder="Minutes"
                            type="number"
                            onChange={onChange}
                        />
                    </div>

                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input
                            value={Math.round(minutes / 60)}
                            id="hours"
                            placeholder="Hours"
                            type="number"
                            disabled
                        />
                    </div>
                    <div>
                        <button onClick={reset}>Reset</button>
                    </div>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>

사용자가 입력한 minutes를 hours로 변환하는 웹사이트이다.

onChange event listener를 통해 입력받은 minutes를 보여주고

Hours는 그 minutes를 60으로 나눈 값을 반올림하여 사용자에게 보여준다.

disabled를 추가하여 Hours의 값을 변경하지 못하게 하였다.

 

 

저작자표시

'개발 > React' 카테고리의 다른 글

Day 6 - ReactJS  (0) 2022.12.27
Day 5 - ReactJS  (0) 2022.12.26
Day 4 - ReactJS  (0) 2022.12.25
Day 2 - ReactJS  (0) 2022.12.22
Day 1 - ReactJS  (1) 2022.12.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함