[노마드/ReactJS 영화 웹 만들기] - Ch03 | 1~2. setState

[노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 

ReactJS setState

let counter = 0;
function countUp() {
    counter = counter += 1;
    console.log(counter);
}

위 코드는 React에서 아래와 같이 코드를 작성할 수 있다.

const data = React.useState(0)

배열을 호출할 때 좋은 short cut 있다.

const animals = ['호랑이', '사자', '고양이'];
console.log(animals[1]); //사자

위 코드는 일반적으로 배열을 출력하고, 아래 코드는 변수에 배열을 만들어 animals이라는 변수를 참조하게 해서 접근이 좋아졌다.

const [first, second, third] = animals;
console.log(second); //호랑이

이방식을 자동으로 re-render이 될 수 있도록 만들어줄 수 있다.

  function App() {
    //React.useState는 default value를 넣어줄 수 있다.
    let [counter, setCounter] = React.useState(0);
    const countUp = () => {
        setCounter((counter += 1)); // modifier 함수를 호출해 re-render 기능을 사용할 수 있다.    
    return (
       ...
    )
  };

<!--ReactJS 구현부-->
<script type="text/babel">
    const root = document.getElementById('root');

    function App() {
        let [counter, setCounter] = React.useState(0);
        const countUp = () => {
            setCounter((counter += 1)); // modifier 함수를 호출해 re-render 기능을 사용할 수 있다.
        };

        return (
            <div>
                <h3 id="main-title">클릭 횟수:{counter}</h3>
                <button id="new-btn" onClick={countUp}>
                    카운트 올리기2
                </button>
            </div>
        );
    }

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

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩