state는 데이터가 저장되는 곳이다. useState는 react에서 제공하는 hook기능이다.

<script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUP() {
      counter = counter + 1;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    }
    const Container = () => (
      <div>
        <h3>Total clicks : {counter}</h3>
        <button onClick={countUP}>Click me</button>
      </div>
    );
    render();
  </script>

변수를 중괄호에 넣어서 변수의 변화를 업데이트 할 수 있는걸 볼 수 ㅇㅆ다.

js에선 모든 요소가 재 랜더링 되었었는데 리액트 state는 해당 변수가 들어간 위치만 재 랜더링 해준다. 보통 프로그래머라면 함수에 정의된 내용전체가 재 랜더링할거라 생각하지만 리액트는 state만 해준다.

const state = React.useState();
      const onClick = () => {
        console.log(state);

ReactDOM.render에 쓰이는 함수는 함수 컴포넌트라 부르고 함수가 리턴한 JSX를 컴포넌트라 부른다. 그리고 함수 컴포넌트를 감지해서 프로그래밍을 도와주는 기능을 hook이라고 한다.

<script type="text/babel">
    const root = document.getElementById("root");
    function coutnerUP() {}
    const App = () => {
      const [counter, modifier] = React.useState(0);
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button>Click me</button>
        </div>
      );
    };
    ReactDOM.render(<App />, root);
  </script>

modifier에 들어간 인수를 업데이트하고 리렌더링할꺼다

const App = () => {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    };

useState가 동작을하면 인수1이 업데이트 되고 ReactDOM.render로 처음 랜더링한 ReactDOM.render(<App />, root); 형태로 다시 refresh한다.

함수 컴포넌트

state값을 변경하는 방법은 두가지 이다. 하나는 setter 인수를 직접 넣어주는것, 다른하나는 이전 값을 참고하여 계산식으로 인수로 넣어주는 방법이다.

하지만 여러곳에서 state값을 변경하면 현재 state값이 내가 원하는 값이 아니게 될 수 있다. 그래서 위 방법보다 더 좋은 방법은 인수를 함수로 넣어주는 방법이다.

setCounter((current) => current + 1);

이렇게하면 인수로 제공된 함수가 지정된 동작을 하지만 오직 인수 함수의 인수로 값을 업데이트하고 그 값으로만 사용되게 된다.

JSX를 쓴다는건 js를 사용하는것이다.절대 HTML을 사용하는것이 아니기에 HTML의 attributes의 for, class와 같은 js keyword를 JSX에서 사용할 수 없다. 그래서 for을 htmlfor, calss를 calssName으로 바꾸어 JSX attribute를 넣어줘야한다.